SwiftUI HStack 垂直对齐不起作用？答案

【问题标题】：SwiftUI HStack vetrical Alignment doesn't work?SwiftUI HStack 垂直对齐不起作用？
【发布时间】：2020-03-19 08:07:44
【问题描述】：

我有以下代码：

HStack(alignment: VerticalAlignment.top) {
    Button("x"){
        self.errorText = ""
    }
    //Spacer()
}

我需要找到顶部的按钮。但是按钮仍然在 HStack 视图的中心。

我做错了什么？

PS：在这个地方使用Spacer() 对我来说不是解决方案。我需要完全对齐。

非必要部分：

@State var errorText: String = "Some long error text long long long long long long long long long long long long long long long long long long long long"

        VStack{
            Spacer()
            HStack{
                Text("Error: \(errorText)")
                Spacer()
                HStack(alignment: VerticalAlignment.top) {
                    Button("x"){
                        self.errorText = ""
                    }
                    //Spacer()
                }
            }
            .frame(minHeight:10)
            .padding(.all, 5)
        }

我不知道 VStack（HStack 父级）的高度，因为我不知道错误文本的大小；

Spacer() 不是解决方案，因为它使 VStack 高度与窗口高度一致。

【问题讨论】：

参数alignment: VerticalAlignment.top 用于子视图，而不是HStack 本身。它作为其父视图的子视图根据父对齐方式对齐。
@Asperi，按钮是 HStack 的子视图，但它位于中心，而不是在 HStack 的顶部。我需要找到顶部的按钮。
如果按钮是 HStack 中的唯一项目，则 HStack 会收紧其内容，因此收紧按钮的大小。对齐意味着内部项目之间，即。将所有内部项目居中或通过垂直边缘对齐所有内部项目，但如果项目是唯一的......要对齐什么？
@Asperi，哦，这就是原因。我现在明白了。在这种情况下，我需要使 HStack 具有父视图的高度。我该怎么做？
在这里查看非平凡布局的示例How to prevent a Spacer to make a VStack greedly grow beyond necessary?

标签： swift alignment vertical-alignment swiftui

【解决方案1】：

您应该改为对齐外部HStack。内的也是没用的。这样你就可以摆脱它了。

VStack{
    Spacer()
    HStack(alignment: .top) {
        Text("Error: \(errorText)")
        Spacer()
        Button("x"){ self.errorText = "" }
    }
    .frame(minHeight:10)
    .padding(.all, 5)
}

【讨论】：