SwiftUI Picker SegmentedStyle 图像显示不佳

Question

我有一个简单的 SegmentedStyle Picker，里面有两张图片：

@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 的图像系统，第二个是我从资产中导入的另一个图像系统。

第二张图片的显示保持无填充和填充宽高比，无论我作为选项放置什么都无关紧要。请注意，它在使用另一个 PickerStyle（滚轮）时完美运行。

我试过以下方法：

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

和

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

还有许多其他组合，但结果仍然相同：第二个图像显示没有填充，填充宽高比。

您知道如何修复它吗？

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 都不起作用，因为它们会生成视图。

此处使用手动预调整大小的 PNG 图像（任何图形设计师都可以创建所需大小的完美图像，就像以前用于按钮图标一样）

演示结果：

演示代码：

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")
            }
        }
    }

}

SwiftUI Picker SegmentedStyle 图像显示不佳

SwiftUI Picker SegmentedStyle Image bad display

swift

image

swiftui

uisegmentedcontrol

picker