I’ve to design an Discover web page with SwiftUI and this view has a highlight slider with another objects that every row contains some gadgets, so I’ve a VStack to scroll the Discover objects and every object has an HStack to scroll the gadgets for that object.
I additionally should implement pagination for the web page, so I’m compelled to make use of LazyVStack so as to add a Coloration.clear object on the finish of the Stack to request the following web page from the server.
so the issue is in scrolling the view I’ve a lag and it isn’t scrolling easily.
ZStack {
ScrollView(.vertical, showsIndicators: true) {
VStack {
if let spotLightItem = viewModel.exploreSections.filter({ $0.kind == .highlight}).first {
ExploreSpotlightComponentView(sectionData: spotLightItem)
.body(peak: 576)
.environmentObject(viewModel)
LazyVStack {
ForEach(viewModel.exploreSections.sorted(by: { $0.precedence ?? 0 < $1.precedence ?? 0}), id: .title) { merchandise in
swap merchandise.kind {
case .categoryHorizontalLarge:
CategoryHorizontalLargeSectionView(sectionData: merchandise)
.environmentObject(viewModel)
case .categoryHorizontalMedium:
CategoryHorizontalMediumSectionView(sectionData: merchandise)
.padding(.backside)
case .categoryHorizontalSmall:
CategoryHorizontalSmallSectionView(sectionData: merchandise)
.padding(.backside)
case .classes:
CategoriesComponentView(sectionData: merchandise)
.padding(.backside)
case .map:
ExploreMapComponentView(sectionData: merchandise, showMapView: true)
.environmentObject(exploreMapViewModel)
case .marketing campaign:
CampaignSliderSectionView(sectionData: merchandise)
.body(peak: 150)
.padding(.backside)
default:
EmptyView()
}
}//: FOREACH ITEMS
if viewModel.currentPageNumber < viewModel.metaDataLastpageNumber {
// LazyVStack (alignment: .middle, spacing: 0) {
Coloration.clear
.body(width: 20, peak: 20)
.onAppear {
viewModel.fetchData(nextPage: true, showLoader: false)
}
Spacer()
.body(peak: 20)
// }
}
}//: LAZYVSTACK ITEMS
} //: VSTACK EXPLORE ITEMS
.ignoresSafeArea()
.padding(.backside, 50)
}
}//: SCROLLVIEW
.ignoresSafeArea()
.background(
Coloration(uiColor: .baseBackground)
.ignoresSafeArea()
)
.onAppear {
if !viewModel.didFinishSetup {
viewModel.didFinishSetup.toggle()
viewModel.setupVM()
}
}
}//: ZSTACK
.navigationTitle("")
.navigationBarHidden(true)
}
I learn one thing that it may be solved with Record and I’ve to exchange LazyVStack with Record, so modified the code with the next code, however I confronted two new issues with Record, not solely the Record gadgets do not fill total the cellular display, but additionally once I change the town, Record gadgets do not be up to date whereas the variable that I’m utilizing is a @Revealed variable.
VStack {
Record(viewModel.exploreSections) { exploreSection in
swap exploreSection.kind {
case .highlight:
ExploreSpotlightComponentView(sectionData: exploreSection)
.body(peak: 576)
.environmentObject(viewModel)
.body(maxWidth: .infinity)
case .categoryHorizontalLarge:
CategoryHorizontalLargeSectionView(sectionData: exploreSection)
.environmentObject(viewModel)
.body(peak: 280)
.body(maxWidth: .infinity)
case .categoryHorizontalMedium:
CategoryHorizontalMediumSectionView(sectionData: exploreSection)
.body(peak: 176)
case .categoryHorizontalSmall:
CategoryHorizontalSmallSectionView(sectionData: exploreSection)
.body(peak: 150)
case .classes:
CategoriesComponentView(sectionData: exploreSection)
.body(peak: 298)
case .map:
ExploreMapComponentView(sectionData: exploreSection, showMapView: true)
.environmentObject(exploreMapViewModel)
.body(peak: 302)
.body(maxWidth: .infinity)
.ignoresSafeArea()
case .marketing campaign:
CampaignSliderSectionView(sectionData: exploreSection)
.body(peak: 150)
.padding(.backside)
}
}
.body(maxWidth: .infinity)
.ignoresSafeArea()
.listRowInsets(.init(high: 0, main: 0, backside: 0, trailing: 0))
.background(
Coloration(uiColor: .baseBackground)
)
.id(viewModel.exploreSections.compactMap({ $0.id }))
.listStyle(GroupedListStyle())
}
.onAppear {
if !viewModel.didFinishSetup {
viewModel.didFinishSetup.toggle()
viewModel.setupVM()
}
}
.ignoresSafeArea()
