SwiftUI .onDelete is not working in TabView because View is always changing

Viewed 424

I'm quite new to SwiftUI and having some troubles.

I have a Tab View:

Picker(selection: $selectedTab, label: Text("")) {
    Text("1")
        .tag(0)
    Text("2")
        .tag(1)
}
.pickerStyle(SegmentedPickerStyle())
            
TabView(selection: $selectedTab) {
    View1()
        .tag(0)
    View2()
        .tag(1)
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))

The View1 has a List and For-Each:

List {
    ForEach(items) { item in
        ItemRow()
    }
    .onDelete(perform: deleteItem)
}
.listStyle(PlainListStyle())

Now it's not possible to delete the RowItems with the onDelete function because the TabView is always changing to the View2.

One solution would be, to disable the "swipe between tabs" with for example:

.gesture(DragGesture())

But then I have to try to swipe single rows multiple times before the Delete works.

Best would be, to disable the "swipe between views" and that onDelete would work. Can you help me with that?

1 Answers

If the swiping isn't important just remove the TabView

struct CustomTabView1: View {
    @State var selectedTab: Int = 0
    var body: some View {
        VStack{
        Picker(selection: $selectedTab, label: Text("")) {
            Text("1")
                .tag(0)
            Text("2")
                .tag(1)
        }
        .pickerStyle(SegmentedPickerStyle())
                    
            switch selectedTab{
            case 0:
                View1()
            case 1:
                View2()
            default:
                Text("default")
            }
            
        }
    }
}

Or you could do something with EditMode do adjust the View when the user needs to delete

struct CustomTabView1: View {
    @Environment(\.editMode) var editMode
    @State var selectedTab: Int = 0
    var body: some View {
        NavigationView{
            VStack{
                
                Picker(selection: $selectedTab, label: Text("")) {
                    Text("1")
                        .tag(0)
                    Text("2")
                        .tag(1)
                }
                .pickerStyle(SegmentedPickerStyle())
                switch editMode?.wrappedValue{
                case .active:
                    switch selectedTab{
                    case 0:
                        View1().foregroundColor(.blue)
                    case 1:
                        View2()
                    default:
                        Text("default")
                    }
                default:
                    TabView(selection: $selectedTab) {
                        View1()
                            .tag(0)
                        View2()
                            .tag(1)
                    }
                    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never)).foregroundColor(.red)
                }
                
                
            }.toolbar(content: {
                ToolbarItem(placement: .primaryAction, content: {
                    Button(editMode?.wrappedValue == .inactive ? "Edit" : "Done", action: {
                        if editMode?.wrappedValue == .inactive{
                            editMode?.wrappedValue = .active
                        }else{
                            editMode?.wrappedValue = .inactive
                        }
                    })
                })
            })
            
        }
    }
}
Related