flutter - 如何在 scrollDirection : Axis. horizo​​ntal flutter 中设置 gridview 项目的宽度和高度？

Question

我需要在 flutter 中制作一个 gridview 以在水平方向上以特定的高度和宽度列出卡片项目，当我尝试时，我总是在我的 gridview 中得到一个方形单元格，如果我改变我的容器高度和宽度则没有效果。

我试过如下

 child: GridView.count(
            scrollDirection: Axis.horizontal,
            // Create a grid with 2 columns. If you change the scrollDirection to
            // horizontal, this produces 2 rows.
            crossAxisCount: 2,
            // Generate 100 widgets that display their index in the List.
            children: List.generate(cuisineListAll.length, (index) {
              return Card(
                child: Container(
                  width: 330,
                  height: 100,
                  child: Text(
                    myListAll[index].name,
                    style: TextStyle(fontSize: 15),
                  ),
                ),
              );
            })),

有没有办法以我自己的固定尺寸显示我的卡片？我尝试了 flutter_staggered_grid_view，但是当我更改为水平方向时，运气不好。

Answer 1

也许你可以试试 SingleChildScrollView + Wrap 的另一种方法:

class WrapScrollViewPage extends StatelessWidget {
  const WrapScrollViewPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final widgets = [
      Container(width: 100, height: 30, color: Colors.red),
      Text('111', style: TextStyle(fontSize: 20)),
      Text('222', style: TextStyle(color: Colors.blue)),
      Container(width: 60, height: 50, color: Colors.orange),
      Container(width: 20, height: 30, color: Colors.green),
      Text('333'),
      Text('4444'),
      Text('555555'),
      Text('666666'),
    ];
    return Scaffold(
      appBar: AppBar(title: Text('SingleChildScrollView + Wrap')),
      body: Column(
        children: [
          SizedBox(
            width: ScreenUtil.screenWidth,
            height: 50,
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Wrap(
                direction: Axis.horizontal,
                spacing: 8,
                crossAxisAlignment: WrapCrossAlignment.center,
                children: widgets,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

结果: