Convert multiple detail tab views into single display-CodePudding

So I have an implementation on a project that someone else has made and I would like to switch the functionality of it, but I am unsure on how to do it, so I wanted to see if someone might be able to help me.

So I have the following code:

TabView(selection: $mainViewModel.selectedItemId) {
    ForEach(mainViewModel.selectedCategory == "" ? mainViewModel.places: mainViewModel.places.filter({$0.category == mainViewModel.selectedCategory})) { item in
        NavigationLink(
            destination: PlaceDetailView(place: item),
            label: {
                PlaceTabViewDetail(item: item)
                    .background(Color("ColorWhite")).cornerRadius(20)
                    .frame(width: getRect().width - 40)
                    .padding(.horizontal, 10)
                    .padding(.bottom, 50)
                    .tag(item.id)
            }
        ) //: END NAVIGATIONLINK
    } //: END FOREACH
} //: END TABVIEW

Which outputs this:

How can I extract the "item" and use just a single display, so instead of being able to search through numerous locations tabs, I want just one single display like this:

Basically, I want to utilize "item" since it has all the data, but instead of a foreach, just have a single output.

CodePudding user response：

If you want to show a single item from an array which is currently selected then you can try something like this.

Add a computed property in your MainViewModel.

var selectedItem: Place? {
    places.first({ $0.id == selectedItemId })
}

Now use this property in your view like this.

if let item = mainViewModel.selectedItem {
    NavigationLink(
        destination: PlaceDetailView(place: item),
        label: {
            PlaceTabViewDetail(item: item)
                .background(Color("ColorWhite")).cornerRadius(20)
                .frame(width: getRect().width - 40)
                .padding(.horizontal, 10)
                .padding(.bottom, 50)
                .tag(item.id)
        }
    )
}