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