HStack 居中对齐，同时保持 VStack 领先对齐

Question

我想在屏幕上均匀显示三个项目。我试图使它们全部居中，同时具有领先的对齐方式，因此当少于三个时，它们仍然保持相同的外观。我对惰性堆栈不太熟悉，所以我确信这就是我的问题发挥作用的地方。 目前，如果我有超过三个项目，则布局是正确的，少于该项目的项目没有前导对齐。

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)
    }
}

Answer 1

您只需在

.frame(maxWidth: .infinity)

上使用

LazyVStack

即可。
但这里是您可能想要实现的另一个解决方案，使用 LazyGrids

首先，我创建了一些模拟数据只是为了展示它是如何工作的，但您将使用自己的真实数据。

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)
    }
}

预览