Flutter Web-如何在打开的抽屉状态下监听并关闭它

问题描述

我正在使用响应时间短的Web UI。而且我想在移动和台式机屏幕宽度特定的屏幕宽度上关闭打开的抽屉,因此,如果我拉伸浏览器,则抽屉应该关闭。

例如,我打开了抽屉(屏幕宽度小于500)

enter image description here

当屏幕宽度大于500时,我希望打开的抽屉自动关闭。

注意:打开抽屉时。我已经有一个代码来检查是否显示按钮菜单抽屉的屏幕宽度。但基本上,当用户打开抽屉然后突然拉开浏览器时,抽屉应该关闭。

enter image description here

下面的代码。感谢您的帮助

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size.width;

    return Scaffold(
      drawer: Drawer(),body: CustomNavBar(screenSize: size),);
  }
}

class CustomNavBar extends StatefulWidget {
  final double screenSize;
  const CustomNavBar({Key key,this.screenSize}) : super(key: key);

  @override
  _CustomNavBarState createState() => _CustomNavBarState();
}

class _CustomNavBarState extends State<CustomNavBar> {
  @override
  Widget build(BuildContext context) {
    if (Scaffold.of(context).isDrawerOpen && widget.screenSize > 500) {
      print("Drawer is Opened");
      Scaffold.of(context).openEndDrawer(); //animation error
      setState(() {});
    }

    return widget.screenSize > 500
        ? Container(color: Colors.red) //desktop screen
        : Center(
            //mobile screen
            child: IconButton(
              icon: Icon(Icons.menu),onPressed: () => Scaffold.of(context).openDrawer(),),);
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)