You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

SwiftUI中ScrollView包裹自定义ListItem后滚动异常且内容无法正常显示

异常根因

问题核心不是ScrollView的渲染bug,是GeometryReader在ScrollView的布局上下文里尺寸计算失效:

  • 垂直ScrollView的布局逻辑是不对内部内容的总高度做限制,所有内容按自身实际需要撑开高度,滚动区域随内容高度延伸。这种场景下,ScrollView不会给内部子视图传递固定的高度约束。
  • 写在ListItem内部的GeometryReader,在普通VStack的有限高度约束下可以拿到准确的父容器高度值,但进入ScrollView的无固定高度约束的上下文后,由于没有父级传入的有效高度值,geometry.size.height会直接返回0。你用这个值计算的海报高度geometry.size.height * 0.35最终就是0,导致海报被压缩到完全不可见。
  • 不嵌套ScrollView、直接放在普通VStack中的场景下,VStack的总高度是和屏幕匹配的有限值,会把准确的高度值逐层传递给GeometryReader,尺寸计算逻辑生效,所以所有内容能正常渲染。
修正方法

去掉对GeometryReader高度值的依赖,用SwiftUI原生的自适应尺寸逻辑布局海报区域即可解决:

  • 海报本身适合用固定宽高比自适应计算高度,不需要绑定父容器的动态高度,直接给图片设置宽高比约束就能实现自动适配。
  • 如果确实需要读取容器宽度做边距适配,只读取GeometryReader返回的宽度值即可——垂直ScrollView内的视图宽度是固定的(匹配屏幕宽度减去两侧边距),返回的宽度值是有效的,但无约束场景下返回的高度值始终是0。
  • 删除ListItem里多余的、包裹GeometryReader的外层ZStack嵌套,避免无效的尺寸占位把内部内容压缩为0高度。
修正后的ListItem核心实现
struct ListItem: View {
    var body: some View {
        VStack(spacing: 16) {
            // 发布者信息模块
            HStack {
                Image("steve")
                    .resizable()
                    .clipShape(Circle())
                    .aspectRatio(contentMode: .fit)
                    .frame(maxWidth: 44, maxHeight: 44)
                VStack(alignment: .leading, spacing: 2) {
                    Text("Steve Jobs")
                        .font(.headline)
                    Text("1 hour ago")
                        .font(.footnote)
                        .foregroundColor(.secondary)
                }
                Spacer()
            }
            
            // 海报与播放按钮模块
            ZStack(alignment: .center) {
                Image("poster_1")
                    .resizable()
                    .aspectRatio(16/9, contentMode: .fit)
                    .cornerRadius(8)
                    .shadow(color: Color.black.opacity(0.12), radius: 4, x: 1, y: 1)
                    .padding(.horizontal, 32)
                    .clipped()
                
                ZStack {
                    Rectangle()
                        .fill(Color.black.opacity(0.75))
                        .frame(width: 84, height: 84)
                        .cornerRadius(12)
                    Image(systemName: "play.fill")
                        .font(.system(size: 44, weight: .bold))
                        .foregroundColor(.white)
                }
            }
            
            // 影视标题与简介模块
            VStack(alignment: .leading, spacing: 8) {
                Text("Game of Thrones")
                    .font(.subheadline.weight(.bold))
                    .padding(.horizontal, 32)
                Text("Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss for HBO. ")
                    .font(.footnote)
                    .foregroundColor(.secondary)
                    .padding(.horizontal, 32)
                Text("Show more...")
                    .font(.footnote.weight(.bold))
                    .frame(maxWidth: .infinity, alignment: .trailing)
                    .padding(.trailing, 32)
                    .onTapGesture {
                        print("okay")
                    }
            }
        }
        .padding(.vertical, 16)
    }
}

内容的提问来源于stack exchange,提问作者DRN

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.24 10:27:01