Flutter：IconButton onPressed 在控制台中响应但在显示中没有响应

Posted 2023-02-23

【中文标题】Flutter：IconButton onPressed 在控制台中响应但在显示中没有响应

【英文标题】：Flutter: IconButton onPressed responding in console but not in the display

【发布时间】：2020-06-28 23:37:39

【问题描述】：

我是 Flutter 的新手，正在尝试构建一个响应式 Web 应用程序。到目前为止，我工作的代码是当屏幕宽度缩小到一定大小时，导航栏及其项目被压缩成一个菜单图标按钮（Flutter 的 IconButton）。这行得通。不起作用的是，当我单击 IconButton 时，新的导航栏不会弹出，即使控制台显示我正在单击它。 DrawerItem() 只是一个包装在容器中的文本小部件。在几段代码之后，您可以看到控制台吐出响应。当我调整屏幕大小或单击图标按钮时，屏幕或控制台中没有任何错误。我还尝试使 MNavigationBar 成为有状态的小部件并将 setState 添加到 onPressed 属性，当前问题没有任何变化，并且发生了同样的事情。

class MNavigationBar extends StatelessWidget 
  const MNavigationBar(Key key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Container(
      height: 80,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(
            icon: Icon(
              Icons.menu,
            ),
            onPressed: () 
              NavigationDrawer();
              print('Menu Icon pressed');
            ,
          ),
          NavBarLogo(),
        ],
      ),
    );
  

class NavigationDrawer extends StatelessWidget 
  const NavigationDrawer(Key key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Container(
      width: 260,
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black,
            blurRadius: 16,
          ),
        ],
      ),
      child: Column(
        children: <Widget>[
          NavigationDrawerHeader(),
          DrawerItem('Home'),
          DrawerItem('Events'),
          NavBarMenuDropdown(),
          DrawerItem('Store'),
          DrawerItem('Partners'),
          DrawerItem('About Us'),
        ],
      ),
    );
  

Performing hot restart...                                          148ms
Restarted application in 149ms.
Menu Icon pressed
Menu Icon pressed

【问题讨论】：

on press 函数下的 NavigationDrawer() 行只是创建 NavgationDrawer 无状态小部件的实例。您没有在任何地方绘制小部件。您应该将 Navigation Drawer 设置为基础 Scaffold 小部件中的抽屉属性，然后在 onPressed 函数中使用 Scaffold.of(context).openDrawer()

@AfridiKayal 在下面查看我的代码更改。你的建议奏效了。谢谢！

【参考方案1】：

谢谢你，Afridi Kayal！我完全按照你说的做了，效果很好！请看下面代码中的答案...

在我的主 Scaffold 小部件中，我添加了此代码并使用 ResponsiveBuilder 添加了逻辑

return ResponsiveBuilder(
      builder: (context, sizingInformation) => Scaffold(
        drawerEnableOpenDragGesture: false,
        drawer: sizingInformation.deviceScreenType == DeviceScreenType.Mobile
            ? NavigationDrawer()
            : null,

在我的 MNavigationBar 中，我对此进行了修改。

onPressed: () 
              Scaffold.of(context).openDrawer();       
              print('Menu Icon pressed');
            ,