【问题标题】:Flutter: IconButton onPressed responding in console but not in the displayFlutter:IconButton onPressed 在控制台中响应但在显示中没有响应
【发布时间】: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 在下面查看我的代码更改。你的建议奏效了。谢谢!

标签: flutter


【解决方案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');
            },

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-03-31
    • 1970-01-01
    • 2021-12-29
    • 2020-12-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多