SwiftUI初始渲染时ScrollView内容尺寸返回0.0的解决方案咨询

问题根源 #

你使用的LazyVStack是懒加载组件，初始仅渲染屏幕可见范围内的内容，不会一次性加载所有列表项。这导致初始渲染时，GeometryReader只能拿到已渲染部分的尺寸（可能为0或仅可见区域高度），只有滚动触发更多内容加载后，才能获取完整的内容尺寸。

解决方案 #

方案1：替换LazyVStack为VStack（适合小数据量场景）

如果features数组数据量不大，直接将FeatureSet中的LazyVStack换成普通VStack，初始时所有内容会被完整渲染，ChildSizeReader就能拿到正确的完整尺寸：

struct FeatureSet: View {
    var features: [Feature]

    var body: some View {
        // 替换为VStack，确保初始渲染所有内容
        VStack(spacing: 0) {
            ForEach(Array(features.enumerated()), id: \.element.title) { index, feature in
                FeatureRow(title: feature.title, value: feature.value)
                    .id(feature.title)
                
                if index != features.count - 1 {
                    Divider()
                        .frame(height: 1)
                        .overlay(Color(hex: 0x808080, opacity: 0.2))
                }
            }
        }
    }
}

方案2：手动计算总高度（适合大数据量+保留LazyVStack的场景）

如果必须用LazyVStack优化性能，可通过计算单个列表项高度累加得到总尺寸：

1. 若FeatureRow高度固定：

@State private var scrollViewSize: CGSize = .zero

// 在视图出现时计算总高度
.onAppear {
    let fixedRowHeight: CGFloat = 50 // 替换为你的FeatureRow实际高度
    let dividerHeight: CGFloat = 1
    let totalHeight = fixedRowHeight * CGFloat(features.count) + dividerHeight * CGFloat(max(0, features.count - 1))
    scrollViewSize = CGSize(width: UIScreen.main.bounds.width, height: totalHeight)
}

2. 若FeatureRow高度不固定，可通过隐藏的示例行获取高度后计算：

@State private var rowHeight: CGFloat = 0
@State private var scrollViewSize: CGSize = .zero

var body: some View {
    ScrollViewReader { proxy in
        ScrollView(.vertical) {
            ChildSizeReader(size: $scrollViewSize) {
                FeatureSet(features: features)
            }
        }
        // 隐藏的示例行用于获取单个行高
        .overlay(
            FeatureRow(title: "", value: "")
                .background(
                    GeometryReader { proxy in
                        Color.clear
                            .onAppear {
                                rowHeight = proxy.size.height
                                let dividerHeight: CGFloat = 1
                                let totalHeight = rowHeight * CGFloat(features.count) + dividerHeight * CGFloat(max(0, features.count - 1))
                                scrollViewSize = CGSize(width: UIScreen.main.bounds.width, height: totalHeight)
                            }
                    }
                )
                .hidden()
        )
    }
}

方案3：调整ChildSizeReader监听逻辑（辅助优化）

将ChildSizeReader直接嵌套在LazyVStack外部，并通过延迟赋值确保布局完成：

struct ChildSizeReader<Content: View>: View {
    @Binding var size: CGSize
    let content: () -> Content

    var body: some View {
        content()
            .background(
                GeometryReader { proxy in
                    Color.clear
                        .preference(key: SizePreferenceKey.self, value: proxy.size)
                }
            )
            .onPreferenceChange(SizePreferenceKey.self) { sizeValue in
                // 延迟赋值避免布局冲突
                DispatchQueue.main.async {
                    size = sizeValue
                }
            }
    }
}

// 使用时直接包裹LazyVStack
struct FeatureSet: View {
    var features: [Feature]
    @Binding var scrollViewSize: CGSize

    var body: some View {
        ChildSizeReader(size: $scrollViewSize) {
            LazyVStack {
                // 原有列表代码
            }
        }
    }
}

注意事项 #

• 若使用动态字体或自适应布局，手动计算高度可能存在误差，优先选择方案1或方案3。
• 延迟赋值可减少状态修改引发的重复布局冲突。

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