如何在 HStack Swiftui 中居中按钮答案

【问题标题】：How to center button inside VStack Swift UI如何在 HStack Swiftui 中居中按钮
【发布时间】：2020-01-09 00:53:07
【问题描述】：

var body: some View {
    VStack(alignment: .leading) {
        Text("Title")
            .bold()
            .font(Font.custom("Helvetica Neue", size: 36.0))

        ...

        Button(action: {}){
            Text("Create")
            .bold()
            .font(Font.custom("Helvetica Neue", size: 24.0))
            .padding(20)
            .foregroundColor(Color.white)
            .background(Color.purple)
            .cornerRadius(12)
        }


    }.padding(20)
}

我希望这两个特定元素有不同的对齐方式。标题必须有一个前导对齐，但另一方面按钮位于中心。现在我将 VStack 对齐设置为领先。我对 Swift UI 不太熟悉，所以第一个想法是使用几个具有不同对齐方式的垂直堆栈，但我认为它可以更轻松地完成。如果我向按钮添加对齐指南，它也不起作用。

【问题讨论】：

Button() .frame(width: UIScreen.main.bounds.width/2, height: UIScreen.main.bounds.height /2, alignment: .center)

标签： swift swiftui

【解决方案1】：

我会使用包含的HStack，如下面的演示所示

var body: some View {
    VStack(alignment: .leading) {
        Text("Title")
            .bold()
            .font(Font.custom("Helvetica Neue", size: 36.0))

        HStack {
            Spacer()
            Button(action: {}){
                Text("Create")
                .bold()
                .font(Font.custom("Helvetica Neue", size: 24.0))
                .padding(20)
                .foregroundColor(Color.white)
                .background(Color.purple)
                .cornerRadius(12)
            }
            Spacer()
        }
    }.padding(20)
}

【讨论】：

【解决方案2】：

您可以为此使用GeometryReader：

将其内容定义为自身大小和坐标空间的函数的容器视图。

https://developer.apple.com/documentation/swiftui/geometryreader

GeometryReader { geometry in
    VStack(alignment: .leading) {
        Text("Title")
            .bold()
            .font(Font.custom("Helvetica Neue", size: 36.0))

        Button(action: {

        }) {
            Text("Create")
                .bold()
                .font(Font.custom("Helvetica Neue", size: 24.0))
                .padding(20)
                .foregroundColor(Color.white)
                .background(Color.purple)
                .cornerRadius(12)
                .frame(width: geometry.size.width / 2, height: geometry.size.height / 2, alignment: .center)
        }
    }.padding(20)
}

【讨论】：

【解决方案3】：

另一种方法是使用VStack 与中心对齐和最大宽度。

VStack(alignment: .leading) {

        Text("Title")
            .bold()
            .font(Font.custom("Helvetica Neue", size: 36.0))

        VStack(alignment: .center) {
            Button(action: {}){
                Text("Create")
                .bold()
                .font(Font.custom("Helvetica Neue", size: 24.0))
                .padding(20)
                .foregroundColor(Color.white)
                .background(Color.purple)
                .cornerRadius(12)
            }
        }.frame(maxWidth: .infinity)


    }.padding(20)

【讨论】：