我有LazyVGrid,我想在其中为iPhone每行制作2个项目,在iPad每行制作4个项目,我不确定我应该如何在SwiftUI中给予条件以及如何限制行数
//
// ContentView.swift
// DemoProject
import SwiftUI
import CoreData
struct ContentView: View {
@Environment(\.managedObjectContext) private var viewContext
@FetchRequest(
sortDescriptors: [NSSortDescriptor(keyPath: \Item.timestamp, ascending: true)],
animation: .default)
private var items: FetchedResults<Item>
private var gridItemLayout = [GridItem(.adaptive(minimum: 100))]
@StateObject private var viewModel = HomeViewModel()
var body: some View {
GeometryReader { geometry in
NavigationView {
ScrollView {
LazyVGrid(columns: gridItemLayout, spacing: 20) {
ForEach(viewModel.results, id: \.self) {
let viewModel = ResultVM(model: $0)
NavigationLink(destination: {
DetailView()
}, label: {
SearchResultRow(resultVM: viewModel)
})
}
}
}
}
.onAppear(perform: {
viewModel.performSearch()
})
}
}
}
struct SearchResultRow: View {
let resultVM: ResultVM
var body: some View {
HStack {
RoundedRectangle(cornerRadius: 16).fill(.yellow)
.frame(maxWidth: .infinity).aspectRatio(1, contentMode: .fit)
.overlay(Text(resultVM.trackName))
.onTapGesture {
}
}.padding()
.background(Color.red)
}
}
3条答案
按热度按时间mf98qq941#
大概是这样的
pgpifvop2#
你可以把你的
gridItemLayout
设置为:并在init (推荐) 或
.onAppear
中添加:uqxowvwt3#
虽然所提供的答案本身会起作用,但在iPad上以多任务模式使用应用时,它们可能会变得棘手:拆分视图或滑动。如果是滑动,iPad上应用的宽度将与iPhone上的宽度相同,但如果你检查一下界面习惯,你仍然会得到
.pad
(嗯,因为你正在使用iPad)。因此界面可能会损坏--你会在iPhone大小的应用上得到iPad界面。但是有一种方法可以做到这一点-
UserInterfaceSizeClass
。具体来说,你需要一个水平大小类。这个枚举有两种情况(2023年2月的状态):简单地说,当应用程序的宽度与iPhone的宽度相似时(纵向模式下的滑动或狭缝视图,或者只是一个实际的iPhone),UserInterfaceSizeClass
是.compact
;当宽度与iPad的宽度相似时(普通iPad纵向或横向模式,在横向模式下拆分视图)。根据此参数,您可以决定如何呈现界面好了,理论够了,下面是要复制粘贴的代码:)