swiftlistswiftuiswiftui-ontapgesture

How to show popup view when click on button of list in SwiftUI


I have main view called TaskManagementView with list here if i click on taskCell > RoundedRectangle then how to show PopupView for that cell data.id on TaskManagementView

like this i need:

enter image description here

code: with this code if i tap on taskCell > RoundedRectangle then PopupView showing in side of the all cells. how to fix and achieve o/p like above screen

struct TaskManagementView: View {

@Environment(\.dismiss) var dismiss
@StateObject private var viewModel = TaskManagementViewModel()
@State private var isComposeViewShown = false
var body: some View {
    ZStack {
        VStack(spacing: 0) {
            
            VStack {
                
                List {
                    ForEach(0..<viewModel.arrData.count, id: \.self) { i in
                        let data = viewModel.arrData[i]
                        Section {
                            if data.isExpanded {
                                ForEach(0..<data.items.count, id: \.self) { j in
                                    taskCell(data: data.items[j])
                                        .onTapGesture {
                                            gotoTaskDetails = true
                                        }
                                }
                            }
                        }
                    }
                }
            }
        }
        .onAppear {
            viewModel.fetchTasks(filterId: selectedFilterId) { status in
            }
        }
    }
}

@ViewBuilder func taskCell(data: TaskManagementData) -> some View {
    HStack(spacing: 16) {
        
        RoundedRectangle(cornerRadius: 2)
            .frame(width: 12, height: 12)
            .foregroundStyle(Color.orange)
            .onTapGesture {
                print("testing data id... \(data.id)")
                isComposeViewShown.toggle()
            }
        if isComposeViewShown {
            PopupView(isComposeViewShown: $isComposeViewShown)
        }
        VStack(alignment: .leading, spacing: 2) {
            Text(data.taskTitle ?? "")
                .lineLimit(1)
            
        }
    }
}
}



struct PopupView: View {
@Binding var isComposeViewShown: Bool

var body: some View {
    ZStack {
        Color.black.opacity(0.5)
            .edgesIgnoringSafeArea(.all)
            .onTapGesture {
                isComposeViewShown = false
            }
        //some other code of popup design
            .padding(.bottom, 150)
    }
}
}

bad o/p of above code: why PopupView showing inside of cell? i need PopupView on TaskManagementView

enter image description here


Solution

    1. You're putting your popup inside of taskCell meaning it will be shown for every taskCell on the screen

    2. You're putting your popup in an HStack meaning it will display horizontally inline with the rest of your taskCell contents.

    To fix this, layer the popup over your view using a ZStack

    ZStack {
        VStack(spacing: 0) {                
            List {
                ForEach(0..<viewModel.arrData.count, id: \.self) { i in
                    ...
                }
            }
        }
        .onAppear {
            ...
        }
    
        if isComposeViewShown {
            PopupView(isComposeViewShown: $isComposeViewShown)
        }
    }
    

    Please see how to use stack views in SwiftUI,