Drawer Manager 类能够通过自定义 provider 来切换 Scaffold 的 body 内容。

打开抽屉

你好，Flutter！

计数器

The MAC

所有页面

特点

Drawer Manager 类似于 Android Drawer，通过切换 Widgets（例如 Android Fragments）来实现。它通过 DrawerManagerProvider 的 body 属性通知 Scaffold 的 body 内容的更改，从而实现您的选择。这种方法可以带来更简洁的开发体验。

    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
        )
    )

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

入门

安装 Provider 和 Drawer Manager

  flutter pub get provider
  flutter pub get drawer_manager

或者在 pubspec.yaml 中安装 Provider 和 Drawer Manager

    
dependencies:
  flutter:
    sdk: flutter

    ...
  provider: 6.0.2
  drawer_manager: 0.0.3

导入 Drawer Manager 和 Provider

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

将 DrawerManagerProvider 添加为 MaterialApp 的 ChangeNotifierProvider

  @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 {
                        // RUN A BACKEND Hello, Flutter OPERATION
                    },
                ),
                ...
            ],
            tileSelections: drawerSelections
        )

注意：DrawerTile 类是 ListTile 的子类，但它有一个必需的 onTap 属性，用于维护选项顺序。第一个 DrawerTile 将与第一个抽屉选项对齐。您可以拥有比 tile 更多的选项，但不能拥有比选项更多的 DrawerTile。

替代用法

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

与 Column Widget 一起使用

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

与 ListView Widget 一起使用

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

附加信息

要支持此存储库，请查看 SUPPORT.md 文件。

要查看包的文档，请 点击此链接

GitHub

查看 Github