SwiftUI VStack对齐问题？

Question

最近我在SwiftUI中构建了一个应用程序，今天我注意到VStack对齐有一些奇怪的行为。无论我使用的对齐方式，视图都不是在中心之外对齐。见下文：

VStack(alignment: .trailing, spacing: 0) {
    Text("Hello, World!")
}

​

​

VStack(alignment: .center, spacing: 0) {
    Text("Hello, World!")
}

​

​

它在预览和模拟器中都是这样做的，我试图将我的文本与屏幕的右边对齐。

完整法典：

import SwiftUI

struct DemoView: View {
    var body: some View {
        VStack(alignment: .center, spacing: 0) {
            Text("Hello, World!")
        }
    }
}

struct DemoView_Previews: PreviewProvider {
    static var previews: some View {
        DemoView()
    }

}

Answer 1

VStack(alignment:...)用于对齐子视图，但您只有一个子视图，因此无需对齐。

默认情况下，所有堆栈对内容都很紧(只需将.border添加到测试VStack/s中，就可以看到结果，因此没有可以移动内容的区域。

您所期望的是通过在堆栈提供屏幕范围内的帧对齐来解决问题：

​

​

VStack {
    Text("Hello, World!")
}.frame(maxWidth: .infinity, alignment: .trailing)

P.S. SwiftUI仍然有许多bug，但这里没有:)

Answer 2

我同意作者的观点，这种行为是strange...at最少的。在以下情况下，VStack子视图的对齐不起作用：

VStack(alignment: .leading) {
    Text("Hello, world!")
    Text("Hello, world!")
}
.frame(width: 200, height: 200)

但在下列情况下起作用：

VStack {
    Text("Hello, world!")
    Text("Hello, world!")
}
.frame(width: 200, height: 200, alignment: .leading)

如果这不是一个bug，那么肯定是对“声明式”方法的错误实现。

Answer 3

这可以用Spacer来解决。

路线引导：

var body: some View {
        HStack {
            Text("Hello, World!")
            
            Spacer()
        }
    }

对齐跟踪：

var body: some View {
        HStack {
            Spacer()
            
            Text("Hello, World!")
        }
    }