SwiftUI Form picker con immagine e testo
Dec 09 2020
Ho una visualizzazione delle impostazioni nella mia app che fornisce un'opzione per selezionare un valore dal selettore con questo codice:
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")
}
}
Quando faccio clic sulla riga del selettore, si apre la pagina del selettore e posso vedere ogni riga con immagine e testo, ma nelle impostazioni, rende la riga più grande come l'immagine mostrata:
È possibile utilizzare solo testo nella pagina delle impostazioni e immagine + testo nella vista selettore?
Risposte
OguzYuksel Dec 13 2020 at 19:29
vista Volevo solo mostrarti come puoi farlo,
Basta nascondere l'intero selettore, rimarrà senza selettore all'interno e si sovrappone a HStack, all'interno dello stack crea un caso di commutazione o se o qualunque cosa tu voglia
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")
}
}
}