SwiftUI的LazyVGrid没有显示两列

Question

我正在使用Xcode的beta版进行LazyVGrid实验，并尝试使竖向滚动视图显示两列而不是一列。我设置了这个视图，包括一个ScrollView，检查iOS 14是否可用，如果可用，则将视图呈现为两列网格（我将列放在LazyVGrid实例中，而不是作为外部属性，因为我不想标记整个视图与#available属性 - 尽管也许我应该）。

然而，当我预览视图时，它只显示为一列。我的设置中是否有什么可能导致我的视图仅显示为一列而不是两列？

相关问题-是否有一种简单的方法可以使用不包括iOS 14的不同构建来预览Xcode？（以防我的问题是我的预览版本没有iOS 14）

以下是我参考的视图：

struct PackPage: View {
    @Binding var isPresented: Bool
    var allPacks: [Pack] = [samplePack, couplesPack, roadTripPack, familyPack]
    var purchasedPacks: [Pack] = [samplePack]
    var unpurchasedPacks: [Pack] = [couplesPack, roadTripPack, familyPack]

    let userDefaults = UserDefaults.standard
    @State private var action: Int? = 0
    @State private var linkLock: Pack? = samplePack
    
    private func isPurchased(pack: Pack, allPacks: [Pack]) -> Bool {
        if allPacks.contains(pack) {
            return true
        } else {
            return false
        }
    }

    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: PurchasePage(pack: linkLock!), tag: 1, selection: $action) {
                    EmptyView()
                }
                ScrollView(.vertical, showsIndicators: false) {
                    ForEach((allPacks), id: \.self) { pack in
                        
                        //Checks if iOS version 14.0 is available to render the lazy grid view
                        if #available(iOS 14.0, *) {
                            LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())], spacing: 20) {
                                if
                                    //checks if the pack is in the purchased list - if so, renders it as an unlocked tile.
                                    isPurchased(pack: pack, allPacks: purchasedPacks) {
                                    UnlockedPackTile(tilePack: pack)
                                        .onTapGesture {
                                            print("Originally tapped \(pack.name)")
                                            self.userInformation.defaultPack = pack
                                            self.isPresented.toggle()
                                        }
                                } else {
                                    // if pack is not purchased, renders it as a locked pack tile
                                    LockedPackTile(tilePackLocked: pack)
                                        .onTapGesture {
                                            self.linkLock = pack
                                            self.action = 1
                                        }
                                }
                            }
                        } else {
                            //does this as a simple VStack instead if iOS 14 is not available.
                            if isPurchased(pack: pack, allPacks: purchasedPacks) {
                                UnlockedPackTile(tilePack: pack)
                                    .onTapGesture {
                                        print("Originally tapped \(pack.name)")
                                        self.userInformation.defaultPack = pack
                                        self.isPresented.toggle()
                                    }
                            } else {
                                LockedPackTile(tilePackLocked: pack)
                                    .onTapGesture {
                                        self.linkLock = pack
                                        self.action = 1
                                    }
                            }
                        }
                            }
                        }
                Text("Button")
        .navigationBarTitle("Question Packs")
        }
    }
}
}

- Charlie Page

Answer 1

你需要将 ForEach 放在 LazyVGrid 中，这样后者才能安排动态视图：

ScrollView(.vertical, showsIndicators: false) {
    //Checks if iOS version 14.0 is available to render the lazy grid view
    if #available(iOS 14.0, *) {
        LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())], spacing: 20) {
           ForEach((allPacks), id: \.self) { pack in

- Asperi