CODEWITHSUNDEEP
swiftswiftui
MikeMaus
MikeMaus

Reputation: 405

Custom modifier disables the Controls (Picker and Stepper) | SwiftUI

When, I apply custom modififer .settingBlockModifier(), it disables controllers in the View. I've also tried this way .modifier(SettingBlockModifier()). Checked, the same behavior also, if I apply the same modifiers without custom modifier. Here's the effect I want to achieve.

The problem that the Picker and Stepper don't work, they are not tappable. How to solve it?

enter image description here

struct TestFile: View {
    @State private var gamesAmount = ["5", "10", "20", "30"]
    @State private var game: Int = 1
    
    @State private var number = 1
    
    var body: some View {
        VStack {
            VStack {
                Text("How many questions?")
                    .bold()

                Picker("How many questions?",selection: $game) {
                    ForEach(0..<gamesAmount.count) {
                        Text(gamesAmount[$0])
                    }
                }
                .pickerStyle(SegmentedPickerStyle())
            }
            .settingBlockModifier()
            
            HStack {
                Text("Number:")
                    .padding(.trailing, 40)
                Stepper("\(number)", value: $number, in: 1...10)
            }
            .settingBlockModifier()
            //.modifier(SettingBlockModifier())
        }
    }
}


struct SettingBlockModfier: ViewModifier {
    
    func body(content: Content) -> some View {
        content
            .background(Color.white.cornerRadius(8))
            .shadow(radius: 8)
            .padding()
    }
}

extension View {
    func settingBlockModifier() -> some View {
        self.modifier(SettingBlockModfier())
    }
}

Upvotes: 1

Views: 236

Answers (1)

pawello2222
pawello2222

Reputation: 54486

You can use compositingGroup:

struct SettingBlockModfier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .compositingGroup() // <- here
            .background(Color.white.cornerRadius(8))
            .shadow(radius: 8)
            .padding()
    }
}

Upvotes: 1

Related Questions