Flutter Drawer抽屉菜单与页面切换实战

许南星

发布时间：2026-10-16 | 3人浏览过

原创

在Flutter开发中，使用 Scaffold 构建包含 Drawer（抽屉菜单）、BottomNavigationBar（底部导航栏）和 FloatingActionButton（悬浮按钮）的应用界面是常见需求。本文将通过一个完整的示例，展示如何利用状态组件管理页面索引，并实现侧滑菜单与底部选项卡的联动切换。

一、核心组件功能解析

要构建此类界面，主要依赖以下几个核心控件：

Scaffold: 提供了应用的默认材料设计布局结构，包含App Bar、Body、Drawer等属性。
Drawer: 用于显示侧边栏菜单，通常支持从屏幕左侧滑动进入。
BottomNavigationBar: 底部导航组件，用于在3到5个视图之间进行快速切换。
StatefulWidget: 因为需要管理当前选中的页签索引（currentIndex）并触发布局更新，所以必须使用有状态组件。

二、Step-by-Step 实现步骤

第1步：创建独立的抽屉菜单组件

目的：将抽屉内容封装为独立Widget，保持主逻辑清晰。
入口：新建 mydrawer.dart。
动作：使用 StatelessWidget 构建 Drawer 内容。通常包含头部（用户信息/头像）和主体（列表菜单）。利用 MediaQuery.removePadding 移除顶部默认空白，并使用 Column 结合 Expanded 确保列表填满剩余空间。

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Drawer(
      elevation: 30,
      child: MediaQuery.removePadding(
        context: context,
        removeTop: true, // 移除标题栏下方默认的间距
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            // 头部区域
            Padding(
              padding: const EdgeInsets.only(top: 30.0),
              child: Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 15.0),
                    child: ClipOval(
                      child: Image.asset(
                        "images/cc.png",
                        width: 60,
                      ),
                    ),
                  ),
                  Text(
                    "jon",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  )
                ],
              ),
            ),
            // 菜单列表区域
            Expanded(
              child: ListView(
                children: <Widget>[
                  ListTile(
                    leading: const Icon(Icons.person),
                    title: const Text('Personal'),
                  ),
                  ListTile(
                    leading: const Icon(Icons.message),
                    title: const Text('information'),
                  ),
                  ListTile(
                    leading: const Icon(Icons.settings),
                    title: const Text('about'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

第2步：构建主页面状态管理类

目的：管理应用的全局状态，包括当前激活的页面索引和页面数据源。
入口：新建 MainPage.dart。
动作：继承 StatefulWidget。在 _MainPageState 中定义两个关键变量：allPages 存储所有业务页面实例，currentIndex 记录当前选中的底部Tab索引。

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

  @override
  State<StatefulWidget> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  // 定义所有可展示的页面
  var allPages = [
    HomePage(),
    ContactPage(),
    FindPage(),
    MyPage()
  ];
  
  // 当前选中的底部导航索引
  var currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("App Name"),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.share),
            onPressed: () {},
          ),
        ],
      ),
      // 绑定抽屉组件
      drawer: const MyDrawer(),
      // 主体内容根据 currentIndex 动态变化
      body: allPages[currentIndex],
      backgroundColor: Colors.green,
      bottomNavigationBar: ..., // 见下一步
      floatingActionButton: ..., // 见下一步
    );
  }
  void _onAddNum(){
    // 悬浮按钮点击事件
  }
}

第3步：配置底部导航栏与交互逻辑

目的：实现底部Tab的渲染及点击切换页面的功能。
入口：在上述 Scaffold 内部添加 bottomNavigationBar。
参数：currentIndex 控制高亮项；items 定义图标和标签；onTap 回调处理索引变更。
完成状态：点击不同Tab时，页面内容平滑切换。

bottomNavigationBar: BottomNavigationBar(
  currentIndex: currentIndex,
  type: BottomNavigationBarType.fixed,
  unselectedItemColor: Colors.grey,
  selectedItemColor: Colors.blue,
  items: const [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: "首页",
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: "通讯录",
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.find_in_page),
      label: "发现",
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.flip_outlined),
      label: "我的",
    ),
  ],
  onTap: (index) {
    setState(() {
      print("the index is :$index");
      currentIndex = index;
    });
  },
),

第4步：添加悬浮操作按钮（FAB）

目的：提供全局快捷操作入口。
动作：在 Scaffold 中添加 floatingActionButton 属性。这里将其绑定到类方法 _onAddNum，实际项目中可根据需求执行具体逻辑（如增加计数、打开新表单等）。

floatingActionButton: FloatingActionButton(
  child: const Icon(Icons.add),
  onPressed: _onAddNum,
),

三、注意事项与排错

图片资源路径：示例中使用了 Image.asset("images/cc.png")，请确保在项目 pubspec.yaml> 中已正确声明该图片资源的路径，否则运行时会报错或显示裂图。
导入依赖：确保 MainPage.dart 中引入了所有子页面（如 HomePage.dart 等）以及抽屉组件的文件路径正确。
布局高度冲突：如果抽屉内容过多，建议在 ListView 外层包裹 SingleChildScrollView 或使用 Expanded + ListView 组合以防止溢出错误（Overflow）。示例中已采用推荐组合方式。