如何在 Flutter Web 中使用 CheckBoxListTile 和 PopupMenuButton？

Question

我不想使用 CheckedPopupMenuItem 因为我的目标是有一个复选框供用户交互。 但是即使在 PopupMenuButton 的 CheckBoxListTile 中调用 setState，当我们点击它时它也不会重建。

这是代码：

PopupMenuButton(
  offset: Offset(100, 100),
  elevation: 5.0,
  child: _menuIcon,
  itemBuilder: (context) => [     
    PopupMenuItem(
      child: CheckBoxListTile(
               activeColor: kLeadingOrangeColor,
               value: isShow,
               onChanged: (value) => 
                   setState(() => isShow = value),
               title: checkboxLabel('Show'),
             ),
    ),
  ],
)

每次单击它时，尽管我调用了 setState，但似乎什么也没发生。 因此，为了让我看到从“选中”标记到“未选中”标记的变化，反之亦然，我不得不关闭并重新打开 PopupMenuButton。

Answer 1

在高低看了几个小时后，我发现这是最好的解决方案：（我认为这也适用于 CheckBox）

1. 将 CheckBoxListTile 包装在 StatefulBuilder 中
2. 使用 StatefulBuilder 的 SetState 来重建复选框。

这是新代码：

PopupMenuButton(
  offset: Offset(100, 100),
  elevation: 5.0,
  child: _menuIcon,
  itemBuilder: (context) => [     
    PopupMenuItem(
      child: StatefulBuilder(
               builder: (_context, _setState) => 
                          CheckBoxListTile(
                             activeColor: kLeadingOrangeColor,
                             value: isShow,
                             onChanged: (value) =>
                                 _setState(() => isShow = value),
                             title: checkboxLabel('Show'),
                          ),
             ),
    ),
  ],
)

请注意，我分别为围绕 Checkbox 小部件的 StatefulBuilder 命名参数 _context 和 _setState。 这样我们就可以将这个 StatefulBuilder 的 context 和 setState 与其他 StatefulWidget 区分开来。 以防万一有人使用 Blocs 之类的东西，它将使用正确的上下文。

因此，要重建 Checkbox，请使用 _setState 而不是 setState。

希望这可以帮助某人。

如果您有更好的解决方案，我愿意接受。 请随时在下面发表评论。 谢谢你。