如何通过控制childAspectRatio在颤动中显示PagedGridView中项目的原始高度

Question

我现在正在使用 Flutter 的无限向下滚动小部件。问题是每个子（项目）小部件的高度应该彼此不同。
在 PagedGridView 中，有一个名为 childAspectRatio 的属性。 这是一个 double 类型的值，默认 1.0
我想让每个子小部件的高度根据其原始大小是灵活的。有没有根据项目的原始大小动态设置 childAspectRatio 的好方法？ 如果这是一种不可能的方法，是否有任何其他方法不使用无限滚动加载包来实现每个项目的高度灵活的网格视图和滚动加载？ 如何做到这一点？

Widget build(BuildContext context) {
  var size = MediaQuery.of(context).size;
  final double itemWidth = size.width / 2;
  double itemHeight = 0.0;

  _displayItem (BuildContext context, Widget item, int index) {
    double itemHeight = MediaQuery.of(context).size.height;
    print(itemHeight);
    return item;
  }

  return PagedGridView<int, Widget>(
    showNewPageProgressIndicatorAsGridChild: true,
    showNewPageErrorIndicatorAsGridChild: true,
    showNoMoreItemsIndicatorAsGridChild: true,
    pagingController: _pagingControllerForDummy,
    builderDelegate: PagedChildBuilderDelegate<Widget>(
      itemBuilder: (context, item, index) => _displayItem(context, item, index),
    ), 
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      childAspectRatio: itemWidth / itemHeight,
      crossAxisCount: 2,
    ),
  );
}

Answer 1

我建议您使用像flutter_staggered_grid_view 这样的现有包，因为您当然不想弄乱布局的复杂性。然后你选择一个状态管理解决方案（我推荐BLoC pattern）。关键是分配一个ScrollController 来检查用户是否已经滚动到网格视图的底部。在这种情况下，您告诉您的状态管理解决方案从 API 中获取新项目，这会触发使用新数量重建您的网格视图。

这是一个使用 StatefulWidget 的示例： flutter_staggered_grid_view infinite scroll from api feed

Answer 2

我朋友做了一个 pub 包，看起来和你想实现的差不多，支持无限滚动：waterfall_flow

他还使用 Flutter Web 制作了一个live demo，您可以先玩一下演示，然后再决定它是否适合您的需求。

（上图取自simple live web demo。）

（上图取自complex live web demo。）

如果您有任何其他问题，您可以在这里直接评论（我可以请他回答）或通过 GitHub 与他联系，或加入我们在包描述中列出的 QQ 讨论组 - 我们在那里非常活跃，并将回答你关于这个包、其他包的任何问题，或者只是一般的 Flutter 问题。

Answer 3

我找到了一种方法，可以动态地将最大孩子的纵横比设置为我们的 Grid 视图。它是如何工作的 ？首先请看这个答案。在构建过程中我们如何使用overlayEntery找到小部件的大小

How to get a height of a Widget?

之后，我们将正确的纵横比（使用 overlayEntery 测量）设置为 childAspectRatio 中的网格视图。

Answer 4

制作两个列表视图并连接滚动控件。添加新元素时，您可以通过查看列表视图的 maxScrollExtends 值找出哪个更短。