flutter - 如何在颤动中制作具有不同图像高度的交错网格视图？

Question

我想要一个带有Card小部件的交错网格视图，我希望卡片的高度取决于正在加载的图像的高度。

由于我的构建方法太长，这是我在 gist 中的卡片视图代码：

https://gist.github.com/brendoncheung/2026a64410eddde20fa8ec740bbb9d84

第SizedBox7 行是我认为使卡具有恒定高度的原因，但如果我删除SizedBox它，它会崩溃。

如果我删除SizedBox，那么我会得到这个错误：

RenderFlex 子项具有非零弹性，但传入的高度约束是无界的。

我已确保所有ColumnandRow小部件的父级没有未绑定的约束。

这是我的StaggeredGridView代码：

  @override
  Widget build(BuildContext context) {
    return StaggeredGridView.countBuilder(
      crossAxisCount: 2,
      itemCount: items.length,
      itemBuilder: (context, index) => ItemWidget(
          item: items[index],
          onTap: (item) => Navigator.of(context).push(MaterialPageRoute(
              builder: (context) => DetailItemScreen(
                    item: item,
                  )))),
      staggeredTileBuilder: (index) => StaggeredTile.fit(1),
    );
  }

下面这两张图片是卡片小部件，另一张是带有调试油漆的，

标签： flutterdartstaggered-gridview

Answer 1

将我的StaggeredGridView设置与您的设置进行比较，唯一不同的是，我的这两个设置有助于解决视口问题。

physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,

但我同意尺寸大小的盒子可能是相同尺寸的高度。