SwiftUI：在列表和网格/集合视图之间切换答案

【问题标题】：SwiftUI: Switch between List and grid/Collection ViewSwiftUI：在列表和网格/集合视图之间切换
【发布时间】：2020-03-27 10:53:27
【问题描述】：

目标：在列表和网格/集合视图之间切换的按钮。

为此，我使用了很棒的 WaterfallGrid： https://github.com/paololeonardi/WaterfallGrid

我还没有设法使它工作。我正在使用状态和 if 语句，如下代码：

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()
    }
}

非常感谢任何帮助！

干杯

【问题讨论】：

标签： swiftui swiftui-list

【解决方案1】：

您好，将所有视图放在一个地方并不是一个好方法我创建了一个需要具有列表和网格模式的项目，所以这是我的实现：

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)
        }
    }

这是我的主要观点：

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))
    }

主页列表：

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()
    }

这就是答案如果您询问如何安排视图但如果您询问如何实施WaterfallGrid 回击我，以便我可以检查它，看看我们是否可以解决这个问题

【讨论】：