Flutter抽屉导航管理插件drawer_manager的使用

特性

Drawer Manager 类能够通过自定义提供程序来交换 Scaffold 的主体内容。这与 Android 抽屉类似，它通过通知 Scaffold 主体所需的更改来实现这一点，从而提供了更干净的开发体验。

Open Drawer Hello, Flutter! Counter The MAC All Pages

注意：类似于 Flutter 的 TextEditingController，Drawer Manager 使用 Provider 的 ChangeNotifier 作为父类来管理用户选择并显示所选 Widget。

const drawerSelections = [
  HelloPage(),
  CounterPage(),
  TheMACPage()
];

final manager = Provider.of<DrawerManagerProvider>(context, listen: false);

return Scaffold(
    appBar: AppBar(title: "Some App Bar Title"),
    body: manager.body,
    drawer: DrawerManager(
        ...
        tileSelections: drawerSelections
    )
)

入门指南

安装 Provider 和 Drawer Manager

在终端运行以下命令：

flutter pub get provider
flutter pub get drawer_manager

或者在 pubspec.yaml 文件中安装：

dependencies:
  flutter:
    sdk: flutter

  ...
  provider: 6.0.2
  drawer_manager: 0.0.4

导入 Drawer Manager 和 Provider

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:drawer_manager/drawer_manager.dart';
...

添加 DrawerManagerProvider 到 MaterialApp 中的 ChangeNotifierProvider

[@override](/user/override)
Widget build(BuildContext context) {
  return ChangeNotifierProvider<DrawerManagerProvider>(
      create: (_) => DrawerManagerProvider(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: const MyHomePage(),
      )
  );
}

使用方法

设置抽屉选项

const drawerSelections = [
  HelloPage(),
  CounterPage(),
  TheMACPage()
];

设置抽屉管理器

Drawer Manager 能够通过 DrawerTile 类来管理选择。

drawer: DrawerManager(
    context: context,
    drawerElements: [
        const DrawerHeader(
            child: Padding(
                padding: EdgeInsets.only(bottom: 20),
                child: Icon(Icons.account_circle),
            ),
        ),
        DrawerTile(
            context: context,
            leading: const Icon(Icons.hail_rounded),
            title: Text('Hello'),
            onTap: () async {
                // 运行后端 Hello, Flutter 操作
            },
        ),
        ...
    ],
    tileSelections: drawerSelections
)

注意：DrawerTile 类是 ListTile 的子类，但必须有一个必需的 onTap 属性来保持选择顺序。第一个 DrawerTile 将与第一个抽屉选择对齐。你可以有比 DrawerTile 更多的选择，但不能有比选择更多的 DrawerTile。

替代用法

你也可以使用 Column 或 ListView 来设置抽屉元素，以便轻松地将 Drawer Manager 集成到现有的抽屉实现中。

使用 Column 组件

drawer: DrawerManager(
    context: context,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
          ...
      ]
    )
)

使用 ListView 组件

drawer: DrawerManager(
    context: context,
    child: ListView(
      children: [
          ...
      ]
    )
)

示例代码

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:drawer_manager/drawer_manager.dart';

import 'hello.dart';
import 'counter.dart';
import 'the_mac.dart';

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<DrawerManagerProvider>(
        create: (_) => DrawerManagerProvider(),
        child: MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(primarySwatch: Colors.blue),
          home: const MyHomePage(),
        ));
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  String _getTitle(int index) {
      switch (index) {
        case 0: return 'Hello';
        case 1: return 'Counter Sample';
        case 2: return 'Mobile Community';
        default: return '';
      }
  }

  Widget _getTitleWidget() {
    return Consumer<DrawerManagerProvider>(builder: (context, dmObj, _) {
      return Text(_getTitle(dmObj.selection));
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {

    const drawerSelections = [
      HelloPage(),
      CounterPage(),
      TheMACPage()
    ];
    
    final manager = Provider.of<DrawerManagerProvider>(context, listen: false);

    return Scaffold(
        appBar: AppBar(title: _getTitleWidget()),
        body: manager.body,
        drawer: DrawerManager(
          context,
          drawerElements: [
            const DrawerHeader(
              decoration: BoxDecoration(color: Colors.blue),
              child: Padding(
                padding: EdgeInsets.only(bottom: 20),
                child: Icon(
                  Icons.account_circle,
                  color: Colors.blueGrey,
                  size: 96,
                ),
              ),
            ),
            DrawerTile(
              context: context,
              leading: const Icon(Icons.hail_rounded),
              title: Text(_getTitle(0)),
              onTap: () async {
                // 运行后端 Hello, Flutter 操作
              },
            ),
            DrawerTile(
              context: context,
              leading: const Icon(Icons.calculate),
              title: Text(_getTitle(1)),
              onTap: () async {
                // 运行后端 Counter 操作
              },
            ),
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: 16),
              child: Divider(),
            ),
            DrawerTile(
              context: context,
              leading: const Icon(Icons.plus_one),
              title: Text(_getTitle(2)),
              onTap: () async {
                // 运行后端 Signup 操作
              },
            ),
          ],
          tileSelections: drawerSelections,
        ));
  }
}