HTML-类似于 SwiftUI 视图中的 table 布局（即自动调整 table 单元格）？

Question

我想在我的 SwiftUI 视图中以某种方式呈现 table 文本单元格，每个单元格都会自动调整大小以适应文本。所以我这样做了：

    import SwiftUI

    struct ContentView: View {

        let words = "Die Würde des Menschen ist unantastbar. Sie zu achten und zu schützen ist Verpflichtung aller staatlichen Gewalt.".split(separator: " ")

        let columns = [
            GridItem(.flexible()),
            GridItem(.flexible()),
            GridItem(.flexible()),
            GridItem(.flexible()),
            GridItem(.flexible()),
        ]

       var body: some View {
           HStack{
               Spacer()
               LazyVGrid(columns: columns, spacing: 10) {
                   ForEach(words.indices, id: \.self) { idx in
                       HStack{
                           Text(words[idx])
                           Spacer()
                       }
                   }
               }
               Spacer()
           }.padding().frame(width:600)
       }
    }

但是，列以固定宽度和大量空白呈现。（我不理解这种情况下的“灵活”。）我希望看到类似 HTML-table 的行为，即列不应比最宽的元素宽。

Answer 1

GridItem(.flexible()) 为所有单元格提供灵活但相同的宽度。好像您正在寻找灵活的宽度。最简单的方法是跳过 LazyVGrid 并只使用 HStack 和 VStack，它们根据内容调整自己的大小：

    var body: some View {
        
        HStack {
            ForEach(0..<5) { col in
                VStack(alignment: .leading) {
                    ForEach(0..<4) { row in
                        let index = row*5 + col
                        if index < words.count {
                            Text(words[index])
                        } else {
                            Text("")
                        }
                    }
                }
            }
        }
        .padding()
        .frame(width:600)
    }

HTML-类似于 SwiftUI 视图中的 table 布局（即自动调整 table 单元格）？

HTML-like table layout (i.e. auto-resizing table cells) in SwiftUI View?

macos

swift

swiftui

lazyvgrid