SwiftUI 表单选择器带有图像和文本

Question

我在我的应用中有一个设置视图，提供了使用以下代码从选择器中选择值的选项：

var body: some View {
    NavigationView {
        Form {
            Section(header: Text("Widget Settings")) {
                Picker(selection: $chosenMediumType, label: Text("Medium Widget"), content: {
                    VStack {
                        Image(uiImage: UIImage(systemName: "sun.min")!).resizable().frame(width: 20, height: 20, alignment: .center)
                        Text("Sun")
                    }.tag(0)
                    VStack {
                        Image(uiImage: UIImage(systemName: "sunset")!).resizable().frame(width: 20, height: 20, alignment: .center)
                        Text("Sunset")
                    }.tag(1)
                    VStack {
                        Image(uiImage: UIImage(systemName: "moon")!).resizable().frame(width: 20, height: 20, alignment: .center)
                        Text("Moon")
                    }.tag(2)
                })
                .onChange(of: chosenMediumType) { print("Selected tag: \($0)") }
            }
        }
        .navigationBarTitle("Settings")
    }
}

当我点击选择器行时，它会打开选择器页面，我可以看到每一行都有图片和文本，但在设置中，它会使行变大，因为显示了图片： 是否可以在设置页面中仅使用文本，在选择器视图中使用图片+文本？

- YosiFZ

---

暂时不行。已经有类似的问题了 - Picker在两种模式下使用相同的单元格进行绘制。 - Asperi

这可能会对您有所帮助：SwiftUI picker分别显示所选项目和选择视图的文本。 - pawello2222

这个回答解决了你的问题吗？SwiftUI picker separate texts for selected item and selection view - Vitalii Gozhenko

Answer 1

view我只是想向您展示如何做到这一点，

只需隐藏整个选择器，它将保持其内部没有选择器并覆盖HStack，在堆栈内制作一个switch case或if或任何您想要的东西。

struct ContentView: View {

@State private var chosenMediumType = 0

var body: some View {
    NavigationView {
        Form {
            Section(header: Text("Widget Settings")) {
                Picker(selection: $chosenMediumType, label: Text("")
                       , content: {
                    VStack {
                        Image(uiImage: UIImage(systemName: "sun.min")!).resizable().frame(width: 20, height: 20, alignment: .center)
                        Text("Sun")
                    }.tag(0)
                    VStack {
                        Image(uiImage: UIImage(systemName: "sunset")!).resizable().frame(width: 20, height: 20, alignment: .center)
                        Text("Sunset")
                    }.tag(1)
                    VStack {
                        Image(uiImage: UIImage(systemName: "moon")!).resizable().frame(width: 20, height: 20, alignment: .center)
                        Text("Moon")
                    }.tag(2)
                       })
                    .hidden()
                    .overlay(
                        HStack(alignment: .center, spacing: nil, content: {
                            
                            Text("Medium Widget")
                            
                            Spacer()
                            
                            switch chosenMediumType {
                            case 1:
                            Text("Sunset")
                                .foregroundColor(.gray)
                            case 2:
                                Text("Moon")
                                    .foregroundColor(.gray)
                            default:
                                Text("Sun")
                                    .foregroundColor(.gray)
                            }
                        })
                    )
                    .frame(height: 30)
                

            }
        }
        .navigationBarTitle("Settings")
    }
}
    }

- OguzYuksel