如何在 SwiftUI 中將項目對齊到 VStack 內的頂部？

Question

我剛開始使用 swiftui，我在 ui alignment 中遇到問題。以下代碼從圖像頂部創建一個空格

VStack(alignment: .leading) {
        Image(item.imageUrl)
              .resizable()
              .aspectRatio(contentMode: .fit)
              .frame(width: 72, height: 72, alignment: .top).padding(.top,0)
        Text("\(item.name)").font(Font.system(size:12, design: .default))
             .multilineTextAlignment(.center)
             .frame(maxWidth: .infinity).lineLimit(2)    
        }
}

我可以看到 VStack 接受參數alignment ，但它是水平的 alignment。我需要的是圖像應該貼在其超級視圖的頂部。 有沒有辦法在不使用 Spacer() 的情況下執行此操作。

就像在 react-native 中一樣，我們曾經為子級的水平和垂直 alignment 設置了 justifyContent 和 alignItems。

更新：

文本或任何視圖也存在同樣的問題。 例如，這段代碼將兩個文本放在視圖的中心

 VStack(alignment: .leading, spacing: 0) {
        Text("line 1")
        Text("line 2")
 }

VStack 中的參數 alignment 用於水平 alignment。

現在要將這些文本對齊到頂部，我能想到的唯一方法是像這樣引入Spacer() ：

struct MyCustomView:View {
  var body: some View {
    VStack(alignment: .leading, spacing: 0) {
      Text("line 1")
      Text("line 2")
      Spacer()
    }
 }

這確實暫時解決了問題：

但是 spacer 會在復雜的視圖中產生問題，假設另一個開發人員想要在我的視圖下方添加一個自定義視圖（在本例中為第 3 行），spacer 會在它們之間創建額外的空間

VStack {
     MyCustomView()
     Text("line 3")
 }

有沒有更好的方法讓我在 VStack 中的子視圖（和后續視圖）在沒有墊片的情況下保持與頂部對齊？

Answer 1

您可以嘗試使用.frame()修飾符使VStack()在其超級視圖中采用全尺寸。 在框架中，您可以對齊您的內容topLeading

var body: some View {
    VStack(alignment: .leading, spacing: 0) {
        Text("line 1")
        Text("line 2")
    }
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
    .border(Color.red)
}

該解決方案不需要墊片

Answer 2

SwiftUI 意見很便宜。 將另一個VStack()與Spacer()一起使用。

    VStack {
        VStack(alignment: .center, spacing: 0) {
          Text("line 1")
          Text("line 2")
          // Add your Views here
        }
        Spacer()
    }

Answer 3

這也有效。

 VStack {

          Text("line 1")
          Text("line 2")

    }.frame(maxWidth: .infinity, // Full Screen Width
            maxHeight: .infinity, // Full Screen Height
            alignment: .topLeading) // Align To top

Answer 4

        VStack(spacing: 30) {
        
        Text("Default Alignment in Vstack is Center")
        
        VStack(alignment: .trailing, spacing: 20) {
            Text(".trailing")
                .font(.title)
            Image(systemName: "rectangle.trailinghalf.inset.filled.arrow.trailing")
                .font(.title)
            
            Text("Alignment set by .trailing")
            
        }.padding()
            .background(RoundedRectangle(cornerRadius: 10).foregroundColor(.yellow))
        
        VStack(alignment: .leading, spacing: 20) {
            Text(".leading")
                .font(.title)
            
            Image(systemName: "rectangle.leadinghalf.inset.filled.arrow.leading")
                .font(.title)
            
            Text("Alignment set by .leading")
            
        }.padding()
            .background(RoundedRectangle(cornerRadius: 10).foregroundColor(.yellow))
        
    }