[ad_1]
I am new to swift and coding and can not seem to make a filter bar work. I need to show totally different units of information relying on what tab is chosen. I get my information from firebase. I’ve two units of information (animals & vegetation). In the mean time they each seem without delay. I would like the animals array to seem when “animals” is chosen on the filter bar after which vegetation to seem when “vegetation” is chosen on the filter bar.
The code for this undertaking is:
import SwiftUI
struct FloraFaunaPage: View {
@StateObject var FloraFaunaPageModel = FloraFaunaPageViewModel()
@State personal var selectedFloraFaunaFilter: FloraFaunaFilterViewModel = .animals
var physique: some View {
ScrollView {
ZStack{
VStack(spacing: 10){
// MARK: This Is The View For The Filter Bar
floraFaunaFilterBar
// MARK: This Is The View For The Animals - Fetching From Firebase
animalCollection
// MARK: This Is The View For The Crops - Fetching From Firebase
plantCollection
}
.onAppear(carry out: {
self.FloraFaunaPageModel.fetchAnimalData()
self.FloraFaunaPageModel.fetchPlantData()
})
}
}
A part of the view mannequin for the undertaking is:
class AchievementPageViewModel: NSObject, ObservableObject {
@Printed var filteredAnimalPhotos: [AnimalPhoto] = []
@Printed var filteredPlantPhotos: [PlantPhoto] = []
}
The view mannequin for my filter bar is that this:
import Basis
enum FloraFaunaFilterViewModel: Int, CaseIterable {
case animals
case vegetation
var title: String {
swap self {
case .animals: return "Animals"
case .vegetation: return "Crops"
}
}
}
The code for my filter bar view is that this:
var floraFaunaFilterBar: some View {
HStack {
ForEach(FloraFaunaFilterViewModel.allCases, id: .rawValue) { merchandise in
VStack {
Textual content(merchandise.title)
.font(.headline)
.fontWeight(selectedFloraFaunaFilter == merchandise ? .semibold: .common)
.foregroundColor(selectedFloraFaunaFilter == merchandise ? .black: .grey)
if selectedFloraFaunaFilter == merchandise {
Capsule()
.foregroundColor(Shade("Blue"))
.body(top: 3)
.matchedGeometryEffect(id: "filter", in: animation)
} else {
Capsule()
.foregroundColor(Shade(.clear))
.body(top: 3)
}
}
.onTapGesture {
withAnimation(.easeInOut) {
self.selectedFloraFaunaFilter = merchandise
}
}
}
}
.overlay(Divider().offset(x: 0, y: 16))
}
That is the code for my animals array (ought to seem when “animals” is chosen on filter bar):
var animalCollection: some View {
VStack {
HStack {
Textual content("Animals")
}
HStack {
if FloraFaunaPageModel.animalPhoto.isEmpty {
Spacer()
ProgressView()
Spacer()
}
else {
ScrollView {
VStack {
HStack{
ForEach(FloraFaunaPageModel.filteredAnimalPhotos) {animalPhoto in
ZStack {
AnimalPhotoView(animalPhoto: animalPhoto)
}
}
}
}
}
}
}
}
}
The code for my plant assortment is similar because the animal assortment (simply with totally different information)
The difficulty is I’m loading each collections of information when the view seems. Im not sure how to verify solely the animal assortment masses on seem after which solely the plant assortment when “vegetation” is chosen within the filter bar.
Any assist can be a lot appreciated!
[ad_2]
