时间戳

首页 > 解决方案 > 添加列表动态到 ListView.children

listview - 添加列表动态到 ListView.children

问题描述

我正在尝试动态构建我的一部分ListView.children[]，但我无法将它们推送到已经存在的数组。这是我的简化代码：

  Widget buildNavigationDrawer(BuildContext context) {
    return Drawer(
      child: ListView(
        // Important: Remove any padding from the ListView.
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(...code for header of drawer),

          _buildUserGroups(context).map((Widget item)=> item),

          ListTile(
            leading: Icon(Icons.account_circle),
            title: Text('Settings'),
            onTap: () {
              Navigator.push(
                  context,
                  FadeTransitionRoute(
                      builder: (context) => MainSettingsPage()));
            },
          ),
        ],
      ),
    );
  }

函数_buildUserGroups()看起来像这样（简化）：

  List<Widget> _buildUserGroups(BuildContext context) {
    var userGroup = List<Widget>();
    userGroup.add(Text("Users"));

    for (var i = 0; i < 5; i++) {
      userGroup.add(Text("User " + i.toString()));
    }

    return userGroup;
  }

我曾尝试使用_buildUserGroups(context).forEach(),_buildUserGroups(context).map()或简单地将结果转储为_buildUserGroups(context); 但它失败并显示相同的错误消息：

[dart] 元素类型“Iterable”不能分配给列表类型“Widget”。

我很确定这是一种方法，但我无法弄清楚。任何有关此事的帮助或建议都将受到高度赞赏，因为我现在很困惑。

标签： listviewdartflutter

解决方案

正如其他答案所指出的那样，这_buildUserGroups(context)是问题所在，因为它返回一个小部件列表，从而产生一个嵌套列表。

从 Dart 2.3 开始（在 Google I/O '19 上介绍到 Flutter），您可以使用扩展运算符...，它将展开内部列表，因此它的元素成为外部列表的元素：

Widget buildNavigationDrawer(BuildContext context) {
  return Drawer(
    child: ListView(
      children: [
        DrawerHeader(...),
        ..._buildUserGroups(context),
        ListTile(...)
      ],
    ),
  );
}

有关传播运算符的更多信息，请查看Dart 的语言之旅。

原始答案（在 Dart 2.3 之前）：

您可以将函数调用包装在 aColumn或ExpansionTile中。

但是，这会在小部件树中引入一个新小部件。诚然，对性能的影响很小，但在我看来，更简洁的解决方案是构建这样的小部件列表：

Widget buildNavigationDrawer(BuildContext context) {
  final items = <Widget>[]
    ..add(DrawerHeader(...))
    ..addAll(_buildUserGroups(context))
    ..add(ListTile(...));

  return Drawer(child: ListView(children: items));
}

如果您坚持使用内联解决方案，您还可以使用.followedBy(...)将项目添加到列表中：

Widget buildNavigationDrawer(BuildContext context) {
  return Drawer(
    child: ListView(
      children: [ DrawerHeader(...) ]
        .followedBy(_buildUserGroups(context))
        .followedBy([ ListTile(...) ])
    ),
  );
}

推荐阅读