如何使用scrollDirection设置gridview项目的宽度和高度：Axis.horizontal？答案

【问题标题】：How to set width and height of gridview item in flutter with scrollDirection: Axis.horizontal?如何使用scrollDirection设置gridview项目的宽度和高度：Axis.horizontal？
【发布时间】：2020-03-19 03:43:43
【问题描述】：

我需要在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，但是当我改为水平方向时，没有运气。

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

试着给childAspectRatio: YOUR_VALUE,

例如，

...
 GridView.count(
                physics: NeverScrollableScrollPhysics(),
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                crossAxisCount: 4,
                childAspectRatio: 1 / 1.1,
...

【讨论】：

感谢您的回答，我需要创建一个特定的卡片并显示网格水平方向。我试过了，但没有按预期工作。
我需要为每个 gridview 项目制作宽度为 130、高度为 100 的卡片并水平滚动。我只是用 listview 管理并将列作为 listview 项目并添加了两张卡片，但我必须管理我的数据并且不像 gridview 那样容易。我认为如果我可以设置网格视图项的宽度和高度将是一个最佳解决方案。
我认为除了使用 childAspectRatio 之外没有其他解决方案，请在这样的组合中使用它，使您的宽度比高度占用更多空间。
谢谢回复，我试试：）
我也在努力解决这个问题，我相信 childAspectRatio 不是解决方案。你可以让它适用于设备，但如果你改变屏幕尺寸，你就完蛋了。

【解决方案2】：

另一种方式也许你可以试试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,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

结果：

【讨论】：