SwiftUI VStack 对齐错误?

Jac*_*ack 3 alignment swift swiftui vstack

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

VStack(alignment: .trailing, spacing: 0) {
    Text("Hello, World!")
}
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

VStack(alignment: .center, spacing: 0) {
    Text("Hello, World!")
}
Run Code Online (Sandbox Code Playgroud)

开关

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

完整代码:

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

}
Run Code Online (Sandbox Code Playgroud)

Asp*_*eri 7

VStack(alignment:...)是对准子视图,但你只有一个子视图,所以完全对齐

默认情况下,所有堆栈都与内容紧密相关(只需将 .border 添加到您的测试 VStack/s 中,您就会看到结果,因此没有可移动内容的区域。

通过在提供屏幕范围区域的堆栈中提供帧对齐来解决您的期望:

演示

VStack {
    Text("Hello, World!")
}.frame(maxWidth: .infinity, alignment: .trailing)
Run Code Online (Sandbox Code Playgroud)

PS SwiftUI 仍然有很多错误,但不在这里:)


小智 6

我同意作者的观点,这种行为很奇怪……至少是这样。VStack 子视图的对齐在以下情况下不起作用:

VStack(alignment: .leading) {
    Text("Hello, world!")
    Text("Hello, world!")
}
.frame(width: 200, height: 200)
Run Code Online (Sandbox Code Playgroud)

但适用于以下情况:

VStack {
    Text("Hello, world!")
    Text("Hello, world!")
}
.frame(width: 200, height: 200, alignment: .leading)
Run Code Online (Sandbox Code Playgroud)

如果这不是一个错误,那么绝对是“声明式”方法的糟糕实现。