LazyVGrid布局下分页功能失效，无该组件时正常，如何修复？

你遇到的问题根源是LazyVGrid嵌套在List里——List的单元格布局会干扰LazyVGrid的懒加载触发逻辑，分页用的ProgressView不在LazyVGrid的可视检测范围内，自然无法触发加载。

直接按下面的方式修改代码就能解决：

1. 删掉外层的List，改用ScrollView承载LazyVGrid（LazyVGrid本身自带懒加载能力，不需要额外套List）；
2. 把分页用的ProgressView移到LazyVGrid内部作为最后一个元素，确保它进入可视区域时能触发onAppear；
3. 移除所有List相关的修饰符（比如.listRowBackground、.listStyle）。

修改后的完整代码：

VStack(alignment: .center) {
    ScrollView {
        LazyVGrid(columns: gridItemLayout, spacing: 20) {
            ForEach(viewModel.tvShowList, id: \.id) { tvShow in
                VStack {
                    KFImage.url(URL(string: Constant.POSTER_URL + tvShow.posterPath)!)
                        .placeholder {
                            Image("placeholder")
                                .scaledToFill()
                                .frame(width: 160, height: 100, alignment: .center)
                                .clipped()
                        }
                        .resizable()
                        .shadow(radius: 10)
                        .padding(.trailing, 20)
                        .scaledToFit()
                        .frame(width: 160, alignment: .center)
                    
                    Text("\(tvShow.name)")
                        .multilineTextAlignment(.center)
                        .lineLimit(1)
                        .frame(maxWidth: .infinity)
                        .font(.system(size: 14, weight: .bold))
                }
            }
            
            // 分页触发元素移到LazyVGrid内部
            if viewModel.page < viewModel.totalPage {
                HStack {
                    Spacer()
                    ProgressView()
                        .onAppear {
                            viewModel.page += 1
                            viewModel.getTvShowTopRated()
                        }
                    Spacer()
                }
                .frame(maxWidth: .infinity)
            }
        }
        .padding([.leading, .trailing], 15)
    }
}

关键说明： #

• ScrollView代替List：List的单元格是独立滚动单元，LazyVGrid作为单个单元格时，内部元素的滚动触发逻辑会失效；ScrollView直接承载LazyVGrid，能让其懒加载机制正常工作。
• ProgressView放在LazyVGrid内：只有成为LazyVGrid的子元素，它的onAppear才会被LazyVGrid的可视区域检测触发，从而启动下一页加载。

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