SwiftUI VStack 對齊右單個元素

Question

我是 SwiftUI 的新手，這次我嘗試將單個元素（圖像）右對齊，然后內容的 rest 應該居中對齊。

就像您在HStack上使用Spacer()但在另一側使用時發生的情況一樣。

我讀到了.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都是中心對齊的。

我嘗試在HStack的}之后移動.alignmentGuide代碼，結果相同。

這就是我正在嘗試做的事情，在使用故事板之前，我會使用一些約束來做到這一點，比如將正確的約束設置為 8 或其他東西，但在使用 SwiftUI 方式時我有點迷茫。

Answer 1

這是一種方法：

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

使用帶有Spacer()的HStack將Text("Hello!")推到右側。 添加.padding(.trailing, 8)以使其離開右邊緣 8 點。

Answer 2

要回答@cheesus，我會說@vacawama 的回答不是推薦的做法。

這是我會怎么做

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

再詳細一點

使用(H|V)Stack和Spacer的主要問題是你的內容和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")

  

• 現在我只是用Color替換了Spacer ，這樣你就可以看到它的實際效果：

   - 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:) ，這是固定的：

   HStack(spacing: 25) { Color.red.frame(width: 50, height: 20) Color.green.frame(width: 50, height: 20) Text("Some long text").frame(maxWidth: .infinity, alignment: .leading).background(Color.blue) }.frame(width: 250).border(Color.yellow).padding(8)