Flutter隐藏抽屉菜单插件hidden_drawer的使用

简介

hidden_drawer 是一个基于 hidden_drawer_menu 的 Flutter 插件，用于实现隐藏式抽屉菜单。该插件允许用户通过滑动手势或点击图标来打开和关闭抽屉菜单。

特性

• 支持自定义菜单样式。
• 提供默认和自定义菜单选项。
• 可以轻松集成到现有项目中。

使用方法

添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  hidden_drawer: ^1.0.0

然后运行以下命令以安装依赖：

flutter pub get

示例代码

以下是一个完整的示例代码，展示了如何使用 hidden_drawer 插件。

示例代码

import 'package:flutter/material.dart';

// 导入默认隐藏抽屉示例
import 'exampleHiddenDrawer/example_hidden_drawer.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              width: 200.0,
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20.0),
                  ),
                  primary: Colors.blue,
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => ExampleHiddenDrawer()),
                  );
                },
                child: Text(
                  "默认隐藏抽屉示例",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

默认隐藏抽屉示例

接下来，我们来看一下如何实现一个默认的隐藏抽屉菜单。

示例代码

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

class ExampleHiddenDrawer extends StatefulWidget {
  [@override](/user/override)
  _ExampleHiddenDrawerState createState() => _ExampleHiddenDrawerState();
}

class _ExampleHiddenDrawerState extends State<ExampleHiddenDrawer> {

  final items = <ItemHiddenMenu>[
    ItemHiddenMenu(
      name: "首页",
      baseStyle: TextStyle(fontSize: 20, color: Colors.white),
      selectedStyle: TextStyle(fontSize: 22, fontWeight: FontWeight.w800, color: Colors.white),
      onTapFab: () {},
      initHiddenTab: true,
    ),
    ItemHiddenMenu(
      name: "设置",
      baseStyle: TextStyle(fontSize: 20, color: Colors.white),
      selectedStyle: TextStyle(fontSize: 22, fontWeight: FontWeight.w800, color: Colors.white),
      onTapFab: () {},
      initHiddenTab: true,
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return HiddenDrawerMenu(
      backgroundColorMenu: Colors.blue[900],
      menuItems: items,
      contentBelowShadow: false,
      slidePercent: 80,
      isBaseOpen: true,
      content: ContentHiddenDrawer(),
    );
  }
}

class ContentHiddenDrawer extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Center(
        child: Text(
          "主内容区域",
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

效果图

自定义菜单示例

如果你想自定义菜单的外观，可以使用 CustomMenu 组件。

示例代码

import 'package:flutter/material.dart';
import 'package:hidden_drawer_menu/custom_hidden_drawer/custom_menu.dart';

class ExampleCustomMenu extends StatefulWidget {
  [@override](/user/override)
  _ExampleCustomMenuState createState() => _ExampleCustomMenuState();
}

class _ExampleCustomMenuState extends State<ExampleCustomMenu> {

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CustomMenu(
      menuItems: [
        MenuItem("首页", Icons.home),
        MenuItem("设置", Icons.settings),
      ],
      builder: (context, animation, position) {
        return Transform(
          transform: Matrix4.translationValues(
            0.0,
            250.0 * (1.0 - animation.value),
            0.0,
          ),
          child: Container(
            color: Colors.blue[900],
            child: Center(
              child: Text(
                "自定义菜单",
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.white),
              ),
            ),
          ),
        );
      },
    );
  }
}