Selector de formularios SwiftUI con imagen y texto
Dec 09 2020
Tengo una Vista de configuración en mi aplicación que ofrece una opción para seleccionar un valor del selector con este código:
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")
}
}
Cuando hago clic en la fila del selector, se abre la página del selector y puedo ver cada fila con la imagen y el texto, pero en la configuración, hace que la fila sea más grande como se muestra en la imagen:

¿Es posible usar texto solo en la página de configuración e imagen + texto en la vista del selector?
Respuestas
OguzYuksel Dec 13 2020 at 19:29
vista Solo quería mostrarte la forma en que puedes hacerlo,
Simplemente oculte el selector completo, permanecerá sin selector dentro y superpondrá HStack, dentro de la pila haga una caja de cambio o si o lo que quiera
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")
}
}
}