Methods to forestall the button background darkening after closing a popover? The hooked up gif exhibits the button turning into darker earlier than it resets to glass.
Right here is the code for the button and the popover:
struct CustomMenuView<Label: View, Content material: View>: View {
@ViewBuilder var label: Label
@ViewBuilder var content material: Content material
@State personal var isExpanded: Bool = false
@Namespace personal var namespace
var physique: some View {
Button {
isExpanded.toggle()
} label: {
label.matchedTransitionSource(id: "MENUCONTENT", in: namespace)
}
.popover(isPresented: $isExpanded) {
content material
.navigationTransition(.zoom(sourceID: "MENUCONTENT", in: namespace)).presentationCompactAdaptation(.popover)
}
}
}
And right here is the place I exploit the button:
struct SelectorMenu: View {
@Binding var selectedLeague: League
personal let leagues: [League] = [.nfl, .mlb, .nba]
var physique: some View {
CustomMenuView() {
buttonLabel
} content material: {
menuView
}
}
@ViewBuilder
personal var buttonLabel: some View {
Textual content("Button")
}
@ViewBuilder
personal var menuView: some View {
VStack {
Textual content("MENU ITEM 1")
Divider()
Textual content("MENU ITEM 2")
Divider()
Textual content("MENU ITEM 3")
Divider()
Textual content("MENU ITEM 4")
Divider()
Textual content("MENU ITEM 5")
}
.padding()
}
}
I’ve tried altering the background colour of the popover like this:
struct CustomMenuView<Label: View, Content material: View>: View {
@ViewBuilder var label: Label
@ViewBuilder var content material: Content material
@State personal var isExpanded: Bool = false
@Namespace personal var namespace
var physique: some View {
Button {
isExpanded.toggle()
} label: {
label.matchedTransitionSource(id: "MENUCONTENT", in: namespace)
}
.popover(isPresented: $isExpanded) {
content material
.navigationTransition(.zoom(sourceID: "MENUCONTENT", in: namespace)).presentationCompactAdaptation(.popover)
.background(.crimson)
}
}
}
This adjustments the background colour of the popover as soon as its totally expanded, however the closing animation nonetheless makes use of the darker materials as proven within the video above.
I additionally tried making the presentation background clear however that did not do something:
struct CustomMenuView<Label: View, Content material: View>: View {
@ViewBuilder var label: Label
@ViewBuilder var content material: Content material
@State personal var isExpanded: Bool = false
@Namespace personal var namespace
var physique: some View {
Button {
isExpanded.toggle()
} label: {
label.matchedTransitionSource(id: "MENUCONTENT", in: namespace)
}
.popover(isPresented: $isExpanded) {
content material
.navigationTransition(.zoom(sourceID: "MENUCONTENT", in: namespace)).presentationCompactAdaptation(.popover)
.presentationBackground(.clear)
}
}
}