Flutter中PagedGridView如何通过childAspectRatio实现子项自适应原高度？

首先明确：无法通过动态设置childAspectRatio实现不同子项高度自适应。SliverGridDelegateWithFixedCrossAxisCount的childAspectRatio是全局生效属性，所有网格子项都会使用同一个宽高比，不支持单item差异化配置。

你需要的是瀑布流网格布局配合分页加载能力，有两种实现路径：

方案1：保留现有分页逻辑，替换布局组件 #

如果你不想改动已有的flutter_paged包相关分页逻辑，可以搭配flutter_staggered_grid_view包的瀑布流组件使用：

1. 先引入依赖：

dependencies:
  flutter_staggered_grid_view: ^0.7.0

2. 替换原有的PagedGridView为PagedMasonryGridView（部分新版本分页包已内置支持，若你的版本没有，可使用PagedSliver配合MasonryGridView做自定义封装），示例代码如下：

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

Widget build(BuildContext context) {
  return PagedMasonryGridView<int, Widget>(
    pagingController: _pagingControllerForDummy,
    builderDelegate: PagedChildBuilderDelegate<Widget>(
      itemBuilder: (context, item, index) => item,
    ),
    crossAxisCount: 2,
    mainAxisSpacing: 8,
    crossAxisSpacing: 8,
  );
}

该组件不需要设置宽高比，会自动根据每个子项的实际高度调整布局，完全符合你要的效果。

方案2：不依赖第三方分页包，自定义实现分页加载 #

如果不想用flutter_paged包，可以自己监听滚动事件实现分页加载，搭配瀑布流组件使用：

1. 先定义分页相关状态变量：

List<Widget> _dataList = [];
int _currentPage = 1;
bool _isLoading = false;
bool _hasMore = true;
final ScrollController _scrollController = ScrollController();

2. 初始化时绑定滚动监听，加载第一页数据：

@override
void initState() {
  super.initState();
  _loadData();
  _scrollController.addListener(() {
    // 滚动到距离底部不足200px时触发下一页加载
    if (_scrollController.position.pixels >= _scrollController.position.maxScrollExtent - 200 && !_isLoading && _hasMore) {
      _loadMoreData();
    }
  });
}

// 加载数据逻辑
Future<void> _loadData() async {
  _isLoading = true;
  // 这里替换为你的实际接口请求逻辑
  final newData = await fetchPageData(_currentPage);
  setState(() {
    _dataList.addAll(newData);
    _hasMore = newData.length >= 10; // 假设每页10条，少于10条说明没有更多数据
    _isLoading = false;
  });
}

Future<void> _loadMoreData() async {
  _currentPage++;
  await _loadData();
}

@override
void dispose() {
  _scrollController.dispose();
  super.dispose();
}

3. 布局代码：

Widget build(BuildContext context) {
  return MasonryGridView.count(
    controller: _scrollController,
    crossAxisCount: 2,
    mainAxisSpacing: 8,
    crossAxisSpacing: 8,
    padding: const EdgeInsets.all(8),
    itemCount: _dataList.length + (_hasMore ? 1 : 0), // 多一个item用来放加载中占位
    itemBuilder: (context, index) {
      if (index == _dataList.length) {
        return const Center(child: Padding(
          padding: EdgeInsets.all(16),
          child: CircularProgressIndicator(),
        ));
      }
      return _dataList[index];
    },
  );
}

两种方案都不需要手动设置子项宽高比，子项高度会自动根据内容适配，实现你需要的两列不等高瀑布流效果。

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