HomeiOS DevelopmentSwiftUI Customized Popover Background Animation

SwiftUI Customized Popover Background Animation


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.

SwiftUI Customized Popover Background Animation

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

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments