SwiftUI VStack 对齐错误？答案

【问题标题】：SwiftUI VStack Alignment Bug?SwiftUI VStack 对齐错误？
【发布时间】：2020-10-29 00:42:27
【问题描述】：

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

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()
    }

}

【问题讨论】：

这不是错误。如果您不为父视图指定大小，则 SwiftUI 父视图的大小与其子视图相同。

标签： swift swiftui alignment vstack

【解决方案1】：

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

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

通过在堆栈中提供全屏区域的帧对齐来解决您的期望：

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

附： SwiftUI 仍然有很多错误，但这里不存在 :)

【讨论】：

【解决方案2】：

这可以通过Spacer 解决。

对齐前导：

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

对齐尾随：

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

【讨论】：