How to make full width list row in SwiftUI

Issue #508

We need to use frame(minWidth: 0, maxWidth: .infinity, alignment: .leading). Note that order is important, and padding should be first, and background after frame to apply color to the entire frame

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
struct BooksScreen: View {
@ObservedObject var viewModel: BooksViewModel

var body: some View {
List {
ForEach(viewModel.books) { book in
RowView(vault: book)
}
}
.listStyle(GroupedListStyle())
}
}

private struct RowView: View {
let book: Book

var body: some View {
VStack(alignment: .leading) {
Text(book.name)
.foregroundColor(.white)
.font(.headline)
Text(book.text)
.foregroundColor(.white)
.font(.subheadline)
}
.padding()
.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
.background(Color(hex: book.color))
.cornerRadius(8)
}
}

Comments