如何通过控制 childAspectRatio 在 flutter 中显示 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

我找到了一种方法来动态设置最大子视图与我们的网格视图的纵横比。它是如何工作的？首先请看这个答案。我们如何在 overlayEntery

的构建过程中找到小部件的大小

之后，我们在 childAspectRatio.

中为我们的网格视图设置正确的宽高比（用 overlayEntery 测量）

Answer 2

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

Answer 3

我朋友做了一个pub包，跟你想实现的很像，支持无限滚动：waterfall_flow

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

（上图来自simple live web demo。）

（上图截自complex live web demo。）

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

Answer 4

我建议您使用现有的软件包，例如 flutter_staggered_grid_view because you certainly don't want to mess with the complexity of the layout. Then you choose a state management solution (I recommend the BLoC pattern)。关键是分配一个 ScrollController 来检查用户是否已经滚动到网格视图的底部。在这种情况下，您告诉状态管理解决方案从 API 中获取新项目，这会触发使用新数量重建网格视图。

下面是一个使用 StatefulWidget 的例子： flutter_staggered_grid_view infinite scroll from api feed

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

how to show the original height of items in PagedGridView in flutter by controlling the childAspectRatio

flutter

dart

flutter-layout

flutter-dependencies

infinite-scroll