SwiftUI LazyVGrid 不显示两列

Posted 2023-02-24

【中文标题】SwiftUI LazyVGrid 不显示两列

【英文标题】：SwiftUI LazyVGrid not showing two columns

【发布时间】：2020-08-13 13:01:34

【问题描述】：

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

但是，当我预览视图时，它只显示一列。我的设置中是否有任何内容可能导致我的视​​图只显示一列而不是两列？

相关 - 是否有一种简单的方法可以在 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")
        
    

【参考方案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