Question

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

为此，我使用了很棒的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()
    }
}

真的很感谢您的帮助！

欢呼

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

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

如果您正在询问如何安排视图，但是如果您正在询问如何实施WaterfallGrid，那就是答案了。我可以进行检查，看看是否可以解决此问题

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

1 个答案: