SwiftUI - 滾動視圖內的垂直居中內容

Question

我正在嘗試在我的應用程序上編寫一個簡單的登錄頁面。 我開始在我新更新的 Mac OS Catalina 上使用 SwiftUI。 蘋果文檔仍然缺乏很多。 我需要將 VStack 垂直居中在 Scrollview 上，以 400 的寬度“限制”占據整個頁面。

像這樣的東西：

ScrollView(.vertical) {
    VStack {
        Text("Hello World")
    }
    .frame(maxWidth: 400, alignment: .center)
}

使用 UIScrollView 很容易，只需將 ContentView 設置為填充高度和寬度，然后將 Vertical StackLayout 居中在 Content View 內，但現在使用 SwiftUI 我只是想知道..

目標是這樣的（感謝作者）

如果有人想知道為什么我想要滾動視圖中的所有內容，這是因為我的表單很大，我希望用戶同時使用橫向和縱向視圖，所以我真的需要內容是可滾動的，還要記住在 Ipad 中表單不能填滿整個屏幕，這就是我希望它垂直居中的原因。

Answer 1

您可以使用GeometryReader獲取父視圖的尺寸並將滾動視圖的內容的minHeight設置為父視圖的高度，從而在滾動視圖中垂直居中內容。

當內容太大而無法垂直放置時，它會像往常一樣滾動。

例如：

var body: some View {
    GeometryReader { geometry in                    // Get the geometry
        ScrollView(.vertical) {
            VStack {
                Text("Form goes here")
                .frame(maxWidth: 400)               // Set your max width
            }
            .padding()
            .background(Color.yellow)
            .frame(width: geometry.size.width)      // Make the scroll view full-width
            .frame(minHeight: geometry.size.height) // Set the content’s min height to the parent
        }
    }
}

Answer 2

我已經根據@Alex 的回答構建了一個更通用的視圖

/// Custom vertical scroll view with centered content vertically
///
struct VScrollView<Content>: View where Content: View {
  @ViewBuilder let content: Content
  
  var body: some View {
    GeometryReader { geometry in
      ScrollView(.vertical) {
        content
          .frame(width: geometry.size.width)
          .frame(minHeight: geometry.size.height)
      }
    }
  }
}

您可以像這樣在應用程序中的任何位置使用它

  var body: some View {
    VScrollView {
      VStack {
        Text("YOUR TEXT HERE")
      }
    }
  }