SwiftUI列表分页加载时大空白区域的消除方法

我是SwiftUI新手，在实现列表分页功能时遇到问题：每次加载新页面都会出现一块大空白区域，截图如下：

List视图代码 #

List {
    LazyVGrid(columns: setGridLayout(), spacing: 20) {
        ForEach(viewModel.personPopularList, id: \.id) { person in
            PeopleCardView(person: person)
                .listRowBackground(Color.white)
                .listRowSeparator(.hidden)
        }
        .id(UUID())
        .frame(maxWidth: .infinity)
    }
    .listRowBackground(Color.white)
    .listRowSeparator(.hidden)
}
.frame(maxWidth: .infinity)
.onAppear(perform: {
    UITableView.appearance().contentInset.top = -20
    UITableView.appearance().backgroundColor = UIColor.white
})
.listStyle(GroupedListStyle())

PeopleCardView代码 #

struct PeopleCardView: View {
    @State var person: PersonPopularResult
    
    var body: some View {
        ZStack(alignment: .center) {
            HStack(alignment: .center) {
                WebImage(url: URL(string: Constant.POSTER_URL + (person.profilePath ?? "")))
                    .placeholder {
                        Image("placeholder")
                    }
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 100, height: 100)
                    .clipShape(RoundedRectangle(cornerRadius: 10))
                    .overlay(RoundedRectangle(cornerRadius: 10)
                    .stroke(Color.mPurple, lineWidth: 3))
                Spacer()
                VStack(alignment: .leading) {
                    Text("\(person.name!)")
                        .fontWeight(.bold)
                        .lineLimit(1)
                        .font(.system(size: 21))
                        .font(.headline)
                    Text("Popolarity Rate: \(String(format: "%.3f", person.popularity!))")
                        .fontWeight(.bold)
                        .foregroundColor(.mPurple)
                        .lineLimit(1)
                        .font(.system(size: 14))
                        .padding(.top, -8)
                    Spacer()
                }
                .padding([.top, .leading], 10)
                Spacer()
            }
            .frame(width: 300, height: 100, alignment: .center)
            .padding()
            .background(
                RoundedRectangle(cornerRadius: 15, style: .continuous)
                    .fill(.white)
                    .overlay(RoundedRectangle(cornerRadius: 10)
                        .stroke(Color.mPurple, lineWidth: 3))
                    .shadow(radius: 7)
            )
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

问题排查与解决 #

1. 移除动态生成的UUID标识符
   你给ForEach外层的LazyVGrid内容加了.id(UUID())，每次刷新数据时这个随机ID都会变化，导致整个LazyVGrid被强制重建，引发布局跳动和空白。直接删除这行代码：

// 删掉此行
// .id(UUID())

2. 调整CardView的外层frame约束
   PeopleCardView最外层的.frame(maxWidth: .infinity, maxHeight: .infinity)会让卡片强制占据List行的全部可用高度，结合GroupedListStyle自带的行间距，容易产生额外空白。将其替换为自适应宽度的设置：

// 替换原外层frame
.frame(maxWidth: .infinity)
// 或者直接删除该行，让内部HStack的frame决定卡片高度

3. 优化List样式与全局内边距设置
   GroupedListStyle自带上下内边距，你用UITableView.appearance().contentInset.top = -20抵消的方式容易引发布局冲突。可以改用无额外内边距的PlainListStyle()，或者直接调整List的padding：

// 替换GroupedListStyle
.listStyle(PlainListStyle())
// 或者保留GroupedListStyle，去掉负内边距设置，改用List的padding
// .padding(.top, -20)

4. 确保分页数据是追加而非全量替换
   如果分页逻辑是直接替换整个personPopularList数组，会触发List全量刷新导致空白。正确的做法是追加新页数据：

// 分页加载时追加数据
viewModel.personPopularList.append(contentsOf: newPageData)

5. 检查网格布局的列宽设置
   如果setGridLayout()返回的列宽不合理（比如超出屏幕宽度），会导致LazyVGrid换行或出现空白。确保列宽自适应屏幕：

func setGridLayout() -> [GridItem] {
    // 示例：自适应1列，或根据屏幕宽度调整列数
    return [GridItem(.flexible())]
}

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