使用 ViewModifiers 在 VStack 中进行 SwiftUI 布局

Question

我有两个文本的简单视图。它的body是这样的：

VStack {
    Text("One")
    Text("Two")
    Text("Three")
}

这会产生如下视图：

但我想要的是，仅对 Text 视图使用修饰符（即没有 HStack 和 Spacers），实现如下布局：

目前可以吗？我希望以某种方式使 Text 的全宽然后仅使用文本对齐就可以了，但还没有弄清楚。

Answer 1

是的，这是可能的。您可以定义一个修饰符，例如：

extension View {
    func horizontalAlignment(_ alignment: HorizontalAlignment) -> some View {
        Group {
            if alignment == .leading {
                HStack {
                    self
                    Spacer()
                }
            } else if alignment == .trailing {
                HStack {
                    Spacer()
                    self
                }
            } else {
                self
            }
        }
    }
}

并像这样使用它：

VStack {
    Text("One")
        .horizontalAlignment(.leading)
    Text("Two")
        .horizontalAlignment(.center)
    Text("Three")
        .horizontalAlignment(.trailing)
}

当然，多种方法都是可能的。

Answer 2

一种方法是只设置框架：

struct ContentView: View {
    var body: some View {
        VStack {
            Text("One")
                .frame(minWidth: 0,
                       maxWidth: .infinity,
                       alignment: .leading)
            Text("Two")
                .frame(minWidth: 0,
                       maxWidth: .infinity,
                       alignment: .center)
            Text("Three")
                .frame(minWidth: 0,
                       maxWidth: .infinity,
                       alignment: .trailing)

        }
    }
}

Answer 3

嗯...因为没有任何附加条件或限制，只是添加了两行代码

预览中的演示（蓝色边框只是代码中的选择）

    VStack {
        Text("One")
            .frame(maxWidth: .infinity, alignment: .leading)
        Text("Two")
        Text("Three")
            .frame(maxWidth: .infinity, alignment: .trailing)
    }

使用 ViewModifiers 在 VStack 中进行 SwiftUI 布局

SwiftUI layout inside VStack using ViewModifiers

layout

swift

swiftui

vstack