SwiftUI Form Picker mit Bild und Text
Dec 09 2020
Ich habe eine Einstellungsansicht in meiner App, die eine Option zum Auswählen eines Werts aus der Auswahl mit diesem Code bietet:
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")
}
}
Wenn ich auf die Auswahlzeile klicke, wird die Auswahlseite geöffnet und ich kann jede Zeile mit Bild und Text sehen. In den Einstellungen wird die Zeile jedoch größer als das gezeigte Bild:
Ist es möglich, nur Text auf der Einstellungsseite und Bild + Text in der Auswahlansicht zu verwenden?
Antworten
OguzYuksel Dec 13 2020 at 19:29
sehen Ich wollte nur zeigen Ihnen , wie Sie es tun können,
Verstecken Sie einfach den gesamten Picker, er bleibt ohne Picker im Inneren und überlagert HStack, im Stack wird ein Schaltergehäuse hergestellt oder ob oder was auch immer Sie wollen
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")
}
}
}