在 ScrollView 中居中并对齐 SwiftUI 元素

Question

我有以下 SwiftUI 视图：

import SwiftUI

struct MySwiftUIView: View {
    var body: some View {
        VStack {
            HStack {
                Text("top leading text")
                Spacer()
            }
            Spacer()
            HStack {
                Spacer()
                Text("centered text")
                Spacer()
            }
            Spacer()
            HStack {
                Spacer()
                Text("bottom trailing text")
            }
        }
    }
}

运行时看起来像这样：

如果我将视图嵌入ScrollView这样的：

import SwiftUI

struct MySwiftUIView: View {
    var body: some View {
        ScrollView {
            VStack {
                HStack {
                    Text("top leading text")
                    Spacer()
                }
                Spacer()
                HStack {
                    Spacer()
                    Text("centered text")
                    Spacer()
                }
                Spacer()
                HStack {
                    Spacer()
                    Text("bottom trailing text")
                }
            }
        }
    }
}

然后运行时看起来像这样：

当它们嵌入到ScrollView.

在某种程度上，我想使用 SwiftUI 来复制在 Xcode 的检查器中看到的这种滚动行为，其中文本“Not Applicable”居中且可滚动：

Answer 1

将 ScrollView 包裹在GeometryReader. 然后将最小高度应用于等于geometry.size.height. 现在你应用的垫片应该按照你想要的方式填充 VStack。试试下面的代码：

GeometryReader { geometry in
    ScrollView(.vertical) {
        VStack {
            HStack {
                Text("top leading text")
                Spacer()
            }
            Spacer()
            HStack {
                Text("centered text")
            }
            Spacer()
            HStack(alignment: .bottom) {
                Spacer()
                Text("bottom trailing text")
            }
         }
         .padding()
         .frame(width: geometry.size.width)
         .frame(minHeight: geometry.size.height)

    }
}

另请查看此帖子以获取有关此问题的更多讨论：SwiftUI - Vertical Centering Content inside Scrollview