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:
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
You're putting your popup inside of taskCell
meaning it will be shown for every taskCell
on the screen
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,