Flutter 中的交错网格视图 - 如何赋予瓷砖不同的宽度答案

【问题标题】：Staggered Grid View in Flutter - How to give tiles different widthsFlutter 中的交错网格视图 - 如何赋予瓷砖不同的宽度
【发布时间】：2020-11-12 15:07:21
【问题描述】：

我一直在尝试在 Flutter 中创建以下屏幕：

https://i.imgur.com/meBdNFz.png

到目前为止，我已经使用“交错网格视图”包制作了这个：

https://i.imgur.com/mR6pQ3A.png

抱歉无法上传图片..

但是，我仍然不知道如何为瓷砖使用不同的宽度。第一个图块需要填充大约 70% 的容器大小，而右边的则需要填充其余部分。

目前我有以下代码：

new StaggeredGridView.countBuilder(
          padding: EdgeInsets.all(30),
          crossAxisCount: 2,
          itemCount: 7,
          itemBuilder: (BuildContext context, int index) => new Container(
              margin: EdgeInsets.all(4),
              color: Colors.green,
              child: new Center(
                child: new CircleAvatar(
                  backgroundColor: Colors.white,
                  child: new Text('$index'),
                ),
              )),
          staggeredTileBuilder: (int index) => (index == 0)
              ? new StaggeredTile.count(2, 1)
              : (index % 2 == 0)
                  ? new StaggeredTile.count(1, 0.8)
                  : new StaggeredTile.count(1, 0.8),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
        )

【问题讨论】：

标签： flutter staggered-gridview

【解决方案1】：

你不需要

项目数：7

相反，只需使用

staggeredTiles: [StaggeredTile.extent(width in crossAxisCount, height in units)]

这是我的代码。尚未测试，但它应该接近您想要的。

body: StaggeredGridView.count(
    crossAxisCount: 10, //this indicates how much elements (or cards) you want to put in a row
    crossAxisSpacing: 6.0,
    mainAxisSpacing: 6.0,
    padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
    children: [
      Card(
        child: ListTile(
          //your code to customize here,
        ),
      ),          
      Card(
        child: ListTile(
          //your code to customize here,
        ),
      ),
      Card(
        child: ListTile(
          //your code to customize here,
        ),
      ),
      Card(
        child: ListTile(
          //your code to customize here,
        ),
      ),
      Card(
        child: ListTile(
          //your code to customize here,
        ),
      ),
      Card(
        child: ListTile(
          //your code to customize here,
        ),
      ),
      Card(
        child: ListTile(
          //your code to customize here,
        ),
      ),
    ],
    staggeredTiles: [
      StaggeredTile.extent(10, 200), //second parameter is for adjusting the height of the element
      StaggeredTile.extent(6, 150),
      StaggeredTile.extent(4, 150),
      StaggeredTile.extent(3, 150),
      StaggeredTile.extent(5, 150),
      StaggeredTile.extent(2, 150),
      StaggeredTile.extent(6, 150),
      StaggeredTile.extent(4, 150),
    ],
  ),

希望我的回答能让你满意:)

【讨论】：