SwiftUI垂直ScrollView内容无法居中显示，求解决方法

嘿，这个问题我之前也碰到过！默认情况下，ScrollView会根据内部内容的高度来调整自身大小，所以即使你把它放在VStack里，它也不会自动占满整个屏幕的可用空间，导致内容挤在顶部。

下面给你两种可行的解决方案，你可以根据需求选择：

方案一：内容少时居中，内容多时正常滚动（推荐） #

这种方法能兼顾两种场景：当内容高度小于屏幕时，内容会垂直居中；当内容超过屏幕高度时，保持正常的滚动功能。

var body: some View {
    VStack {
        ScrollView(.vertical) {
            VStack {
                Text("AAA")
                Text("BBB")
                Text("CCC")
                Text("DDD")
                Text("EEE")
            }
            .frame(minHeight: .infinity) // 内容不够长时，撑满ScrollView高度实现居中
        }
        .border(Color.blue)
        .frame(maxHeight: .infinity) // 让ScrollView占满父容器的全部垂直空间
    }
    .border(Color.red)
    .frame(maxWidth: .infinity, maxHeight: .infinity) // 让最外层VStack占满整个屏幕
}

关键代码解释： #

• .frame(maxHeight: .infinity) 作用于ScrollView：打破它默认的“内容自适应”限制，强制它占据外层容器的所有可用垂直空间。
• .frame(minHeight: .infinity) 作用于内部VStack：当内容高度不足时，这个VStack会自动拉伸到ScrollView的高度，从而让文本垂直居中；当内容超过屏幕高度时，它会自适应内容高度，不影响滚动。

方案二：强制内容始终在可视区域居中（特殊场景用） #

如果你希望不管内容多长，可视区域始终显示居中的内容（滚动时内容会上下移动，但居中逻辑保持），可以用这个方法，但它的滚动体验可能不符合常规预期：

var body: some View {
    VStack {
        ScrollView(.vertical) {
            VStack {
                Text("AAA")
                Text("BBB")
                Text("CCC")
                Text("DDD")
                Text("EEE")
            }
        }
        .border(Color.blue)
        .frame(maxHeight: .infinity)
        .scrollContentBackground(.hidden)
        .background(
            GeometryReader { proxy in
                Color.clear
                    .preference(key: ScrollViewHeightKey.self, value: proxy.size.height)
            }
        )
        .onPreferenceChange(ScrollViewHeightKey.self) { height in
            // 获取ScrollView高度后，手动调整偏移量实现居中
            let screenHeight = UIScreen.main.bounds.height
            self.scrollOffset = -(screenHeight - height)/2
        }
        .contentOffset(y: scrollOffset)
    }
    .border(Color.red)
    .frame(maxWidth: .infinity, maxHeight: .infinity)
}

// 自定义PreferenceKey用于获取ScrollView的实际高度
struct ScrollViewHeightKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

// 需要添加一个状态变量存储滚动偏移量
@State private var scrollOffset: CGFloat = 0

内容的提问来源于stack exchange，提问作者andrewz