如何在SwiftUI中使用zindex将视图居中

Question

我的自定义视图有两个元素，RoundedRectangle和Text。我希望这些视图显示为一个按钮。但是，视图不能在ZStack中居中。

import SwiftUI

struct CommandButtonView: View {
    let text: String
    let color: Color
    
    var body: some View {
        ZStack(alignment: .center) {
            RoundedRectangle(cornerRadius: 8.0)
                .size(width: 40.0, height: 40.0)
                .fill(color)
                .zIndex(100)
            Text(text)
//                .foregroundColor(.white)
                .font(.system(.body, design: .monospaced))
                .zIndex(101)
        }
    }
}

struct CommandButtonView_Previews: PreviewProvider {
    static var previews: some View {
        CommandButtonView(text: " = ", color: .green)
    }
}

alignment中的ZStack如何工作？

Answer 1

这是固定的变体。

struct CommandButtonView: View {
    let text: String
    let color: Color

    var body: some View {
        ZStack(alignment: .center) {
            RoundedRectangle(cornerRadius: 8.0)
                .fill(color)
                .frame(width: 40.0, height: 40.0)
            Text(text)
                .foregroundColor(.white)
                .font(.system(.body, design: .monospaced))
        }
    }
}