添加列表< Widget>动态地ListView.children [英] Add List<Widget> to ListView.children dynamically

问题描述

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

I am trying to dynamically build part of my ListView.children[], yet I fail to push them to already existing array. Here is my simplified code:

  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()函数如下所示(简化):

Where _buildUserGroups() function looks like this (simplified):

  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)那样转储结果；但它失败并显示相同的错误消息:

I have tried to use _buildUserGroups(context).forEach(), _buildUserGroups(context).map(), or simply dumping the result like _buildUserGroups(context); yet it fails and says the same error message:

[dart]无法将元素类型"Iterable"分配给 列表类型为小部件".

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

我很确定这是一种方法，但是我无法弄清楚.对此我的任何帮助，在此问题上的任何帮助或建议都将受到高度赞赏.

I am quite sure the is a way how to do it, but I cannot figure it out. Any help or suggestion in respect to this matter would be highly appreciated as I am quite stuck at the moment.

推荐答案

如其他答案所指出的，_buildUserGroups(context)就是问题所在，因为它返回了小部件列表，从而导致了嵌套列表.

As pointed out by other answers, the _buildUserGroups(context) is the problem, as it returns a list of widgets, resulting in a nested list.

自Dart 2.3(在Google I/O '19的Flutter上引入)以来，您可以使用 spread运算符... ，它将解开内部列表，因此其元素成为该元素的元素.外部清单:

Since Dart 2.3 (introduced to Flutter at Google I/O '19), you can use the spread operator ..., which will unwrap the inner list, so its elements become elements of the outer list:

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

有关传播算子的功能的更多信息，请查看 Dart的语言之旅.

For more information about what the spread operator does, check out Dart's language tour.

原始答案(在Dart 2.3之前):

您可以将函数调用包装在Column或ExpansionTile中.

You can wrap the function call in a Column or ExpansionTile.

但是，这将新的窗口小部件引入窗口小部件树. 诚然，对性能的影响微乎其微，但在我看来，一种更干净的解决方案是构建这样的小部件列表:

However, this introduces a new widget into the widget tree. Admittedly, the impact on performance is minimal, but in my opinion, a cleaner solution would be to construct the list of widgets like this:

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

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

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

If you insist on an inline solution, you can also use .followedBy(...) to add items to the list:

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

这篇关于添加列表< Widget>动态地ListView.children的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！