for-loop - 如何使用 DrawerHeader 和 ListView.builder 构建抽屉

Question

编辑2:
在花了一整天的时间之后。我终于设法使用 ListView.builder 并且我最初的问题不再是问题...... :)。但现在出现了一个更具体的问题。
显然，我遇到的所有问题都是由于在同一个抽屉上同时使用了 DrawerHeader 和 ListView.builder。我所有的尝试都会导致许多不同类型的错误。谁能告诉我如何在下面的代码中插入抽屉标题而不会出错？

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {

  List<String> items = [
    'Alimentação', 'Artigos para o lar', 'Beleza', 'Carros',
    'Computadores', 'Consertos', 'Construção', 'Ensino',
    'Esporte', 'Pet', 'Presentes', 'Religião',
    'Saúde', 'Serviços Gráficos', 'Serviços para o lar', 'Serviços profissionais',
  ];

  List<IconData> icones = [
    Icons.play_arrow, Icons.list, Icons.create_new_folder, Icons.add_alarm,
    Icons.insert_comment, Icons.drag_handle, Icons.ac_unit, Icons.adjust,
    Icons.airline_seat_recline_extra, Icons.forum, Icons.gamepad, Icons.hd,
    Icons.format_align_justify, Icons.keyboard, Icons.list, Icons.mail,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Teste de app',
        ),
      ),
      drawer: Drawer(
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, i){
            return ListTile(
              title: Text(items[i]),
              leading: Icon(icones[i]),
              trailing: Icon(Icons.chevron_right),
              onTap: (){
                Navigator.pop(context);
              },
            );
          },
        ),
      ),
      body: Container(
        child: Text(
            'Texto'
        ),
      ),
    );
  } 
}

编辑1:
在第一次帮助之后，我设法使用 ScrollView.builder 放置列表，但菜单不再滚动。经过一番研究，我将 ScrollView 包裹在一个固定高度的 SizedBox 中，并且它起作用了。唯一的问题是固定高度。我确定这不是最合适的方法，但是当我更改 double.infinity 的固定高度时，我得到一个错误:

在 performLayout() 期间引发了以下断言:
BoxConstraints 强制无限高。

你们能告诉我我做错了什么吗？

//----------------TEST--------------------------------
class TestDrawer extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return Column(
      children: <Widget>[
        SizedBox(
          height: double.infinity,
          child: ListView.builder(
            itemCount: kCategorias.length,
            itemBuilder: (_, int index){
              return ListTile(
                title: Text(
                  kCategorias[index],
                ),
                leading: Icon(kIcones[index]),
                trailing: Icon(Icons.play_arrow),
                onTap: (){
                  Navigator.pop(context);
                },
              );
            },
          ),
        ),
      ],
    );
  }
}

原帖:

为了具体化，我已经开始学习 Flutter，最后我有足够的信心去“玩”我的第一个项目。这是一个简单的与交付合作的公司的 Instagram 帐户目录。如果我能完成，我将在商店推出该应用程序，以帮助本地公司应对流行病和社会孤立。

ATM 我正在​​处理应用程序的抽屉，一切都运行良好。但我被卡住了。我想创建一个类别菜单。菜单项是 ListTiles。我有两个列表来管理这个菜单。一个包含类别名称的列表，另一个包含每个类别的图标。在 future 的时刻，我需要第三个列表，其中包含每个菜单项的链接。

好吧，我需要做的就是在每个 ListTile 项中迭代这些列表中的每一个。类别列表工作 100%。当我尝试在同一个 ListTile 小部件中迭代第二个列表时，问题就开始了。

我想到解决这个问题的第一件事当然是创建一个 for 循环，并在其中使用我想要的具有相同索引的尽可能多的列表。我在 DartPad 中测试了这种可能性，并且效果很好!它完全按照我想要的方式返回。问题是，为了工作，我需要使用 for... 循环，当我将相同的想法转移到我的应用程序代码时，它只适用于单行结构(没有大括号)。一旦我放入大括号，它就会返回一个错误(元素类型 'Set<ListTile>' 不能分配给列表类型'Widget'。)但是如果我使用单行结构，我将无法迭代多个列表。 (在我看来)迭代 2 个或更多列表的唯一可能方法是使用大括号形式。

我不知道我是否足够清楚，但是，我该如何解决这个问题？如何使用 for 循环在单个 Widget 中迭代 2 个或多个列表 - 在我的情况下为 ListTile()？

下面我将附上我遇到问题的类的源代码。
如果你想看整个项目并测试here是github上项目repo的链接。

提前谢谢!

//Builds a Drawer item using ListTile()
class BuildDrawerTile extends StatelessWidget {

List<String> list;
BuildDrawerTile({@required this.list});

@override

Widget build(BuildContext context) {

return Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    for(String item in list ) ListTile( //HERE EVERYTHING WORKS WELL AS I'M NOT USING CURLY BRACKETS
      title: Text(
        item,
        style: GoogleFonts.quicksand(
          textStyle: TextStyle(
            color: Color(0xFF808080),
            fontWeight: FontWeight.w300,
          ),
        ),
      ),
      leading: Icon(Icons.play_arrow), //HERE I NEEDED TO ITERATE SPECIFIC ICONS FOR EACH ITEM
      trailing: Icon(Icons.play_arrow),
      onTap: (){
        Navigator.pop(context); //IN THE FUTURE HERE I'LL ITERATE A THIRD LIST WITH THE DESTINATIONS
      },
    ),
  ],
);
}
}

Answer 1

我有点进退两难，你想遍历图标和目的地是什么意思，但我根据我的理解回答。

如果数据按顺序排列且数据长度相同，您可以使用多个 ListView 显示数据。

您可以使用简单的 ListView 来实现它。我希望下面的代码可以帮助你。
如果您有任何疑问，请随时询问。

   List<String> items = [
    'Alimentação', 'Artigos para o lar', 'Beleza', 'Carros',
    'Computadores', 'Consertos', 'Construção', 'Ensino',
    'Esporte', 'Pet', 'Presentes', 'Religião',
    'Saúde', 'Serviços Gráficos', 'Serviços para o lar', 'Serviços profissionais',
  ];

  List<IconData> icones = [
    Icons.play_arrow, Icons.list, Icons.create_new_folder, Icons.add_alarm,
    Icons.insert_comment, Icons.drag_handle, Icons.ac_unit, Icons.adjust,
    Icons.airline_seat_recline_extra, Icons.forum, Icons.gamepad, Icons.hd,
    Icons.format_align_justify, Icons.keyboard, Icons.list, Icons.mail,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Teste de app',
        ),
      ),
      drawer: Drawer(
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, i){
            return ListTile(
              title: Text(items[i]),
              leading: Icon(icones[i]),
              trailing: Icon(Icons.chevron_right),
              onTap: (){
                Navigator.pop(context);
              },
            );
          },
        ),
      ),
      body: Container(
        child: Text(
            'Texto'
        ),
      ),
    );
  } 

结果 :