我想在屏幕上均匀显示三个项目。我试图使它们全部居中,同时具有领先的对齐方式,因此当少于三个时,它们仍然保持相同的外观。我对惰性堆栈不太熟悉,所以我确信这就是我的问题发挥作用的地方。 目前,如果我有超过三个项目,则布局是正确的,少于该项目的项目没有前导对齐。
ScrollView {
LazyHStack(alignment: .center) {
LazyVStack(alignment: .leading, spacing: 10) {
ForEach(books.chunked(into: 3), id: \.self) { chunk in
LazyHStack(spacing: 30) {
ForEach(chunk, id: \.self) { book in
NavigationLink {
QuoteList(book: book)
} label: {
BookView(book: book)
.tint(.black)
}
.contextMenu {
Button("Delete") {
if let index = books.firstIndex(where: { $0.id == book.id}) {
modelContext.delete(books[index])
deleteBookTipDone.invalidate(reason: .actionPerformed)
}
}
}
}
}
}
.padding(.horizontal)
}
.padding(.bottom)
}
}
您只需在
.frame(maxWidth: .infinity)
上使用 LazyVStack
即可。首先,我创建了一些模拟数据只是为了展示它是如何工作的,但您将使用自己的真实数据。
let books = [1,2,3,4,5] // This will be your array of Books
let columns = Array(repeating: GridItem(.flexible(), spacing: 15, alignment: .leading), count: 3)
请注意,我使用重复数组创建了网格的列。
接下来,我创建了一个
BookView
。在本例中,只是一个带有一些文本的矩形。
struct BookView: View {
var body: some View {
VStack(alignment: .leading, spacing: 0) {
RoundedRectangle(cornerRadius: 12)
.fill(Color.brown)
.frame(height: 150)
Text("Book name")
.font(.body)
.fontWeight(.medium)
.foregroundStyle(Color.black)
.padding(.top, 10)
Text("Author")
.font(.subheadline)
.foregroundStyle(Color.gray)
}
.frame(maxWidth: .infinity)
}
}
最后是网格本身。我们使用 forEach 循环遍历所有书籍,将它们显示为
NavigationLink
,以便您链接到 QuoteList
屏幕。我还添加了一些水平填充只是为了看起来......
LazyVGrid(columns: columns, spacing: 15) {
ForEach(books, id: \.self) { book in
NavigationLink {
// QuoteList(book: book)
} label: {
BookView()
}
.contextMenu {
Button("Delete") {
// Code
}
}
}
}
.padding(.horizontal, 15)
现在,如果您想添加顶部部分,您可以执行如下操作。这是全部代码组合在一起的完整代码:
struct ContentView: View {
var body: some View {
let books = [1,2,3,4,5] // This will be your array of Books
let columns = Array(repeating: GridItem(.flexible(), spacing: 15, alignment: .leading), count: 3)
NavigationStack {
ScrollView {
VStack(spacing: 30) {
// This is the top section
ScrollView(.horizontal) {
HStack(spacing: 20) {
ForEach(0..<5) { _ in
RoundedRectangle(cornerRadius: 12)
.fill(Color.gray)
.frame(width: 200, height: 150)
}
}
.padding(.leading, 15)
}
.padding(.top, 30)
// This is the Books section
LazyVGrid(columns: columns, spacing: 15) {
ForEach(books, id: \.self) { book in
NavigationLink {
// QuoteList(book: book)
} label: {
BookView()
}
.contextMenu {
Button("Delete") {
// Code
}
}
}
}
.padding(.horizontal, 15)
}
.navigationTitle("Library")
}
}
}
}
struct BookView: View {
var body: some View {
VStack(alignment: .leading, spacing: 0) {
RoundedRectangle(cornerRadius: 12)
.fill(Color.brown)
.frame(height: 150)
Text("Book name")
.font(.body)
.fontWeight(.medium)
.foregroundStyle(Color.black)
.padding(.top, 10)
Text("Author")
.font(.subheadline)
.foregroundStyle(Color.gray)
}
.frame(maxWidth: .infinity)
}
}