ios - SwiftUI - Scrollview 内的垂直居中内容

Question

我正在尝试在我的应用程序上编写一个简单的登录页面。我开始在新更新的 Mac OS Catalina 上使用 SwiftUI。苹果的文档仍然缺乏很多。我需要将 VStack 垂直居中在占据整个页面的 Scrollview 上，其宽度“限制”为 400。

类似这样的事情:

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

使用 UIScrollView 很容易，只需将 ContentView 设置为填充高度和宽度，然后将垂直 StackLayout 置于内容 View 内的中心，但现在使用 SwiftUI 我只是想知道..

目标是这样的(归功于作者)

如果有人想知道为什么我想要 ScrollView 中的所有内容，那是因为我的表单很大，并且我希望用户同时使用横向和纵向 View ，所以我真的需要内容可滚动，还要记住， Ipad 表单不会填满整个屏幕，这就是为什么我希望它垂直居中。

Answer 1

您可以使用 GeometryReader 获取父 View 的尺寸并将 ScrollView 内容的 minHeight 设置为父 View 的高度，从而使 ScrollView 中的内容垂直居中。

当内容太大而无法垂直放置时，它会像平常一样滚动。

例如:

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
        }
    }
}