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也适用）

将CheckBoxListTile包装在StatefulBuilder中
使用该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的上下文和setState与其他StatefulWidgets区分开来。万一有人使用Blocs之类的东西，它将使用正确的上下文。

因此，要重建复选框，请使用_setState而不是setState。

希望这对某人有帮助。

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

如何在Flutter Web中将CheckBoxListTile与PopupMenuButton一起使用？

1 个答案: