通过 for 循环创建颤振抽屉

Posted 2023-03-07

【中文标题】通过 for 循环创建颤振抽屉

【英文标题】：create flutter Drawer by for loop

【发布时间】：2021-08-09 14:12:12

【问题描述】：

我在 Flutter 中使用 GetX。我已经厌倦了每次在抽屉里都这样写。

            ListTile(
              title: Text('signIn'),
              onTap: () 
                Get.to(SigninPage());
              ,
            ),

所以我决定像这样将它们放在一个 Map 中，然后用 for 语句循环。

  Map _showWidgets = 
    "Home": () => MyHomePage(),
    "Word": () => WordPage(),
    "Sign In": () => SigninPage(),
    "Sign Up": () => SignupPage(),
    "Writing": () => WritingPage(),
    "Order": () => OrderPage(),
    "Pronounce": () => PronouncePage()
  ;
  List get showNames 
    return _showWidgets.keys.toList();
  

//at Drawer for loop
for (var name in showNames)
  ListTile(
    title: Text(name),
    onTap: () 
      Get.to(_showWidgets[name]);
    ,
  ),

但我得到一个错误：

“在构建过程中调用了setState()或markNeedsBuild()。”

怎么了？命名路由是唯一的解决方案吗？ 有没有用 for 循环创建 Drawer 的好方法？

当然它可以正常工作，但它并不优雅。

  Map _showWidgets = 
    "Home": () => Get.to(MyHomePage()),
    "Word": () => Get.to(WordPage()),
    "Sign In": () => Get.to(SigninPage()),
    "Sign Up": () => Get.to(SignupPage()),
    "Writing": () => Get.to(WritingPage()),
    "Order": () => Get.to(OrderPage()),
    "Pronounce": () => Get.to(PronouncePage())
  ;

【问题讨论】：

这个错误意味着你告诉 Flutter 重建 UI，而它已经在构建相同的小部件。通常是由侦听器和触发器一起触发引起的。在你的 GetX 逻辑中解决这个问题。

【参考方案1】：

试试这样的：

创建一个方法buildDrawerTiles:

List<ListTile> buildDrawerTiles(List<String> showNames)

   List<ListTile> tiles= [];

   for (var name in showNames)
    final tile = ListTile(
      title: Text(name),
      onTap: () 
      Get.to(_showWidgets[name]);
     ,
    );

    tiles.add(tile);
  

  return tiles;
 

然后在抽屉上，调用它：

buildDrawerTiles(showNames);