Why the button doesn't work in this code by using SwiftUI?
I can't click the button.

When I lay the button on the top in VStack, it can work. But when it is in below code, it can't work properly.

Is this related to VStack, TabView or button's overlay?

I think it is caused by button's offset and padding & tabview's padding. Can I change it to ZStack in all same layout? Please tell me how to do. Thank you.

struct Profile: View {
    @State private var selection = 0
    
    var body: some View {
        VStack{
            VStack{
                HStack{
                    Spacer()
                    Image(systemName: "person.circle")
                 
                    Spacer()
                }
               
               
                HStack{
                    Text("|")
                        .foregroundColor(.white)
                   
                        Image(systemName: "birthday.cake")
                            
                        Text("birthDay")
                            
                }
                
            }
            .frame(height: 300)
            .padding(.bottom,50)
            
            Button(action: {
                print("hello")
            }){
                Text("edit")
                    .fontWeight(.semibold)
                    .frame(width: 200, height: 48)
                    .foregroundColor(Color(.red))
                    .background(Color(.white))
                    .cornerRadius(24)
                    .overlay(
                        RoundedRectangle(cornerRadius: 24)
                            .stroke(Color(.red), lineWidth: 1.0)
                    )
                    .offset(y: -35)
                    .padding(.bottom, -20)
                    .contentShape(RoundedRectangle(cornerRadius: 20)) 
            }
            

            TabView(selection: $selection) {
                VStack{
                    HStack{
                        Text("note")
                    }
                }
                .tag(0)     
                VStack{
                    Text("phone")                             
                }
                .tag(1)
            }
            .tabViewStyle(PageTabViewStyle())
            .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
            .frame(height:200)
            .padding(.top,-60)
            .padding(.horizontal)
        }
    }
}

CodePudding user response：

The padding .padding(.top,-60) is covering your button. Add the below line just after the padding, you'll see tabview covering the button with green transparent background. .background(Color.green.opacity(0.4))

Just remove the .padding(.top,-60) and the button will click.

CodePudding user response：

Add "Spacer()" underneath the Button

Spacer()

Spacer between Button() and Tabview() will enable the button to be clickable.