Flutter for循环生成小部件列表

8xiog9wr  于 2023-03-31  发布在  Flutter
关注(0)|答案(5)|浏览(176)

我有这样的代码,但我希望它迭代一个整数数组以显示动态数量的子数组:

return Container(
  child: Column(
    children: <Widget>[
      Center(
        child: Text(text[0].toString(),
            textAlign: TextAlign.center),
      ),
      Center(
        child: Text(text[1].toString(),
            textAlign: TextAlign.center),
      ),
    ],
  ),
)

其中text变量是一个整数列表转换器字符串在这里.我试图添加一个函数来遍历数组并显示'孩子',但得到一个类型错误.不知道如何做到这一点,因为我是新的 dart 和Flutter.

gdx19jrr

gdx19jrr1#

你可以试试这个:

@override
  Widget build(BuildContext context) {
    List<int> text = [1,2,3,4];
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: Column(
          children: [
            for ( var i in text ) Text(i.toString())
          ],
        ),
      ),
    );

请注意,这是在dart更新到2.3版本时添加的。
在dart 2.3之前提供的另一种方法是:

@override
  Widget build(BuildContext context) {
    List<int> text = [1,2,3,4];
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: Column(
          children: List.generate(text.length,(index){
            return Text(text[index].toString());
          }),
        ),
      ),
    );
bvuwiixz

bvuwiixz2#

假设你想在Column小部件中循环一些小部件(例如Text()),你可以在children属性中添加一个循环。请参阅下面的示例:

Column(
   children: <Widget>[
      for (int i=0; i<3; i++)
         Text("Hello" + i)
   ],
)
wa7juj8i

wa7juj8i3#

您可以在此处尝试.map方法,

class Example extends StatelessWidget {

  List <int> exampleList =  [1,2,3,4];

  @override
  Widget build(BuildContext context) {
    return
      Container(
        child: Column(
            children: exampleList.map((i) => new Text(i.toString())).toList()
        ),
      );
  }
}

如果你的列表中有对象,这个方法会很方便。另外,**.map()方法.toList()**必须在最后使用。

uyhoqukh

uyhoqukh4#

您可以使用String列表的map方法。

Widget _getListWidgets(List<String> yourList){
    return Row(children: yourList.map((i) => Text(i)).toList());
  }

当你的列表有一个复杂的对象:

Widget _getListWidgets( List<YourObject> lstItens) {
  return Row(children: lstItens.map((i) => Text(i.name)).toList());
}
c2e8gylq

c2e8gylq5#

最好的方法是使用List.map()
这样就不必启用“控制流集合”

Container(
        child: Column(
            children: myList.map((e) => new Text(e)).toList(),
          ),
   );

相关问题