SwiftUI Form Picker优化：设置页仅显文本，选择页显图文

当然可以实现！你的问题根源在于默认情况下，Form中的Picker会把选中项的完整内容（包括图片）显示在设置页的行里，导致行被撑大。咱只需要自定义Picker的label，让它仅展示文本，而选择页面里保留图文选项就行。

具体实现步骤 #

1. 先把选项数据整理成数组，既方便维护，也能简化代码：

@State private var chosenMediumType = 0

// 整理选项数据：名称 + SF Symbols图标名
private let mediumWidgetOptions = [
    (name: "Sun", icon: "sun.min"),
    (name: "Sunset", icon: "sunset"),
    (name: "Moon", icon: "moon")
]

2. 自定义Picker的label，只显示文本（设置项标题 + 当前选中的选项名称），同时在content里保留图文结合的选项：

var body: some View {
    NavigationView {
        Form {
            Section(header: Text("Widget Settings")) {
                Picker(selection: $chosenMediumType, label: 
                    // 自定义label：仅文本显示
                    HStack {
                        Text("Medium Widget")
                        Spacer()
                        Text(mediumWidgetOptions[chosenMediumType].name)
                            .foregroundColor(.secondary) // 用次要颜色区分选中值
                    }, content: {
                        // 选择页面里的图文选项
                        ForEach(mediumWidgetOptions.indices, id: \.self) { index in
                            VStack {
                                Image(systemName: mediumWidgetOptions[index].icon)
                                    .resizable()
                                    .frame(width: 20, height: 20)
                                Text(mediumWidgetOptions[index].name)
                            }
                            .tag(index)
                        }
                    })
                .onChange(of: chosenMediumType) {
                    print("Selected tag: \($0)")
                }
            }
        }
        .navigationBarTitle("Settings")
    }
}

为什么这样有效？ #

• 自定义label后，Picker在Form的设置行里只会渲染我们定义的文本内容，不会再显示图片，自然不会撑大行高。
• 点击Picker后弹出的选择页面，仍然会完整展示content里的图文选项，完全符合你的需求。

另外，我把原来代码里的UIImage(systemName:...)!换成了SwiftUI原生的Image(systemName:)，避免了强制解包的潜在崩溃风险，更符合SwiftUI的最佳实践。

内容的提问来源于stack exchange，提问作者YosiFZ