SwiftUI Picker SegmentedStyle Изображение плохое отображение

Question

У меня есть простой инструмент выбора в SegmentedStyle с двумя изображениями внутри:

@State var selectedIndex = 0

    @State var segmentOptions = [
        Image.carFill,
        Image.walking
    ]
    //@State var destination: Destination

    var body: some View {
        HStack {
            Picker(selection: $selectedIndex, label: Text("")) {
                segmentOptions[0]
                    .tag(0)
                segmentOptions[1]
                    .tag(1)
            }.pickerStyle(SegmentedPickerStyle())
            Text("test")
        }
    }

Первая - это система изображений из SF Symbol, вторая - еще одна, которую я импортировал из ресурса. Отображение второго изображения остается без отступов и в аспекте Ratio с заливкой, не имеет значения, что я указываю в качестве параметров. Обратите внимание, что он отлично работает при использовании другого PickerStyle (колесо).

Я попробовал следующее:

segmentOptions[1].aspectRatio(contentMode: .fit).padding()

segmentOptions[1].resizable().aspectRatio(contentMode: .fit).padding().frame(width: 20, height: 20, alignment: .center)

И многие другие комбинации, но результат все тот же: отображение второго изображения без отступов и с заливкой aspectRatio.

У вас есть идеи, как это исправить?

Answer 1

По результатам моего поиска я рекомендую явно изменить размер растрового изображения до необходимого размера (я использовал 24 x 24 для 1x) ... или найти приемлемый векторный формат (вероятно, PDF, но я не уверен ... пытаясь найти некоторые для тестирования, и, между прочим, можно также создать собственное ПО)

Вот почему ... давайте начнем с объявления API

/// A `PickerStyle` where the options are contained in a segmented control.
///
/// - Note: Only supports segments of type `Label` and `Image`. Passing any
/// other type of view will result in a visible, but empty, segment.
@available(iOS 13.0, OSX 10.15, tvOS 13.0, *)
@available(watchOS, unavailable)
public struct SegmentedPickerStyle : PickerStyle {

Как это виден только Image работает, поэтому любые sizeToFit и aspect -подобные не работают, потому что они генерируют View.

Здесь используется PNG-изображение с предварительно измененным размером вручную (любой графический c дизайнер может создать идеальное изображение нужного размера, как это было раньше для значков кнопок)

Результат демонстрации:

Код демонстрации:

extension Image {
    static var carFill: Image {
        Image(systemName: "car.fill")
    }

    static var walking: Image {
        Image("pedestrian_small") // < explicitly resized 1x:24 x 24
    }
}

struct TestSegmentWithImages: View {
    @State var selectedIndex = 0

    @State var segmentOptions = [
        Image.carFill,
        Image.walking
    ]

    var body: some View {
        VStack {
            Image("pedestrian") // << original 400 x 400
                .resizable()
                .scaledToFit()
                .frame(width: 48)
            HStack {
                Picker(selection: $selectedIndex, label: Text("")) {
                    segmentOptions[0]
                        .tag(0)
                    segmentOptions[1]
                        .tag(1)
                }.pickerStyle(SegmentedPickerStyle())
                Text("test")
            }
        }
    }

}