flutter - 如何遍历 map 列表并在 flutter ListView 中显示文本小部件？

Question

我是 flutter 的新手 我试图通过内容列表中的 for 循环显示 ListView ，但我能够打印一个列表行，这是一次迭代，因为 return 只触发一次。如何遍历完整列表并显示所有listview元素？下面是 map 内容列表

 List<Map<String, String>> users = [
    {"name": "Staff 1", "status": "Online"},
    {"name": "Staff 2", "status": "Online"},
    {"name": "Staff 3", "status": "Offline"},
    {"name": "Vehicle 1", "status": "Available"},
    {"name": "Vehicle 2", "status": "Unavailable"},
    {"name": "Team 1", "status": "Active"},
    {"name": "Team 2", "status": "Not Active"},
  ];

下面是我要显示的 ListView 小部件的代码

  Widget ListViewBuilder() {
        for (var i = 0; i < users.length; i++) {
          print(i);
          return Expanded(
            child: ListView(
              children: <Widget>[
                GestureDetector(
                  onTap: () {
                    Navigator.pushNamed(
                      context,
                      '/chatscreen',
                    );
                  },
                  child: ListTile(
                      leading: CircleAvatar(
                          radius: 20,
                          backgroundImage: AssetImage("assets/profileavatar.png")),
                      title: Text(users[i]['name']),
                      subtitle: Text("User -ID"),
                      trailing: Row(
                          mainAxisAlignment:
                              MainAxisAlignment.spaceBetween, // added line
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            Text(
                              users[i]['status'],
                              style: TextStyle(
                                color: Colors.green,
                                fontSize: 20,
                          ),
                 ),                          
              ],
            ),
          );
        }
      }

这将只显示列表中的第一个元素，我怎样才能显示列表用户中存在的所有 ListView 元素？任何建议都会有所帮助

Answer 1

这里的问题是 - 您在第一个循环中返回结果。这就是为什么您只能获得列表中的第一个元素。

您需要在 ListView 小部件中遍历您的 map 。

List<Map<String, String>> users = [
    {"name": "Staff 1", "status": "Online"},
    {"name": "Staff 2", "status": "Online"},
    {"name": "Staff 3", "status": "Offline"},
    {"name": "Vehicle 1", "status": "Available"},
    {"name": "Vehicle 2", "status": "Unavailable"},
    {"name": "Team 1", "status": "Active"},
    {"name": "Team 2", "status": "Not Active"},
  ];

Widget ListViewBuilder(BuildContext context) {
      return Expanded(
        child: ListView(
          children: <Widget>[
            ...users.map( (u) => 
            <Widget> [GestureDetector(
              onTap: () {
                Navigator.pushNamed(
                  context,
                  '/chatscreen',
                );
              },
              child: ListTile(
                  leading: CircleAvatar(
                      radius: 20,
                      backgroundImage: AssetImage("assets/profileavatar.png")),
                  title: Text(u['name']),
                  subtitle: Text("User -ID"),
                  trailing: Row(
                      mainAxisAlignment:
                          MainAxisAlignment.spaceBetween, // added line
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Text(
                          u['status'],
                          style: TextStyle(
                            color: Colors.green,
                            fontSize: 20,
                          ),
                        ),
                        SizedBox(
                          width: 20,
                        ),
                        InkWell(
                          onTap: () {
                            Navigator.pushNamed(
                              context,
                              '/viewlocation',
                            );
                          },
                          child: Icon(
                            Icons.add_location,
                            color: Colors.green,
                            size: 40,
                          ),
                        ),
                        SizedBox(
                          width: 20,
                        ),
                        Container(
                          decoration: BoxDecoration(
                              color: Colors.green,
                              border: Border.all(
                                color: Colors.green,
                              ),
                              borderRadius:
                                  BorderRadius.all(Radius.circular(20))),
                          child: InkWell(
                            onTap: () async {
                              const number =
                                  '08592119XXXX'; //set the number here
                              bool res =
                                  await FlutterPhoneDirectCaller.callNumber(
                                      number);
                            },
                            child: Icon(
                              Icons.call,
                              color: Colors.white,
                              size: 40,
                            ),
                          ),
                        )
                      ])),
            ),
            Divider(
              color: Colors.black,
              endIndent: 10,
              indent: 10,
            )
            ]).expand((element) => element).toList()
            ,
          ],
        ),
      );
 
  }

这里发生的事情很少:

• users.map() 将在列表的每个元素上运行提供的函数。

• 由于您想创建两个元素的迷你列表 - GestureDetector 和 Divider，该函数将返回小部件列表

• 您的 map 函数的结果将是 [[GestureDetector, Divider], [GestureDetector, Divider],...]。这就是我们运行 expand 来展平它的原因 ( https://api.dart.dev/stable/2.10.5/dart-core/Iterable/expand.html )

• 最后，使用扩展运算符 (...) (...users.map( (u) =>) 将元素卸载到包含列表中。因此:

child: ListView(
          children: <Widget>[
      [GestureDetector, Divider, GestureDetector, Divider]]

成为

child: ListView(
          children: <Widget>[
      GestureDetector, Divider, GestureDetector, Divider]