SwiftUI

Question

我正在尝试实现基本上具有以下布局的设计：

所以我需要此 table 或网格视图的列标题。第二列不需要标题。

这似乎是 LazyVGrid 或 LazyHGrid 的工作，但是我似乎无法找到一个解决方案来整齐地包含这样的标题 - 这一切看起来有点老套。

想知道我是否缺少实现此目的的更好方法。我当然可以尝试在 HStack 中创建 VStack，但这似乎应该比这更智能地完成。

Answer 1

您可以在显示内容之前将 headers 传递到 LazyVGrid：

struct Item: Identifiable {
    let id = UUID()
    var item: String
    var description: String = "This is the item description"
    var quantity: Int = 1
    var price: Double = 0
}


struct ContentView: View {
    
    let data = [
        Item(item: "Image 1", quantity: 2, price: 1.99),
        Item(item: "Image 2", quantity: 1, price: 3.99),
        Item(item: "Image 3", quantity: 5, price: 9.99),
    ]
    
    let columns = [
        GridItem(.flexible(), alignment: .topLeading),
        GridItem(.flexible(minimum: 150), alignment: .topLeading),
        GridItem(.flexible(), alignment: .topLeading),
        GridItem(.flexible(), alignment: .topLeading),
    ]
    
    var body: some View {
        
        LazyVGrid(columns: columns) {
            
            // headers
            Group {
                Text("Item")
                Text("")
                Text("Qty")
                Text("Price")
            }
            .font(.headline)
            
            // content
            ForEach(data) { item in
                Text(item.item)
                Text(item.description)
                Text("\(item.quantity)")
                Text("$\(item.price, specifier: "%.2f")")
            }
        }
        .padding()
    }
}

SwiftUI - 带有列标题的网格/table

SwiftUI - grid / table with column headings

vstack

lazyvgrid

lazyhgrid