Flutter for循环生成小部件列表

Question

我有这样的代码，但我希望它遍历 integer 数组以显示动态数量的子项：

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变量是一个转换为字符串的整数列表。 我尝试添加 function 以遍历数组并显示“子项”，但出现类型错误。 不知道该怎么做，因为我是 Dart 和 Flutter 的新手。

Answer 1

你可以试试这个：

@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());
          }),
        ),
      ),
    );

Answer 2

你可以在这里尝试 .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() 。

Answer 3

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

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

Answer 4

最好的方法是使用List.map()

这样您就不必启用“控制流集合”

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

Answer 5

DartPad：代码片段

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(context) => MaterialApp(
    home: HomePage()
  );
}


class HomePage extends StatelessWidget {
  @override
  Widget build(context) => Scaffold(
    appBar: AppBar(title: Text("test")),
    body: SafeArea(
        child:Center(
          child:
          Row(
            children: [
              Container(
                width: MediaQuery.of(context).size.width-200.0,
                child: Content()
              )
            ]
          )
        )
    )
  );
}

class Content extends StatelessWidget {
  final List<String> elements = ["Zero", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "A Million Billion Trillion", "A much, much longer text that will still fit"];
  @override
  Widget build(context) => GridView.builder(
    itemCount: elements.length,
    gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
      maxCrossAxisExtent: 130.0,
      crossAxisSpacing: 20.0,
      mainAxisSpacing: 20.0,
    ),
    itemBuilder: (context, i) => Card(
      child: Center(
        child: Padding(
          padding: EdgeInsets.all(8.0), child: Text(elements[i])
        )
      )
    )
  );
}

你也这样做

return new ListView(
  children: new List.generate(10, (index) => new ListTile()),
);

Answer 6

您可以使用字符串列表的 map 方法。

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

当你的 List 有一个复杂的对象时：

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