Flutter 动态生成每行自定义小部件计数的列表

我有下面的列表，它是以我需要的格式构建的，每行3个小部件

但这是硬编码的

我怎么能循环这个或一些更干净的解决方案，以便我可以重复多次，因为我想

就像现在我有4排。假设我想要10行，每个小部件3个，我不想复制粘贴10次

另外，我不知道我将得到多少行。这取决于一些外部数据。我能得到一些指导吗？谢谢

ListView(
    children: [
        Padding(
            padding: const EdgeInsets.only(right: 8, top: 8),
            child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                    Expanded(child: CustomWidget('test', 0)), // these numbers are indexes which differs for each widget
                    Expanded(child: CustomWidget('test', 1)),
                    Expanded(child: CustomWidget('test', 2)),
                ],
            ),
        ),
        Padding(
            padding: const EdgeInsets.only(right: 8, top: 8),
            child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                    Expanded(child: CustomWidget('test', 3)),
                    Expanded(child: CustomWidget('test', 4)),
                    Expanded(child: CustomWidget('test', 5)),
                ],
            ),
        ),
        Padding(
            padding: const EdgeInsets.only(right: 8, top: 8),
            child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                    Expanded(child: CustomWidget('test', 6)),
                    Expanded(child: CustomWidget('test', 7)),
                    Expanded(child: CustomWidget('test', 8)),
                ],
            ),
        ),
        Padding(
            padding: const EdgeInsets.only(right: 8, top: 8),
            child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                    Expanded(child: CustomWidget('test', 9)),
                    Expanded(child: CustomWidget('test', 10)),
                    Expanded(child: CustomWidget('test', 11)),
                ],
            ),
        ),
    ],
),

---

您可以将GridView与List.generate一起使用。将

myLength

设置为它应该生成的小部件的数量。在每个小部件中使用

[index]

从数组中获取特定数据。 例如：如果您有一个数组

myProducts

将长度设置为my

myProducts.length

，然后在内部使用

myProducts[index]

GridView.count(
   mainAxisSpacing: 6,
   crossAxisCount: 1,
   childAspectRatio: (200 / 67), // (width/height)
   children: List.generate(
      myLength, (index) {
         return Padding(
            padding: const EdgeInsets.only(right: 8, top: 8),
            child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                    Expanded(child: CustomWidget('test)),
                    Expanded(child: CustomWidget('test)),
                    Expanded(child: CustomWidget('test)),
                ],
            ),
        );
      }
   ),
),

---

您可以将GridView与List.generate一起使用。将

myLength

设置为它应该生成的小部件的数量。在每个小部件中使用

[index]

从数组中获取特定数据。 例如：如果您有一个数组

myProducts

将长度设置为my

myProducts.length

，然后在内部使用

myProducts[index]

GridView.count(
   mainAxisSpacing: 6,
   crossAxisCount: 1,
   childAspectRatio: (200 / 67), // (width/height)
   children: List.generate(
      myLength, (index) {
         return Padding(
            padding: const EdgeInsets.only(right: 8, top: 8),
            child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                    Expanded(child: CustomWidget('test)),
                    Expanded(child: CustomWidget('test)),
                    Expanded(child: CustomWidget('test)),
                ],
            ),
        );
      }
   ),
),

---

您可以使用

ListView.builder

ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) =>
            Padding(
              padding: const EdgeInsets.only(right: 8, top: 8),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Expanded(child: _customWidget('test')),
                  Expanded(child: _customWidget('test')),
                  Expanded(child: _customWidget('test')),
                ],
              ),
            ),
      ),

如果您有动态

列表

，您可以在

列表视图

中将列表长度设置为

项目计数

更新

带有“假简单列表项”的完整代码

import 'package:flutter/material.dart';

class Training extends StatefulWidget {
  @override
  _TrainingState createState() => _TrainingState();
}

class _TrainingState extends State<Training> {
  Map<int, List<String>> mMap;

  void _initMap() {
    mMap = Map();
    for (int i = 0; i < 100; i++) {
      List<String> subtitleList = List();
      for (int j = 0; j < 3; j++) {
        subtitleList.add("Sub $j of Title $i");
      }
      mMap[i] = subtitleList;
    }
  }

  @override
  void initState() {
    super.initState();
    _initMap();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:
      ListView.builder(
        itemCount: mMap.length,
        itemBuilder: (context, index) =>
            Padding(
              padding: const EdgeInsets.only(right: 8, top: 8),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: _getChildren(mMap[index]),
              ),
            ),
      ),
    );
  }

  List<Widget> _getChildren(List<String> list) {
    List<Widget> output = List();
    list.forEach((element) {
      output.add(_customWidget(element));
    });
    return output;
  }

  Widget _customWidget(String s) {
    return Expanded(child: Container(margin: EdgeInsets.all(8), child: Text(s)));
  }
}

导入“包装：颤振/材料.省道”；
课堂培训扩展了StatefulWidget{
@凌驾
_TrainingState createState（）=>\u TrainingState（）；
}
类_TrainingState扩展状态{
Map mMap；
void _initMap（）{
mMap=Map（）；
对于（int i=0；i<100；i++）{
列表字幕列表=列表（）；
对于（int j=0；j<3；j++）{
副标题列表。添加（“标题$i的子$j”）；
}
mMap[i]=字幕列表；
}
}
@凌驾
void initState（）{
super.initState（）；
_initMap（）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：
ListView.builder(
itemCount:mMap.length，
itemBuilder：（上下文，索引）=>
填充物(
填充：仅限常量边集（右：8，顶部：8），
孩子：排(
mainAxisAlignment:mainAxisAlignment.space，
children:_getChildren（mMap[index]），
),
),
),
);
}
列表_getChildren（列表）{
列表输出=列表（）；
list.forEach（（元素）{
添加（_customWidget（元素））；
});
返回输出；
}
Widget\u customWidget（字符串s）{
返回扩展（子：容器（边距：EdgeInsets.all（8），子：Text（s））；
}
}

