SwiftUI：如何在列表中居中放置矩形？

编程问答 2022-08-16

问题描述

如何在列表中居中放置矩形？我已经在代码中尝试了一些对齐的方法，但是遗憾的是它没有任何影响。这与列表的默认行为有关吗？

enter image description here

这是我的代码：

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),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,alpha: 1)
}

}

解决方法

赋予ZStack最大可用行空间，例如

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),x: -5,y: -5)
    Text(secties.name)
        .font(.largeTitle)
        .fontWeight(.semibold)
        .foregroundColor(Color.white)
        .multilineTextAlignment(.center)
}
.frame(maxWidth: .infinity)      // << here !!
swiftswiftswiftswiftswiftui