在 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 的检查器中看到的这种滚动行为，其中“不适用”文本居中且可滚动：

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