SwiftUI: How to center a rectangle in a list? - swift

Question

How do I center the rectangles in the list? I have tried somethings in my code, with alignment, but it has no affect sadly. Has this something to do with the default behavior of a list?
Here is my code:
struct ContentView: View {
var sectiesList = [
Secties(name: "Algemeen", color: Color.overigPink),
Secties(name: "Natuurkunde", color: Color.natuurkundeBlue),
Secties(name: "Wiskunde", color: Color.wiskundeBrown),
Secties(name: "Scheikunde", color: Color.scheikundeRed),
Secties(name: "Biologie", color: Color.biologieGreen)
]
var body: some View {
NavigationView {
ZStack {
Color.offWhite
List(sectiesList, id: \.name) { secties in
ZStack(alignment: .center) {
RoundedRectangle(cornerRadius: 25)
.fill(secties.color)
.frame(width: UIScreen.screenWidth * 0.85, height: UIScreen.screenHeight * 0.13, alignment: .center)
.shadow(color: Color.black.opacity(0.2), radius: 10, x: 10, y: 10)
.shadow(color: Color.white.opacity(0.7), radius: 10, x: -5, y: -5)
Text(secties.name)
.font(.largeTitle)
.fontWeight(.semibold)
.foregroundColor(Color.white)
.multilineTextAlignment(.center)
}
}
}.navigationBarTitle(Text("Binas"))
}
}
init() {
UITableView.appearance().separatorStyle = .none
UITableViewCell.appearance().backgroundColor = UIColor(red: 225 / 255, green: 225 / 255, blue: 235 / 255, alpha: 1)
UITableView.appearance().backgroundColor = UIColor(red: 225 / 255, green: 225 / 255, blue: 235 / 255, alpha: 1)
}
}

Answer 1

Give ZStack max available space in row, like
ZStack(alignment: .center) {
RoundedRectangle(cornerRadius: 25)
.fill(secties.color)
.frame(width: UIScreen.screenWidth * 0.85, height: UIScreen.screenHeight * 0.13, alignment: .center)
.shadow(color: Color.black.opacity(0.2), radius: 10, x: 10, y: 10)
.shadow(color: Color.white.opacity(0.7), radius: 10, x: -5, y: -5)
Text(secties.name)
.font(.largeTitle)
.fontWeight(.semibold)
.foregroundColor(Color.white)
.multilineTextAlignment(.center)
}
.frame(maxWidth: .infinity) // << here !!