SwiftUI: Switch between List and grid/Collection View - swiftui

Question

Goal: A button that switches between List and Grid/Collection View.
For this, I am using the great WaterfallGrid:
https://github.com/paololeonardi/WaterfallGrid
I haven't managed able to make it work. I am using state, and if statement, as code bellow:
import SwiftUI
import WaterfallGrid
struct Fruit: Identifiable {
let id = UUID()
let name: String
let image: Image
}
struct ExampleView: View {
#State private var fruits = [
Fruit(name: "Apple", image: Image("apple")),
Fruit(name: "Banana", image: Image("banana")),
Fruit(name: "Grapes", image: Image("grapes")),
Fruit(name: "Peach", image: Image("peach"))]
#State private var showgrid = true
var body: some View {
NavigationView {
if showgrid == .true {
return
WaterfallGrid(fruits) { fruit in
HStack {
fruit.image.resizable().frame(width: 30, height: 30)
Text(fruit.name)
}
}
}
else {
return
List(fruits) { fruit in
HStack {
fruit.image.resizable().frame(width: 30, height: 30)
Text(fruit.name)
}
}
}
.navigationBarTitle("Fruits")
.navigationBarItems(trailing:
Button(action: { self.showmaterialrmenu.toggle() }) {
Image(systemName: "rectangle.on.rectangle.angled")
})
}
}
}
struct ExampleView_Previews: PreviewProvider {
static var previews: some View {
ExampleView()
}
}
Really appreciate any help!
Cheers

Answer 1

Hello it's not a good way to put all you views in one place I created one project that need to be having a list and grid mode so here's my implementation:
private enum HomeMode {
case list, grid
func icon() -> String {
switch self {
case .list: return "rectangle.3.offgrid.fill"
case .grid: return "rectangle.grid.1x2"
}
}
}
#State private var homeMode = HomeMode.list
private var swapHomeButton: some View {
Button(action: {
self.homeMode = self.homeMode == .grid ? .list : .grid
}) {
HStack {
Image(systemName: self.homeMode.icon()).imageScale(.medium)
}.frame(width: 30, height: 30)
}
}
and here's my main view:
var body: some View {
let view = Group {
if homeMode == .list {
homeAsList
} else {
homeAsGrid
}
}
.navigationBarItems(trailing:
HStack {
swapHomeButton
settingButton
}
).sheet(isPresented: $isSettingPresented,
content: { SettingsForm() })
return navigationView(content: AnyView(view))
}
HomeList:
private var homeAsList: some View {
Group {
if selectedMenu.menu == .genres {
GenresList(headerView: AnyView(segmentedView))
} else {
MoviesHomeList(menu: $selectedMenu.menu,
pageListener: selectedMenu.pageListener,
headerView: AnyView(segmentedView))
}
}
}
private var homeAsGrid: some View {
MoviesHomeGrid()
}
that's the answer If you are asking about how to arrange the views but if you are asking how to implement the WaterfallGrid hit me back so I can check it and see if we can solve this