SwiftUI 中 ScrollView 底部對齊中的 VStack

Question

目前正在構建一個聊天應用程序，我需要在屏幕底部顯示新消息。 我還需要將消息對齊到底部。 但是，在 ScrollView 中使用 VStack 默認情況下具有頂部對齊。

    ScrollView {
        VStack(alignment: .leading, spacing: 16) {
            Spacer()
            .frame(minWidth: 0, maxWidth: .infinity, minHeight:0, maxHeight: .infinity, alignment: Alignment.topLeading)
            ForEach(notList, id: \.self) { not in
                NotRow(not: not)
                    
            }
            
        }
        .padding()
        .frame(minWidth: 0, maxWidth: .infinity, minHeight:0, alignment: Alignment.topLeading)
        
    }

我該怎么做才能解決這個問題？

Answer 1

回答那個有點晚了，但它可能會幫助別人。 您可以使用一個很好的舊雙旋轉技巧來實現您想要的結果。 其他解決方案不起作用，因為滾動視圖內的最大大小未定義，因為它取決於其子視圖來計算自己的內容大小。

ScrollView {
  VStack(alignment: .leading, spacing: 16) {
      Spacer()
      .frame(minWidth: 0, maxWidth: .infinity, minHeight:0, maxHeight: .infinity, alignment: Alignment.topLeading)
      ForEach(notList, id: \.self) { not in
          NotRow(not: not)
      }

  }
  .padding()
  .rotationEffect(Angle(degrees: 180))
}
.rotationEffect(Angle(degrees: 180))

Answer 2

我認為您在 VStack 中缺少 maxHeight

VStack(alignment: .leading) {
  Spacer().frame(maxWidth: .infinity)
  // content here
}
.frame(maxHeight: .infinity) // <- this

Answer 3

如果您刪除Spacer()並將其放在ForEach大括號之后，它將修復它。 更新后的代碼如下所示：

ScrollView {
        VStack(alignment: .leading, spacing: 16) {
            .frame(minWidth: 0, maxWidth: .infinity, minHeight:0, maxHeight: .infinity, alignment: Alignment.topLeading)
            ForEach(notList, id: \.self) { not in
                NotRow(not: not)

            }
            Spacer()
        }
        .padding()
        .frame(minWidth: 0, maxWidth: .infinity, minHeight:0, alignment: Alignment.topLeading)

    }

Answer 4

ScrollView不會向其子項（在本例中為VStack ）提出與建議的高度相同的高度。 它只是要求最小的尺寸。 解決方案是讓它的直接子級響應建議給ScrollView本身的最小高度。 我們可以通過GeometryReader讀取建議的高度並將其設置為孩子的最小高度來實現這一點。

GeometryReader { reader in
    ScrollView {
        VStack {
            /// Spacer() or Color.red will now behave as expected
        }
        .frame(minHeight: reader.size.height)
    }
}

Answer 5

嘗試將所有Alignment.topLeading更改為Alignment.bottomLeading