我想在Swift UI中使用多个带按钮的弹出窗口

Question

当在SwiftUI中使用带有按钮的弹出窗口时，我希望弹出多个按钮，如下所示，但事实上，只有上面的按钮我没有弹出窗口。如果你想分别弹出两个窗口呢?

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

}

Answer 1

考虑一下，更好的方法可能是创建一个带有弹出窗口的自定义按钮;可以在任何地方使用的视图:

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

Answer 2

在这种情况下，似乎您必须引入2个selected变量。可选的selected可以将不同的值传递给弹出窗口，但是如果它是从不同的子视图触发的，SwiftUI不知道将弹出窗口锚定到哪里。

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