LazyVStack中Spacer无法占满可用空间的解决方案咨询

需求：内容较少时Footer固定在屏幕底部；内容较多时，Footer仅在滚动到列表最底部时显示。

当前使用VStack可实现预期效果，但替换为LazyVStack后，Spacer无法展开填充可用空间，导致Footer无法固定在底部。以下是原代码：

struct ContentView: View {
  @Bindable var viewModel: MockViewModel // Just contains an array of data
  
    var body: some View {
      GeometryReader { reader in
        ScrollView {
          VStack { // Update this to LazyVStack
            if viewModel.dataSet.isEmpty {
              EmptyListView()
            } else {
              ForEach(viewModel.dataSet, id: \.id) { viewData in
                VStack(spacing: 0) {
                  DataCell(viewData: viewData)
                    .background()
                    .padding(.bottom, 16)
                  if (viewData.id != viewModel.dataSet.last?.id) {
                    Divider()
                  }
                }
              }
            }

            /* Footer that would expand to take up any unused space */
            VStack(spacing: 0) {
              Spacer()
              FooterView()
            }.frame(maxHeight: .infinity, alignment: .bottom)
          }.background()
            .frame(minHeight: reader.size.height)
        }
      }.ignoresSafeArea(edges:.bottom)
    }
}

核心原因是LazyVStack为懒加载容器，不会自动填充父视图的可用空间，仅根据子视图高度布局。下面提供两种适配方案：

方案1：固定单元格高度场景 #

如果列表项高度固定，可直接计算内容总高度，用透明视图填充空白区域，将Footer推到底部：

struct ContentView: View {
    @Bindable var viewModel: MockViewModel
    
    var body: some View {
        GeometryReader { screenGeo in
            ScrollView {
                LazyVStack(spacing: 0) {
                    if viewModel.dataSet.isEmpty {
                        EmptyListView()
                            .frame(minHeight: screenGeo.size.height)
                    } else {
                        ForEach(viewModel.dataSet, id: \.id) { viewData in
                            VStack(spacing: 0) {
                                DataCell(viewData: viewData)
                                    .background()
                                    .padding(.bottom, 16)
                                if viewData.id != viewModel.dataSet.last?.id {
                                    Divider()
                                }
                            }
                        }
                        
                        // 计算并填充空白高度
                        Color.clear
                            .frame(height: max(0, screenGeo.size.height - calculateContentHeight()))
                        
                        FooterView()
                    }
                }
            }
        }
        .ignoresSafeArea(edges: .bottom)
    }
    
    // 预估列表内容总高度
    private func calculateContentHeight() -> CGFloat {
        let cellHeight: CGFloat = 80 // 替换为你的DataCell实际固定高度
        let dividerHeight: CGFloat = 1
        let paddingPerCell: CGFloat = 16
        
        let totalCellsHeight = CGFloat(viewModel.dataSet.count) * (cellHeight + paddingPerCell)
        let totalDividersHeight = CGFloat(max(0, viewModel.dataSet.count - 1)) * dividerHeight
        
        return totalCellsHeight + totalDividersHeight
    }
}

方案2：动态单元格高度场景 #

如果列表项高度不固定，可通过监听内容实际高度，动态控制Footer的显示位置：

struct ContentView: View {
    @Bindable var viewModel: MockViewModel
    @State private var contentHeight: CGFloat = 0
    
    var body: some View {
        GeometryReader { screenGeo in
            ZStack(alignment: .bottom) {
                ScrollView {
                    LazyVStack(spacing: 0) {
                        if viewModel.dataSet.isEmpty {
                            EmptyListView()
                                .frame(minHeight: screenGeo.size.height)
                        } else {
                            ForEach(viewModel.dataSet, id: \.id) { viewData in
                                VStack(spacing: 0) {
                                    DataCell(viewData: viewData)
                                        .background()
                                        .padding(.bottom, 16)
                                    if viewData.id != viewModel.dataSet.last?.id {
                                        Divider()
                                    }
                                }
                            }
                        }
                    }
                    .background(
                        // 监听列表内容的实际高度
                        GeometryReader { geo in
                            Color.clear
                                .onAppear { contentHeight = geo.size.height }
                                .onChange(of: viewModel.dataSet) { _ in contentHeight = geo.size.height }
                        }
                    )
                }
                
                // 内容高度不足屏幕时，显示固定底部的Footer；否则隐藏（滚动到底部会显示列表末尾的Footer）
                if contentHeight < screenGeo.size.height {
                    FooterView()
                        .background(Color.white) // 避免被列表内容遮挡
                }
            }
        }
        .ignoresSafeArea(edges: .bottom)
    }
}

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