Flutter使用flutter_zoom_drawer实现抽屉菜单显示异常问题求助

问题描述 #

跟着教程搭建移动端侧边菜单功能，代码编写完成后运行，显示效果和预期不符：

• 预期效果：侧边菜单正常显示效果
• 实际效果：侧边菜单异常显示效果
• 参考教程：YouTube侧边菜单实现教程

现有实现代码 #

Dashboard入口页 #

import 'package:flutter/material.dart';
import 'package:flutter_zoom_drawer/config.dart';
import 'package:flutter_zoom_drawer/flutter_zoom_drawer.dart';

import 'main_screen.dart';
import 'menu_page.dart';

class Dashboard extends StatefulWidget {
  const Dashboard({Key? key}) : super(key: key);

  @override
  State<Dashboard> createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {

  @override
  Widget build(BuildContext context) {
    return const ZoomDrawer(
      style: DrawerStyle.style1,
      mainScreen: MainScreen(),
      menuScreen: MenuPage(),
    );
  }
}

主页面MainScreen #

import 'package:dashboard/menu_widget.dart';
import 'package:flutter/material.dart';
import 'package:authentication/authentication.dart';
import 'package:firebase_auth/firebase_auth.dart';


class MainScreen extends StatefulWidget {
  const MainScreen({Key? key}) : super(key: key);

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: const Text('Main page'),
        leading: const MenuWidget(),
      ),
      body: ElevatedButton(
        onPressed: _signOut,
        child: const Text('Logout'),
      ),
    );
  }

  Future<void> _signOut() async {
    await FirebaseAuth.instance.signOut();
    if (!mounted) {
      return;
    }
    Navigator.of(context).pushAndRemoveUntil(
        MaterialPageRoute(
            builder: (context) => const Authentication()),
            (route) => false);
  }
}

菜单页MenuPage #

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) => const Scaffold(
    backgroundColor: Colors.indigo,
  );
}

菜单按钮组件MenuWidget #

import 'package:flutter/material.dart';
import 'package:flutter_zoom_drawer/flutter_zoom_drawer.dart';

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

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => ZoomDrawer.of(context)!.toggle(),
    );
  }
}

问题原因&修复方案 #

问题由两个核心错误导致：

1. ZoomDrawer组件被const修饰，且缺失新版flutter_zoom_drawer必需的布局参数。教程使用的是旧版本库，默认参数和新版不一致，加const会导致组件无法获取当前上下文的屏幕尺寸，直接出现布局错位。
2. MenuPage仅设置了Scaffold背景色，没有添加占满全区域的body容器，菜单区域没有正确撑开。

修复步骤 #

1. 修改Dashboard页的ZoomDrawer配置，移除const，补充对应布局参数：

@override
Widget build(BuildContext context) {
  return ZoomDrawer(
    style: DrawerStyle.style1,
    mainScreen: const MainScreen(),
    menuScreen: const MenuPage(),
    borderRadius: 24, // 主页面滑出时的圆角
    showShadow: true, // 显示主页面投影
    angle: 0, // style1样式下倾斜角度为0
    slideWidth: MediaQuery.of(context).size.width * 0.65, // 菜单滑出宽度占屏幕65%
    mainScreenScale: 0.2, // 主页面滑出时的缩放比例
    openCurve: Curves.fastOutSlowIn,
    closeCurve: Curves.fastOutSlowIn,
  );
}

2. 修改MenuPage代码，添加SafeArea和占满空间的容器，确保菜单区域正确撑开：

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.indigo,
      body: SafeArea(
        child: SizedBox(
          width: double.infinity,
          height: double.infinity,
          padding: const EdgeInsets.all(16),
          // 后续可在此处添加菜单列表项
        ),
      ),
    );
  }
}

修改完成后重新运行应用即可显示预期效果。

内容的提问来源于stack exchange，提问作者Alex Petru