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 仍然有很多错误，但这里没有:)

Answer 2

这可以用 Spacer 来解决。

对齐前导：

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

对齐尾随：

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

Answer 3

我同意作者的观点，这种行为很奇怪……至少。 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)

如果这不是错误，那么肯定是“声明式”方法的糟糕实现。

SwiftUI VStack 对齐错误？

SwiftUI VStack Alignment Bug?

alignment

swift

swiftui

vstack