SwiftUI Picker SegmentedStyle 图片显示不好

Posted 2023-02-24

【中文标题】SwiftUI Picker SegmentedStyle 图片显示不好

【英文标题】：SwiftUI Picker SegmentedStyle Image bad display

【发布时间】：2020-01-07 20:18:53

【问题描述】：

我有一个 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 的图像系统，第二个是我从资产导入的另一个图像系统。 第二张图像的显示保持没有填充和填充纵横比，这与我作为选项放置的内容无关。请注意，它在使用另一个 PickerStyle（滚轮）时可以完美运行。

我尝试了以下操作：

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

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

还有许多其他组合，但结果仍然相同：第二张图像显示没有填充和填充 aspectRatio。

您对如何解决它有任何想法吗？

【问题讨论】：

先尝试frame，最后尝试aspectRatio

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

这里使用的是手动调整大小的 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")
            
        
    

【讨论】：

谢谢。在我的资产中使用 24px 宽度的图像时它工作正常（对于 x1）。但我不明白为什么他们不允许您直接修改图像以适应 Picker（就像 UIKit 中的 UISegmentedControl 一样）。