Picker Animation get's in the way of buttons, what to do?

Hi! I'm making a picker selection tool where when you click on a button, a picker emerges with an animated scale effect. But the problem is that when I want to click on another button, the 'invisible' picker from another button selection is in the way. As if it's there but you can't see it, because of the scale effect animation.

.

The activation of the animation gets activation with a button with this code:

Button(action: { picker.picker1 = true }, label: {
    Text("Button")          
        }

        .font(.system(size: 16))

    }

    

})

.

I've used this code for the picker:

VStack{

    Picker(selection: $name.Select1Variable , label: Text("")){

        Group {

            Text("Selecteer...").tag("                ")

            Text("\(profileRam.sterrenbeeldIcon)  Ram").tag("Ram")

            Text("\(profileStier.sterrenbeeldIcon)  Stier").tag("Stier")

            Text("\(profileTweelingen.sterrenbeeldIcon)  Tweelingen").tag("Tweelingen")

            Text("\(profileKreeft.sterrenbeeldIcon)  Kreeft").tag("Kreeft")

            Text("\(profileLeeuw.sterrenbeeldIcon)  Leeuw").tag("Leeuw")

            Text("\(profileMaagd.sterrenbeeldIcon)  Maagd").tag("Maagd")

             }

        Group {

            Text("\(profileWeegschaal.sterrenbeeldIcon)  Weegschaal").tag("Weegschaal")

            Text("\(profileSchorpioen.sterrenbeeldIcon)  Schorpioen").tag("Schorpioen")

            Text("\(profileBoogschutter.sterrenbeeldIcon)  Boogschutter").tag("Boogschutter")

            Text("\(profileSteenbok.sterrenbeeldIcon)  Steenbok").tag("Steenbok")

            Text("\(profileWaterman.sterrenbeeldIcon)  Waterman").tag("Waterman")

            Text("\(profileVissen.sterrenbeeldIcon)  Vissen").tag("Vissen")

        }

    }
.pickerStyle(WheelPickerStyle())
.padding(.horizontal, 80.0)
.background(content: { 
    Rectangle()
     .foregroundColor(.white)
    .padding(.vertical, -15)
    .cornerRadius(17)
    .frame(width: 250, height: 200)
    })

}
.animation(.easeInOut(duration: 0.35).delay(0.25), value: picker.picker1)
.scaleEffect(picker.picker1 ? 1 : 0)
.animation(.easeInOut(duration: 0.30), value: picker.picker1)

.

Is there a solution for this problem?

Answered by meesakveld in 747634022

I've found a solution! If you added .opacity(picker.picker1 ? 1 : 0.2) in the animation, the problem is fixed.

A short video would ease understanding. Note also that your tags should list SwiftUI.

Here is a video for better understanding of the problem.

https://youtube.com/shorts/feZchDVIwpA

I've added a video, see link below.

Accepted Answer

I've found a solution! If you added .opacity(picker.picker1 ? 1 : 0.2) in the animation, the problem is fixed.

Picker Animation get's in the way of buttons, what to do?
 
 
Q