遍历列表以在 Flutter 中呈现多个小部件

在 Flutter 中，我们可以使用列表（List）或数组（Array）来存储多个数据。如果要以相同的方式在应用程序中显示每一个数据，我们可以遍历列表并为每个数据创建一个小部件来呈现。在本文中，我们将学习如何使用Flutter遍历列表以在应用程序中呈现多个小部件。

步骤

以下是在Flutter中遍历列表以呈现多个小部件的步骤：

1. 首先，创建一个包含数据的列表。这里我们将使用一个包含数字数据的简单列表。

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

2. 接下来，创建一个widget函数, 从列表中获取数据（例如数字），并将其传递到我们的自定义widget中。这里我们将创建一个名为NumberItem的Widget，并将数字作为参数传递。

Widget NumberItem(int number){
 return Text('Number: $number');
}

3. 现在，我们可以遍历列表并为每个数字创建一个小部件。我们可以使用循环（例如for循环）遍历列表，并调用NumberItem widget函数来为每个数字创建一个小部件。在这里，我们将使用ListView.builder widget，它将为我们处理很多显示逻辑。

ListView.builder(
    itemCount: numbers.length,
    itemBuilder: (context, index) {
       return NumberItem(numbers[index]);
    },
);

这是一个完整的示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

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

    // This is our custom widget function
    Widget NumberItem(int number){
      return Text('Number: $number');
    }

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: ListView.builder(
          itemCount: numbers.length,
          itemBuilder: (context, index) {
            return NumberItem(numbers[index]);
          },
        ),
      ),
    );
  }
}

结论

在本文中，我们已经学习了如何使用Flutter遍历列表以在应用程序中呈现多个小部件。当您需要在应用程序中显示相同类型的数据时，这是一个非常有用的技巧。现在您可以掌握该技术并在Flutter应用程序中成功应用它。