iOS | SWIFTUI | Buttons don't work in the HStack | How can I fix this, Is there a workaround.?

Question

I have attempted and searched quite a bit of stackOverflow and other places while there are some questions similar, they tried to change the style of the button to Plain of Default, I tried those methods, they don't seem to work.

For context, this is a view inside a .sheet view if that might be the issue here.

I need help with this. Thank you.

Edit : I tried creating spacing between the three buttons, the "High" and "Low" buttons work but the "Med" isn't working.

Answer : Add zIndex(1) to the HStack.

import SwiftUI
struct AddTasks: View {
    @State var data = 0
    @State var taskName = ""
    @State private var prioritySelectedHigh : Bool = false
    @State private var prioritySelectedMed : Bool = false
    @State private var prioritySelectedLow : Bool = false
    @State private var priority : String = ""
    var items = [1,2,3,4,5,6,7,8,9,10]
    var body: some View {
        NavigationView {
            VStack(alignment:.center, spacing: 30){
                ZStack {
                    RoundedRectangle(cornerRadius: 9)
                        .foregroundColor(Color("TabBar "))
                        .opacity(0.7)
                        .frame(width: 310, height: 60, alignment: .center)
                    TextField(" Task Name ", text: $taskName)
                        .frame(width: 270, height: 60, alignment: .center)
                    
                }



                //   These Buttons dont work
                HStack(alignment: .center, spacing: 52){
                    ZStack {
                        RoundedRectangle(cornerRadius: 9)
                            .foregroundColor(.pink)
                            .opacity(0.2)
                            .frame(width: 70, height: 40, alignment: .center)
                        Button(action: {
                            print("Hi")
                        }, label: {
                            Text("High")
                                .font(.system(size: 18))
                                .foregroundColor(.red)
                        })
                    }
                    ZStack {
                        RoundedRectangle(cornerRadius: 9)
                            .foregroundColor(.orange)
                            .opacity(0.2)
                            .frame(width: 70, height: 40, alignment: .center)
                        
                        
                        Button(action: {}, label: {
                            Text("Med")
                                .font(.system(size: 18))
                                .foregroundColor(.orange)
                        })
                    }
                    ZStack {
                        RoundedRectangle(cornerRadius: 9)
                            .foregroundColor(.green)
                            .opacity(0.2)
                            .frame(width: 70, height: 40, alignment: .center)
                        Button(action:{}, label: {
                            Text("Low")
                                .font(.system(size: 18))
                                .foregroundColor(.green)
                        })
                    }
                }
                
                
                ZStack {
                    RoundedRectangle(cornerRadius: 9)
                        .foregroundColor(Color("TabBar "))
                        .opacity(0.7)
                        .frame(width: 310, height: 60, alignment: .center)
                    
                    Picker(selection: $data, label: Text("Data"), content: {
                        ForEach(items, id:\.self) { item in
                            Text("\(item)")
                                .rotationEffect(Angle(degrees: 90))
                        }
                    })
                    .labelsHidden()
                    .rotationEffect(Angle(degrees: -90))
                    .frame(maxHeight: 60)
                    .clipped()
                    .foregroundColor(Color("AccentColor"))
                    .font(.system(size: 20))
                }
            }.navigationTitle("New Task")
        }.environment(\.colorScheme, .dark)
        
    }
    
    
    
    
    
}

struct AddTasks_Previews: PreviewProvider {
    static var previews: some View {
        AddTasks()
        //            .environment(\.colorScheme, .dark)
    }
}

Answer 1

If you add a

.zIndex(1)

modifier to your HStack, it should work.