SwiftUI VStack 右对齐单个元素

Question

我是 SwiftUI 的新手，这次我尝试将单个元素（图像）向右对齐，然后其余内容应居中对齐。

就像当你使用会发生什么Spacer()上HStack，但在另一边。

我读到.alignmentGuide它有点令人困惑，但我尝试以这种方式使用它：

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Text("Hello!").alignmentGuide(.trailing) {
                    v in v[HorizontalAlignment.trailing]
                }
            }
            Text("Hello, World!")
            Spacer()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

但这根本没有改变，两者Text都是居中对齐的。

我试图移动.alignmentGuide后的代码}的HStack结果相同。

这就是我想要做的，在使用情节提要之前，我会使用一些约束来做到这一点，例如将正确的约束设置为 8 或其他什么，但是当涉及到以 SwiftUI 方式进行操作时，我有点迷茫。

Answer 1

为了回答@cheesus，我想说@vacawama 的答案不是推荐的做法。

我将这样做

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

详细说明一下

使用(H|V)Stacks 和Spacers 的主要问题是内容和 之间的间距是固定的Spacer，在某些情况下可能会导致问题。

一个例子

• 考虑我们想要一个HStack，元素之间有一些间距，最后一个文本向左对齐：

  HStack(spacing: 25) {
    Color.red
      .frame(width: 50, height: 20)
    Color.green
      .frame(width: 50, height: 20)
    Text("The text")
      .background(Color.blue)
    Spacer()
  }
  .frame(width: 250)
  .border(Color.yellow)
  .padding(8)
  

  它给：

• 如果文本变长，您会看到HStack间隔符之间的间距：

  - Text("The text")
  + Text("Some long text")
  

  

• 现在我刚刚将 替换Spacer为 a Color，以便您可以看到它的实际效果：

  - Text("Some long text")
  -   .background(Color.blue)
  - Spacer()
  + Text("Some long text")
  +   .background(Color.blue)
  +   .layoutPriority(1)
  + Color.indigo
  +   .frame(height: 20)
  +   .frame(maxWidth: .infinity)
  

  

• 如果您使用以下命令，则此问题已修复.frame(alignment:)：

  - Text("The text")
  + Text("Some long text")
  

  

Answer 2

这是一种方法：

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Spacer()
                Text("Hello!")
                    .padding(.trailing, 8)
            }
            Text("Hello, World!")
            Spacer()
        }
    }
}

使用HStack带 a向右Spacer()推Text("Hello!")。添加.padding(.trailing, 8)以使其远离右边缘 8 点。