Benutzerdefinierte MenuView: Wie platziere ich das Menü außerhalb der Ansichtshierarchie, wenn es über allen anderen Ans ⇐ IOS

[Guest]

Ich habe einen einfachen benutzerdefinierten MenuButton erstellt. Wenn Sie darauf tippen, werden über der Schaltfläche einige Menüelemente angezeigt. Obwohl dies einwandfrei funktioniert, möchte ich eine Overlay-Ansicht für den gesamten Bildschirm hinzufügen, die die darunter liegenden Ansichten verdunkelt und blockiert. Durch Tippen auf das Overlay sollte das Menü geschlossen werden.
Dies führt zu zwei Problemen:

• Ohne das Overlay MenuButton hat eine benutzerdefinierte Größe, z. 50x50 und kann normal in der umgebenden Ansichtshierarchie platziert werden. Beim Hinzufügen des Overlays ist der MenuButton so groß wie der Bildschirm und kann daher nicht mehr richtig platziert werden.
• Beim Anzeigen Während das Menü aktiv ist, kann das Overlay nur Ansichten anzeigen, die sich in der Ansichtshierarchie befinden.

Ist vorhanden Eine saubere Lösung, um dieses Problem zu lösen?

Code: Select all

struct MenuButton: View {
@State private var isExpanded = false
let buttons: [String]

let buttonSize: CGFloat = 60
let itemButtonSize: CGFloat = 50

var body: some View {
ZStack {
// Overlay
/*Color.black.opacity(0.2)
.edgesIgnoringSafeArea(.all)
.opacity(isExpanded ? 1 : 0)
.onTapGesture {
isExpanded = false
}*/

ForEach(buttons.indices, id: \.self) { index in
VStack {
Image(systemName: buttons[index])
.frame(width: itemButtonSize, height: itemButtonSize)
.background(Color(.systemGray6))
.clipShape(Circle())
}
.offset(
x: 0,
y: isExpanded ? Double(index+1) * (-itemButtonSize - 20) : Double(index+1) * (-itemButtonSize + 20)
)
.opacity(isExpanded ? 1 : 0)

.animation(isExpanded ? .spring(response: 0.2, dampingFraction: 0.5, blendDuration: 0).delay(Double(index) * 0.05) : .easeOut(duration: 0.2), value: isExpanded)
}

Button {
withAnimation {
isExpanded.toggle()
}
} label: {
Image(systemName: isExpanded ? "xmark" : "plus")
.frame(width: buttonSize, height: buttonSize)
.foregroundColor(.gray)
.background(Color(.systemGray6))
.clipShape(Circle())
}
}
}
}

struct MenuView: View {
var body: some View {
VStack {
Spacer()

HStack {
Spacer()

MenuButton(buttons: ["circle", "star", "bell"])
.padding()

}

Text("Bottom")
}
}
}

#Preview {
MenuView()
}