Sélecteur de formulaire SwiftUI avec image et texte

Dec 09 2020

J'ai une vue des paramètres dans mon application qui offre une option pour sélectionner une valeur dans le sélecteur avec ce code:

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

Lorsque je clique sur la ligne de sélection, cela ouvre la page de sélection et je peux voir chaque ligne avec l'image et le texte, mais dans les paramètres, la ligne est plus grande que l'image montrée:

Est-il possible d'utiliser du texte uniquement dans la page des paramètres et image + texte dans la vue du sélecteur?

Réponses

OguzYuksel Dec 13 2020 at 19:29

vue Je voulais juste vous montrer comment vous pouvez le faire,

Il suffit de cacher le sélecteur entier, il restera sans sélecteur à l'intérieur et superposera HStack, à l'intérieur de la pile, créez un boîtier de commutation ou si ou ce que vous voulez

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