Reputation: 309
I need to create a table so that the text in the cell expands to the desired size. I create Content View:
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)
}
}
and it works well: But if the text becomes multi-line, then the table breaks:
let items: [String] = [
"1 One Line",
"2 Two Line\nTwo Line",
"3 Three lines\nThree lines\nThree lines"
]
if you make maxHeight = infinity then this solves the problem with borders, but the lines become equal to the maximum height.
Upvotes: 0
Views: 994
Reputation: 18904
The possible solution is to use maxHeight: .infinity
with .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)
}
Upvotes: 3