使用 Flutter GridView 的 RenderFlex 溢出

Question

我使用 GridView.count() 在我的应用程序中显示动态数据，但我的每个 GridView 元素都没有完全显示。

这是它的样子：

这是我的代码：

Column(
      children: [
        buildSubheadingText('Mes projets'),
        buildVerticalSpace(5.0),
        GridView.count(
          shrinkWrap: true,
          physics: BouncingScrollPhysics(),
          //physics: NeverScrollableScrollPhysics(),
          crossAxisCount: 2,
          children: ContextManager.projects.map((value) {
              return ProjectCard(project: value);
            }).toList()
        )
      ],
    );

我已经按照 this topic 的答案中的建议在 true 处添加了 shrinkWrap 属性，在 BouncingScrollPhysics 或 NeverScrollableScrollPhysics 处添加了物理属性，但如您所见，它对我不起作用。

此外，我不想使用固定高度，因为这里的数据是动态的。

感谢您的帮助。

Answer 1

您可以使用 childAspectRatio 属性为网格设置自定义高度

示例：-

Column(
      children: [
        buildSubheadingText('Mes projets'),
        buildVerticalSpace(5.0),
        GridView.count(
          shrinkWrap: true,
          physics: BouncingScrollPhysics(),
          childAspectRatio: 2/3, //gives custom height to your grid element
          crossAxisCount: 2,
          children: ContextManager.projects.map((value) {
              return ProjectCard(project: value);
            }).toList()
        )
      ],
    );

Answer 2

GridViewchildren的大小取决于childAspectRatio，默认为1.0，您可以通过更改默认值childAspectRatio来增加高度。喜欢

  child: GridView.count(
        crossAxisCount: 2,
        childAspectRatio: 1 / 1.2, //width /height

Answer 3

请尝试使用这个库， staggered_grid_view

使用 Flutter GridView 的 RenderFlex 溢出

RenderFlex overflow using Flutter GridView

gridview

dynamic

overflow

dart

flutter