SwiftUI开发watchOS应用时如何让ScrollView子项占满整屏高度？

解决方案 #

你遇到的问题本质是ScrollView的垂直布局为无界环境，当你给子视图设置maxHeight: .infinity时，系统无法判断高度上限，所以会默认使用内容的最小高度，导致子视图收缩。你可以通过GeometryReader获取当前屏幕的实际高度，显式给每个DetailView绑定该高度即可适配所有尺寸的watchOS屏幕：

修改后的容器代码：

import SwiftUI

struct ScrollViewContainer_swift: View {
    var body: some View {
        // 先获取外层容器的实际尺寸
        GeometryReader { proxy in
            ScrollView {
                // 去掉VStack默认间距，避免滑动时出现不必要的留白
                VStack(spacing: 0) {
                    DetailView()
                        .frame(height: proxy.size.height)
                    DetailView()
                        .frame(height: proxy.size.height)
                }
            }
            .ignoresSafeArea()
        }
    }
}

DetailView的原有代码不需要修改即可正常运行。

可选优化（watchOS 10+支持）

如果需要实现整页滑动的分页效果，可以给ScrollView添加分页相关修饰符，滑动体验更符合watchOS系统交互习惯：

ScrollView {
    VStack(spacing: 0) {
        DetailView()
            .frame(height: proxy.size.height)
        DetailView()
            .frame(height: proxy.size.height)
    }
    .scrollTargetLayout()
}
.scrollTargetBehavior(.viewAligned)
.ignoresSafeArea()

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