swiftui - SwiftUI LazyVGrid 不显示两列
问题描述
我在我的 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")
}
}
}
}
解决方案
你必须把ForEach
inside 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
推荐阅读
- javascript - jQuery 通过按下按钮更改 div 的内容( include() )
- .net - 将十进制数的小数部分四舍五入为设定值
- javascript - 如何在本机反应中防止父点击事件?
- node.js - 为什么 node.js 安装两个“node_modules”文件夹?
- dialogflow-es - 是否可以基于 DialogFlow 中的实体创建上下文?
- jquery - 通过JQuery AJAX将json对象数组传递给MVC 5 Action,Action Parameter有记录,但没有数据
- javascript - Angular Firebase 检索数据
- java - Hibernate:如何处理 PropertyAccessException(无效数据)?
- oracle - Oracle 12c 审计跟踪。审计跟踪可以显示登录尝试的密码吗?
- abap - 通过 ABAP 获取要保存的仓位