我想在 Swift UI 中使用带有按钮的多个弹出窗口
I want to use multiple popovers with buttons in the Swift UI
在 SwiftUI 中使用带按钮的 Popover 时,我想使用多个按钮弹出,如下所示,但实际上只有上部按钮
我拿不到弹出窗口。如果你想分别弹出两者怎么办?
struct MySelection: Identifiable {
let id = UUID()
var text = ""
}
struct PopoverTest: View {
@State var selected: MySelection?
var body: some View {
VStack (spacing: 88) {
// First Button
Button(action: {
selected = MySelection(text: "Popover1")
}, label: {
Image(systemName: "stopwatch")
})
// Second Button
Button(action: {
selected = MySelection(text: "Popover2")
}, label: {
Image(systemName: "globe")
})
}
.buttonStyle(.plain)
.popover(item: $selected) { selection in
Text(selection.text).font(.largeTitle)
}
}
}
在这种情况下,您似乎必须引入 2 个 selected
变量。 optional selected 可以将不同的值交给popover,但是如果是从不同的subview触发,SwiftUI不知道把popover锚定到哪里。
struct ContentView: View {
@State var selected1: MySelection?
@State var selected2: MySelection?
var body: some View {
VStack (spacing: 88) {
// First Button
Button(action: {
selected1 = MySelection(text: "Popover1")
}, label: {
Image(systemName: "stopwatch")
})
.popover(item: $selected1) { selection in
Text(selection.text).font(.largeTitle)
}
// Second Button
Button(action: {
selected2 = MySelection(text: "Popover2")
}, label: {
Image(systemName: "globe")
})
.popover(item: $selected2) { selection in
Text(selection.text).font(.largeTitle)
}
}
.buttonStyle(.plain)
}
}
仔细想想,更好的方法可能是创建一个可以在任何地方使用的自定义“带弹出窗口的按钮”视图:
struct ContentView: View {
var body: some View {
VStack (spacing: 88) {
// First Button
ButtonWithPopover(image: "stopwatch",
item: MySelection(text: "Popover1"))
// Second Button
ButtonWithPopover(image: "globe",
item: MySelection(text: "Popover2"))
}
.buttonStyle(.plain)
}
}
struct ButtonWithPopover: View {
let image: String
let item: MySelection
@State var selected: MySelection?
var body: some View {
Button(action: {
selected = item
}, label: {
Image(systemName: image)
})
.popover(item: $selected) { selection in
Text(selection.text).font(.largeTitle)
}
}
}
在 SwiftUI 中使用带按钮的 Popover 时,我想使用多个按钮弹出,如下所示,但实际上只有上部按钮 我拿不到弹出窗口。如果你想分别弹出两者怎么办?
struct MySelection: Identifiable {
let id = UUID()
var text = ""
}
struct PopoverTest: View {
@State var selected: MySelection?
var body: some View {
VStack (spacing: 88) {
// First Button
Button(action: {
selected = MySelection(text: "Popover1")
}, label: {
Image(systemName: "stopwatch")
})
// Second Button
Button(action: {
selected = MySelection(text: "Popover2")
}, label: {
Image(systemName: "globe")
})
}
.buttonStyle(.plain)
.popover(item: $selected) { selection in
Text(selection.text).font(.largeTitle)
}
}
}
在这种情况下,您似乎必须引入 2 个 selected
变量。 optional selected 可以将不同的值交给popover,但是如果是从不同的subview触发,SwiftUI不知道把popover锚定到哪里。
struct ContentView: View {
@State var selected1: MySelection?
@State var selected2: MySelection?
var body: some View {
VStack (spacing: 88) {
// First Button
Button(action: {
selected1 = MySelection(text: "Popover1")
}, label: {
Image(systemName: "stopwatch")
})
.popover(item: $selected1) { selection in
Text(selection.text).font(.largeTitle)
}
// Second Button
Button(action: {
selected2 = MySelection(text: "Popover2")
}, label: {
Image(systemName: "globe")
})
.popover(item: $selected2) { selection in
Text(selection.text).font(.largeTitle)
}
}
.buttonStyle(.plain)
}
}
仔细想想,更好的方法可能是创建一个可以在任何地方使用的自定义“带弹出窗口的按钮”视图:
struct ContentView: View {
var body: some View {
VStack (spacing: 88) {
// First Button
ButtonWithPopover(image: "stopwatch",
item: MySelection(text: "Popover1"))
// Second Button
ButtonWithPopover(image: "globe",
item: MySelection(text: "Popover2"))
}
.buttonStyle(.plain)
}
}
struct ButtonWithPopover: View {
let image: String
let item: MySelection
@State var selected: MySelection?
var body: some View {
Button(action: {
selected = item
}, label: {
Image(systemName: image)
})
.popover(item: $selected) { selection in
Text(selection.text).font(.largeTitle)
}
}
}