具有动态宽度的 Flutter 水平网格视图

Question

我试过使用 Flutter_staggered_grid_view，但它似乎更适合垂直滚动。

我的目标是拥有一个具有动态宽度的水平网格视图，使网格看起来自然而不分散

这就是我的（我删除了一些 UI 代码，但本质上是一样的）

GridView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: sourceList.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, childAspectRatio: .3),
  itemBuilder: (context, i) {
    final e = sourceList[i];
    return Text(
      e.name,
    );
  },
);

这就是我要找的东西

Answer 1

这是我使用三元运算符调整mainAxisCellCount所能达到的最大值。您可以根据最短和最长字符串的长度调整计数。

   Container(
            height: 180.0,
            child: StaggeredGridView.countBuilder(
              crossAxisCount: 4,
              itemCount: 8,
              scrollDirection: Axis.horizontal,
              itemBuilder: (BuildContext context, int index) =>  Container(
                child: Center(child: Container(
                    padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
                    child: Chip(
                        label: Text('${fruits[index]}', overflow: TextOverflow.visible, maxLines: 1, style: TextStyle(),)))),
              ),
              staggeredTileBuilder: (int index) => StaggeredTile.count(2, fruits[index].length > 3 ? fruits[index].length > 8 ? fruits[index].length > 2 ? 4 : 3 : 2 : 1),
              mainAxisSpacing: 0.0,
              crossAxisSpacing: 0.0,
            ),
          ),

具有动态宽度的 Flutter 水平网格视图

Flutter Horizontal gridview with dynamic width

flutter

dart

gridview

horizontal-scrolling

horizontalscrollview