Question

所以，我有一个包含 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

Answer 1

解决方案 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,
          );
        }),
      );
    }),
  );
}

使用行和列制作自定义网格视图

1 个答案: