自定义表格视图 SwiftUI iOS答案

【问题标题】：Custom table view SwiftUI iOS自定义表格视图 SwiftUI iOS
【发布时间】：2021-02-08 16:28:58
【问题描述】：

我需要创建一个表格，以便单元格中的文本扩展到所需的大小。我创建内容视图：

struct ContentView: View {
    let items: [String] = [
        "1 One Line",
        "1 One Line",
        "1 One Line"
    ]
    var body: some View {
        ScrollView {
            VStack(spacing: 1) {
                ForEach(self.items, id: \.hash) { (item) in
                    HStack(spacing: 1) {
                        Text(item)
                            .frame(maxWidth: .infinity, alignment: .center)
                            .background(Color.white)
                        Text("One Line")
                            .frame(width: 70)
                            .background(Color.white)
                        Text("One Line")
                            .frame(width: 70)
                            .background(Color.white)
                    }
                }
                // MARK: Total
                HStack(spacing: 1) {
                    Text("Title")
                        .frame(maxWidth: .infinity, alignment: .center)
                        .background(Color.white)
                    Text("One Line")
                        .frame(width: 141)
                        .background(Color.white)
                }
            }
            .padding(1)
            .background(Color.orange)
        }
        .padding(15)
    }
}

而且效果很好：但是如果文本变成多行，那么表格就会中断：

let items: [String] = [
    "1 One Line",
    "2 Two Line\nTwo Line",
    "3 Three lines\nThree lines\nThree lines"
]

边界越来越宽：

如果你设置 maxHeight = infinity 那么这解决了边框的问题，但是线条变得等于最大高度。

【问题讨论】：

标签： swiftui

【解决方案1】：

可能的解决方案是使用maxHeight: .infinity 和.fixedSize

var body: some View {
        ScrollView {
            VStack(spacing: 1) {
                ForEach(self.items, id: \.hash) { (item) in
                    HStack(spacing: 1) {
                        Text(item)
                            .frame(maxWidth: .infinity, alignment: .center)
                            .background(Color.white)
                        Text("One Line")
                            .frame(maxHeight: .infinity, alignment: .center)
                            .background(Color.white)
                        Text("One Line")
                            .frame(maxHeight: .infinity, alignment: .center)
                            .background(Color.white)
                            
                    }
                    .fixedSize(horizontal: false, vertical: true) //<---Here
                }
                // MARK: Total
                HStack(spacing: 1) {
                    Text("Title")
                        .frame(maxWidth: .infinity, alignment: .center)
                        .background(Color.white)
                    Text("One Line")
                        .frame(width: 137)
                        .background(Color.white)
                }
            }
            .padding(1)
            .background(Color.orange)
        }
        .padding(15)
    }

【讨论】：