如何在SwiftUI中单击菜单项时隐藏浮动菜单

Question

我在SwiftUI中创建了浮动菜单，但我遇到了一个问题，当按下右下角的加号按钮时，我打开浮动菜单项，然后再次按下加号按钮隐藏该浮动菜单项。但当按下菜单项时，它不会隐藏该菜单项。

下面是我的代码

MapContainerUIView.swift

struct MapContainerUIView: View {

let flotingMenuArray = [
MenuItemModel(title: "Camera", icon: "camera.fill"),
MenuItemModel(title: "Photo", icon: "photo.on.rectangle"),
MenuItemModel(title: "Share", icon: "square.and.arrow.up.fill")
]

var body: some View {
NavigationView{
ZStack {
FloatingMenu(dataSource: flotingMenuArray)
}
}
}

func floatingButtonAction(index: Int){
print("Floating item tap", index)
}
}

FloatingMenu.swift

struct FloatingMenu: View {
init() {
self.dataSource = []
}

init(dataSource: [MenuItemModel]) {
self.dataSource = dataSource
}

@State var isMenuShow = false

var dataSource: [MenuItemModel]

var body: some View {

ZStack(alignment: .trailing){
if isMenuShow{
Button(action: {
self.showMenu()
}) {
Text("")
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.black)
.opacity(0.3)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.edgesIgnoringSafeArea(.all)
}
HStack{
Spacer()
VStack(alignment: .trailing, content: {
Spacer()
ForEach(0..<dataSource.count) { index in
if isMenuShow {
MenuItems(menuItemData: dataSource[index], index: index)
}
}
Button(action: {
self.showMenu()
}) {
Image(systemName: "plus.circle.fill")
.resizable()
.frame(width: 60, height: 60)
.foregroundColor(Color.white)
}
.background(Color.black)
.cornerRadius(35)
})
.shadow(color: .gray, radius: 4, x: 1, y: 1)
.padding(.init(top: 0, leading: 20, bottom: 20, trailing: 20))
}
}
}

func showMenu() {
self.isMenuShow.toggle()
}
}

MenuItems.swift

class MenuItemModel : Identifiable{
var id = UUID()
var title : String = ""
var icon : String = ""

init(title: String, icon: String) {
self.title = title
self.icon = icon
}
}
struct MenuItems: View {
var mapContainer = MapContainerUIView()
var menuItemData: MenuItemModel
var index : Int

var body: some View {
ZStack {
HStack{
Text(menuItemData.title)
.foregroundColor(.white)
.shadow(color: .gray, radius: 3, x: 1, y: 1)
Button(action: {
FloatingMenu().isMenuShow = false
print("button tap: ", menuItemData.title)
self.mapContainer.floatingButtonAction(index: index)
}) {
ZStack {
Circle()
.foregroundColor(Color.white)
.frame(width: 45, height: 45)
.shadow(color: .gray, radius: 3, x: 1, y: 1)
Image(systemName: menuItemData.icon)
.imageScale(.large)
.foregroundColor(.black)
}
.padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 10))
}
}
}
}
}

当按下菜单项时，我想隐藏浮动菜单，请有人指导我。

Answer 1

现在，您正试图在FloatingMenu的新实例上设置isMenuShow，这就是它不起作用的原因。

一种解决方案是从原始FloatingMenu实例传递Binding。

struct MenuItems: View {
@Binding var isMenuShow : Bool  //<-- Here
var mapContainer = MapContainerUIView()
var menuItemData: MenuItemModel
var index : Int

var body: some View {
ZStack {
HStack{
Text(menuItemData.title)
.foregroundColor(.white)
.shadow(color: .gray, radius: 3, x: 1, y: 1)
Button(action: {
self.isMenuShow = false //<-- Here
print("button tap: ", menuItemData.title)
self.mapContainer.floatingButtonAction(index: index)
}) {

并且，在浮动菜单中：

if isMenuShow {
MenuItems(isMenuShow: $isMenuShow, //<-- Here
menuItemData: dataSource[index],
index: index)
}

---

另一个解决方案是提供一个闭包作为关闭菜单的MenuItems的参数：

struct MenuItems: View {
var closeMenu : () -> Void //<-- Here
var mapContainer = MapContainerUIView()
var menuItemData: MenuItemModel
var index : Int

var body: some View {
ZStack {
HStack{
Text(menuItemData.title)
.foregroundColor(.white)
.shadow(color: .gray, radius: 3, x: 1, y: 1)
Button(action: {
closeMenu()  //<-- Here
print("button tap: ", menuItemData.title)
//self.mapContainer.floatingButtonAction(index: index)
}) {

if isMenuShow {
MenuItems(closeMenu: { self.isMenuShow = false },
menuItemData: dataSource[index],
index: index)
}