SwiftUI - Changing State Variable to Update Contents of ScrollView-CodePudding

I have a program with 2 buttons that aim to present what are basically 2 different lists of items. I am denoting a @State variable called tab which is either 0 or 1, depending on which button you clicked. When the button is clicked, I want it to change the contests of the list.

Here is how I am implementing changing the variable:

                        @State private var tab = 0
                        Button(action:{
                            tab = 0
                        }){
                            RoundedRectangle(cornerRadius: 5, style: .continuous)
                                //UI Details
                        }
                        
                        Button(action:{
                            tab = 1
                        }){
                            RoundedRectangle(cornerRadius: 5, style: .continuous)
                                //UI Details
                        }

And here is the ScrollView that presents the information:

ScrollView {
                        
                        VStack(spacing: 12) {
                            ListItemView(itemData: ItemData[tab])
                        }.frame(maxWidth: .infinity)
                      
                    }

The ItemData looks like this:

var List1Data: [ItemDataModel] = [
    //Item1
    //Item2
]

var List2Data: [ItemDataModel] = [
    //Item1
]

var ItemData: [[ItemDataModel]] = [List1Data, List2Data]

I am expecting the view to update when I click the button to present the different list, but it does nothing. What should I do?

CodePudding user response：

Use ListItemView(itemData: $ItemData[tab]) in the main view, and @Binding var itemData: [ItemDataModel] in the ListItemView.

Here is my test example code to show it works:

struct ContentView: View {
    @State private var tab = 0
    @State var itemData: [[ItemDataModel]] = [[]]  // <-- here
    
    var list1Data: [ItemDataModel] = [ItemDataModel(name: "item-1"),  ItemDataModel(name: "item-2") ]
    var list2Data: [ItemDataModel] = [ItemDataModel(name: "item-3")]

    var body: some View {
        Button(action:{
            tab = 0
        }){
            RoundedRectangle(cornerRadius: 5, style: .continuous)
            //UI Details
        }
        Button(action:{
            tab = 1
        }){
            RoundedRectangle(cornerRadius: 5, style: .continuous)
            //UI Details
        }
        ScrollView {
            VStack(spacing: 12) {
                ListItemView(itemData: $itemData[tab]) // <-- here
            }.frame(maxWidth: .infinity)
        }
        .onAppear {
          itemData = [list1Data, list2Data]
        }
    }
}

struct ListItemView: View {
    @Binding var itemData: [ItemDataModel]  // <-- here
    
    var body: some View {
        ForEach(itemData) { item in
            Text(item.name)
        }
    }
}

struct ItemDataModel: Identifiable, Hashable {
    let id = UUID()
    var name: String
}