SwiftUI 帶圖像和文本的表單選擇器

Question

我的應用程序中有一個設置視圖，它為 select 提供了一個來自選擇器的值的選項，其中包含以下代碼：

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

當我單擊選擇器行時，它會打開選擇器頁面，我可以看到每一行都有圖像和文本，但在設置中，它會使行變大，如圖所示：

是否可以僅在設置頁面中使用文本，在選擇器視圖中使用圖像+文本？

Answer 1

我只是想向你展示你可以做到的方式，

只需隱藏整個選擇器，它將保持其內部沒有選擇器並覆蓋 HStack，內部堆棧制作一個開關盒，或者如果或任何你想要的

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