Flutter抽屉导航控制插件es_drawer_controller的使用

Flutter抽屉导航控制插件es_drawer_controller的使用

一个用于抽屉导航控制器的Flutter插件

屏幕截图

     ||

开始使用

一个示例可以在以下链接找到：这里

如上图所示，该控件可以快速创建出色的导航抽屉。

如何创建

1. 创建一个枚举并添加所有所需的菜单名称

   enum eDrawerIndex {
     diDivider, // 这是用来表示分隔符的
     diHome,
     diProfile,
     diShare,
     diRateApp,
     diAboutUS,
   }
   

2. 接下来，你需要从StatefulWidget创建一个类

   class MainNavigation extends StatefulWidget {
     // 这个字段是你需要添加你的菜单项的地方 { Ajmal }
     final List<ESDrawerItem<eDrawerIndex>> _cDrawerList = <ESDrawerItem<eDrawerIndex>>[
       const ESDrawerItem(
           type: eDrawerItemType.ditMenu,
           index: eDrawerIndex.diHome,
           labelName: 'Home',
           iconData: Icons.home),
       const ESDrawerItem(
           type: eDrawerItemType.ditMenu,
           index: eDrawerIndex.diProfile,
           labelName: 'My Profile',
           iconData: Icons.person),
       const ESDrawerItem(
           type: eDrawerItemType.ditDivider,
           index: eDrawerIndex.diDivider), // 在这里添加一个分隔符
       const ESDrawerItem(
           type: eDrawerItemType.ditLink,
           index: eDrawerIndex.diShare,
           labelName: 'Share',
           iconData: Icons.share),
       const ESDrawerItem(
         type: eDrawerItemType.ditLink,
         index: eDrawerIndex.diAboutUS,
         labelName: 'About US',
         iconData: Icons.group,
       ),
     ];
   
     [@override](/user/override)
     _MainNavigationState createState() => _MainNavigationState();
   }
   

3. 在上述类中，你需要添加一个字段 _cDrawerList，这是一个抽屉菜单项列表。该类具有以下属性，其中 T 是你创建的第一个枚举。因此：

   class ESDrawerItem<T> {
     final T index;
     final eDrawerItemType type;
     final String labelName;
     final IconData? iconData;
     final String? launchURL;
     final String imageName;
   

4. 现在你需要为上述类添加一个状态类，例如 _MainNavigationState。在这个类中，你可以返回一个 ESDrawerController 的实例

   ESDrawerController<eDrawerIndex>(
      assetLogo: 'assets/images/ic_launcher.png',
      title: 'Test Application',
      subTitle: 'www.erratums.com',
      screenView: screenView,
      screenIndex: drawerIndex,
      drawerList: widget._cDrawerList,
      drawerWidth: MediaQuery.of(context).size.width * 0.75,
      // 当用户点击菜单时，onDrawerCall 会被触发
      onDrawerCall: (ESDrawerItem drawerItem) => _changeIndex(drawerItem),
    );
   

5. 最后你应该编写一个 onDrawCall 函数来处理点击事件

   void _changeIndex(ESDrawerItem drawerItem) {
       switch (drawerItem.index) {}
   }
   

完整示例代码

import 'package:es_drawer_controller/es_drawer_controller.dart';
import 'package:flutter/material.dart';
import 'package:share_plus/share_plus.dart';
import 'package:url_launcher/url_launcher_string.dart';

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

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

// 示例主页屏幕 { Ajmal }
class HomePage extends StatelessWidget {
  final String title;
  const HomePage({required this.title});
  [@override](/user/override)
  Widget build(BuildContext context) =>
      Scaffold(appBar: AppBar(title: Text(title), centerTitle: true));
}

// 首先，你需要添加一个枚举来表示抽屉中的菜单
enum eDrawerIndex {
  diDivider, // 这是用来表示分隔符的
  diHome,
  diProfile,
  diShare,
  diRateApp,
  diAboutUS,
}

// 现在创建一个导航抽屉类
class MainNavigation extends StatefulWidget {
  // 这个字段是你需要添加你的菜单项的地方 { Ajmal }
  final List<ESDrawerItem<eDrawerIndex>> _cDrawerList =
      <ESDrawerItem<eDrawerIndex>>[
    const ESDrawerItem(
        type: eDrawerItemType.ditMenu,
        index: eDrawerIndex.diHome,
        labelName: 'Home',
        iconData: Icons.home),
    const ESDrawerItem(
        type: eDrawerItemType.ditMenu,
        index: eDrawerIndex.diProfile,
        labelName: 'My Profile',
        iconData: Icons.person),
    const ESDrawerItem(
        type: eDrawerItemType.ditDivider,
        index: eDrawerIndex.diDivider), // 在这里添加一个分隔符
    const ESDrawerItem(
        type: eDrawerItemType.ditLink,
        index: eDrawerIndex.diShare,
        labelName: 'Share',
        iconData: Icons.share),
    const ESDrawerItem(
      type: eDrawerItemType.ditLink,
      index: eDrawerIndex.diAboutUS,
      labelName: 'About US',
      iconData: Icons.group,
    ),
  ];

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

class _MainNavigationState extends State<MainNavigation> {
  Widget screenView = HomePage(title: 'Home Page');
  eDrawerIndex drawerIndex = eDrawerIndex.diHome;

  DateTime lastBackPressTime = DateTime.now();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ESDrawerController<eDrawerIndex>(
      assetLogo: 'assets/images/ic_launcher.png',
      title: 'Test Application',
      subTitle: 'www.erratums.com',
      screenView: screenView,
      screenIndex: drawerIndex,
      drawerList: widget._cDrawerList,
      drawerWidth: MediaQuery.of(context).size.width * 0.75,
      // 当用户点击菜单时，onDrawerCall 会被触发
      onDrawerCall: (ESDrawerItem drawerItem) => _changeIndex(drawerItem),
    );
  }

  void _changeIndex(ESDrawerItem drawerItem) {
    // 如果用户点击了相同的菜单，并且不是标记为链接或分享，则无需创建相同的类
    if (drawerItem.type == eDrawerItemType.ditMenu &&
        (drawerIndex == drawerItem.index || !mounted)) return;

    // 更新新的抽屉索引
    drawerIndex = drawerItem.index;
    switch (drawerIndex) {
      case eDrawerIndex.diHome:
        setState(() => screenView = HomePage(title: 'Home Page'));
        break;
      case eDrawerIndex.diProfile:
        setState(() => screenView = HomePage(title: 'Profile Page'));
        break;
      case eDrawerIndex.diShare:
        setState(() =>
            Share.share('https://github.com/ajumalp/es_drawer_controller'));
        break;
      case eDrawerIndex.diAboutUS:
        setState(() => launchUrlString('https://erratums.com'));
        break;

      default:
        break;
    }
  }
}