Flutter 使用行和列创建自定义栅格视图

所以，我有一个包含12个元素的列表，并希望像网格一样在列和行中显示它们。 我的代码：-

Widget grid({int crossAxisCount, int mainAxisCount,double width}){
    int count=-1;
    return Column(
      children: List.generate(mainAxisCount, (index){
        count++;
        return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: List.generate(crossAxisCount, (index){
            count++;
            return serviceTile(
              serviceName: serviceNames[count],
              content: contents[count],
              fileName: serviceNames[count].toLowerCase(),
              width: width,
            );
          }),
        );
      }),
    );
  }

但我的代码从索引0到13，但它应该一直到11，以便解决以下错误：-

RangeError (index): Index out of range: index should be less than 12: 13

• 解决方案1

  Widget grid({int crossAxisCount, int mainAxisCount,double width}){
    int count=-1;
    return Column(
      children: List.generate(mainAxisCount, (index){
       // count++;
        return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: List.generate(crossAxisCount, (index){
            count++;
            return serviceTile(
              serviceName: serviceNames[count],
              content: contents[count],
              fileName: serviceNames[count].toLowerCase(),
              width: width,
            );
          }),
        );
      }),
    );
  }
  

• 解决方案2

  Widget grid({int crossAxisCount, int mainAxisCount,double width}){
  
    return Column(
      children: List.generate(mainAxisCount, (index1){
  
        return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: List.generate(crossAxisCount, (index2){
            int count = (mainAxisCount * index1) + index2;
            return serviceTile(
              serviceName: serviceNames[count],
              content: contents[count],
              fileName: serviceNames[count].toLowerCase(),
              width: width,
            );
          }),
        );
      }),
    );
  }