SwiftUI LazyVGrid未显示两列

Question

我在我的测试版Xcode中使用LazyVGrid，我试图让一个垂直的ScrollView显示两列而不是一列。我将此视图设置为包含一个ScrollView，用于检查可用的14是否可用，如果可用，则将视图呈现为一个两列网格(我将列放在此LazyVGrid实例中，而不是作为外部属性，因为我不想使用# iOS属性标记整个视图-尽管我可能应该这样做)。

但是，当我预览视图时，它只显示一列。我的设置中有没有什么东西可能导致我的视图只显示一列而不是两列？

相关-有没有一种简单的方法可以在Xcode中预览不同版本的iOS 14？(如果我的问题是我的预览版本没有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")
        }
    }
}
}

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