如何在Flutter中以特定模式显示小部件？

Question

我想以特定模式显示小部件。我尝试使用GridView，但似乎GridView只能在crossAxisCount上设置一个值。我希望它是3、2模式。我在this处引用了@chunhunghan答案，但该模式垂直为00、111、22、333、44、555模式。我希望它垂直为012、34、567、89模式。我已经附上了预期的输出。谢谢。

 GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, childAspectRatio: 1),
      itemCount: 10,
      itemBuilder: (context, index) {
        return Column(children: <Widget>[
          Icon(Icons.access_alarm,
              color: Colors.redAccent, size: 100.0),
          Text(index.toString())
        ],);
      })

OutputExpected Output

Answer 1

也许您可以只用2个项目用空白Container()“填充”行，如果该解决方法对您有用？

GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, childAspectRatio: 1),
      itemCount: 10,
      itemBuilder: (context, index) {
        return Column(children: <Widget>[
          Icon(Icons.access_alarm,
              color: Colors.redAccent, size: 100.0),
          Text(index.toString()),
          Container()
        ],);
      })

或检查索引是否为奇数或偶数，然后具有两个构建器函数，一个返回3个项目，另一个返回仅2个

Answer 2

保持简单，只需将Row和Column与MainAxisAlignment.center一起使用。这是工作中的DartPad和代码：

  itemBuilder(index) {
    return Column(children: [
      Icon(Icons.access_alarm, color: Colors.redAccent, size: 100.0),
      Text(index.toString())
    ]);
  }

  rowBuilder(start, end) {
    var length = end - start + 1;
    var itemArray = new List<Widget>(length);

    for (var index = 0; index < length; index++) {
      itemArray[index] = itemBuilder(start + index);
    }

    return Row(
        mainAxisAlignment: MainAxisAlignment.center, children: itemArray);
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      rowBuilder(0, 2),
      rowBuilder(3, 4),
      rowBuilder(5, 7),
      rowBuilder(8, 9),
    ]);
  }