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

Question

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

类似这样的东西：

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