您可以使用

ListView.builder

ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) =>
            Padding(
              padding: const EdgeInsets.only(right: 8, top: 8),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Expanded(child: _customWidget('test')),
                  Expanded(child: _customWidget('test')),
                  Expanded(child: _customWidget('test')),
                ],
              ),
            ),
      ),

如果您有动态

列表

，您可以在

列表视图

中将列表长度设置为

项目计数

更新

带有“假简单列表项”的完整代码

import 'package:flutter/material.dart';

class Training extends StatefulWidget {
  @override
  _TrainingState createState() => _TrainingState();
}

class _TrainingState extends State<Training> {
  Map<int, List<String>> mMap;

  void _initMap() {
    mMap = Map();
    for (int i = 0; i < 100; i++) {
      List<String> subtitleList = List();
      for (int j = 0; j < 3; j++) {
        subtitleList.add("Sub $j of Title $i");
      }
      mMap[i] = subtitleList;
    }
  }

  @override
  void initState() {
    super.initState();
    _initMap();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:
      ListView.builder(
        itemCount: mMap.length,
        itemBuilder: (context, index) =>
            Padding(
              padding: const EdgeInsets.only(right: 8, top: 8),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: _getChildren(mMap[index]),
              ),
            ),
      ),
    );
  }

  List<Widget> _getChildren(List<String> list) {
    List<Widget> output = List();
    list.forEach((element) {
      output.add(_customWidget(element));
    });
    return output;
  }

  Widget _customWidget(String s) {
    return Expanded(child: Container(margin: EdgeInsets.all(8), child: Text(s)));
  }
}

导入“包装：颤振/材料.省道”；
课堂培训扩展了StatefulWidget{
@凌驾
_TrainingState createState（）=>\u TrainingState（）；
}
类_TrainingState扩展状态{
Map mMap；
void _initMap（）{
mMap=Map（）；
对于（int i=0；i<100；i++）{
列表字幕列表=列表（）；
对于（int j=0；j<3；j++）{
副标题列表。添加（“标题$i的子$j”）；
}
mMap[i]=字幕列表；
}
}
@凌驾
void initState（）{
super.initState（）；
_initMap（）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：
ListView.builder(
itemCount:mMap.length，
itemBuilder：（上下文，索引）=>
填充物(
填充：仅限常量边集（右：8，顶部：8），
孩子：排(
mainAxisAlignment:mainAxisAlignment.space，
children:_getChildren（mMap[index]），
),
),
),
);
}
列表_getChildren（列表）{
列表输出=列表（）；
list.forEach（（元素）{
添加（_customWidget（元素））；
});
返回输出；
}
Widget\u customWidget（字符串s）{
返回扩展（子：容器（边距：EdgeInsets.all（8），子：Text（s））；
}
}

谢谢。但如果我这样做，我想索引会有问题。我需要传递每个小部件的索引。这将导致每行重复3个相同的小部件。我根据您的请求更新了我的帖子。当然，代码取决于您拥有的数据类型，谢谢。但如果我这样做，我想索引会有问题。我需要传递每个小部件的索引。这将导致每行重复3个相同的小部件。我根据您的请求更新了我的帖子。当然，代码取决于您拥有的数据类型。有没有办法修改此代码以获得正确的索引值？因为第一个索引值是0，我计划将该值发送到CustomWidget。对于第一个循环，我应该得到索引0，1，2，而不是0，0，0。下一个循环3、4、5等等。一种可能性是编写一些逻辑方法，该方法接收索引并执行计算并输出新的索引值以供使用。试图避免它。[index+1]或通过函数将逻辑应用于索引有没有办法修改它以获得正确的索引值？因为第一个索引值是0，我计划将该值发送到CustomWidget。对于第一个循环，我应该得到索引0，1，2，而不是0，0，0。下一个循环3、4、5等等。一种可能性是编写一些逻辑方法，该方法接收索引并执行计算并输出新的索引值以供使用。试图避免它。[index+1]或通过函数对索引应用逻辑