Flutter：在 webview 中膨胀抽屉

Question

我在脚手架菜单中使用抽屉。当我将网络视图中的 window 变小时，抽屉消失并出现一个小按钮。从左侧打开菜单。

我想将抽屉保留在这个缩小版本中以获得完整 window 大小，但我得到一个静态菜单。我该如何更改？

代码：

Scaffold(
      drawer: DrawerMenu(),
      ...
        )

class DrawerMenu extends StatelessWidget {
  const DrawerMenu({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          Container(
            padding: EdgeInsets.all(appPadding),
            child: Image.asset("assets/images/mylogo.png"),
          ),
          DrawerListTile(
              title: 'Something',
              svgSrc: 'assets/icons/Dashboard.svg',
              tap: () {Navigator.pop(context);}),
          DrawerListTile(
              title: 'Somethingelse',
              svgSrc: 'assets/icons/BlogPost.svg',
              tap: () {Navigator.pop(context);}),
        ],
      ),
    );
  }
}`

Answer 1

抽屉属性在Scaffold中的用法是显示&隐藏抽屉

要使抽屉始终以完整 window 大小可见，请尝试根据屏幕宽度将其创建为单独的小部件

  @override
  Widget build(BuildContext context) {
    var isBig = MediaQuery.of(context).size.width > 600.0; // set width threshold
    return Scaffold(
      appBar: ...
      drawer: isBig ? null : DrawerMenu(), 
      body: isBig
              ? Row(
                  children: [
                    DrawerMenu(),
                    Expanded(
                      child: bodyContent,
                    ),
                  ],
                )
              : bodyContent;
    );

Flutter：在 webview 中膨胀抽屉

Flutter: Inflate drawer in webview

flutter

flutter-layout

flutter-web