用ExpansionTile或Column包裹

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

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

我很确定这是一种方法，但是我无法弄清楚。对此我的任何帮助都将不胜感激。

Answer 1

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

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

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>[];
  items.add(DrawerHeader(...));
  items.addAll(_buildUserGroups(context));
  items.add(ListTile(...));

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

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

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

Answer 2

用ExpansionTile或Column包裹

问题：

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

解决方案：1

ExpansionTile(
     title: Text("New List"),
     children:  _buildUserGroups(context).map((Widget item)=> item),
   )

解决方案：2

Column(
     children:  _buildUserGroups(context).map((Widget item)=> item),
   )

注意： 可迭代仅分配给Children:，因为它得到了List<Widget>。您正在为单个孩子widget设置可迭代，这就是为什么会出错的原因。

我希望这可以解决您的问题。祝您编码愉快！

Answer 3

我的想法过于复杂，我无法始终看到一个简单的解决方案。我最终将其包装在Column小部件中，该小部件解决了该问题：

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: _buildUserGroups(context),
),

动态将List <widget>添加到ListView.children

3 个答案:

用ExpansionTile或Column包裹