listview - 动态添加 List 到 ListView.children

Question

我正在尝试动态构建我的 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 这样转储结果(上下文)；但它失败并显示相同的错误消息:

[dart] The element type 'Iterable' can't be assigned to the list type 'Widget'.

我很确定这是一种方法，但我无法弄清楚。任何关于此事的帮助或建议将不胜感激，因为我现在很困。

Answer 1

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

自 Dart 2.3(在 Google I/O '19 上引入 Flutter)以来，您可以使用展开运算符 ...，这将打开内部列表，所以它的元素成为外部列表的元素:

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

有关传播运算符的作用的更多信息，请查看 Dart's language tour .

---

原始答案(Dart 2.3 之前):

您可以将函数调用包装在 Column 或 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(...) ])
    ),
  );
}