Flutter侧边栏导航插件pro_drawer的使用

Flutter侧边栏导航插件pro_drawer的使用

简介

pro_drawer 是一个专业的、可动画化且高度自定义的侧边栏导航插件，适用于Flutter应用程序。它提供了丰富的参数和灵活的配置选项，可以帮助开发者轻松实现美观且功能强大的侧边栏。

示例图片

使用方法

以下是一个完整的示例代码，展示了如何在Flutter项目中使用 pro_drawer 插件。

完整示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pro Drawer Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LandingScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ProDrawer(
      xOffset: 250, // 侧边栏打开时页面与左侧的距离
      drawerHeader: ProDrawerHeader(), // 侧边栏头部UI
      drawerBackgroundColor: Color(0xfff6f6f6), // 侧边栏背景颜色
      drawerBody: DrawerBody(), // 侧边栏菜单主体
      initialPage: HomeScreen(), // 初始加载的页面
      drawerAnimationDuration: Duration(milliseconds: 300), // 侧边栏打开关闭的动画时长
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Text('Welcome to the Home Screen!'),
      ),
    );
  }
}

class DrawerBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.zero,
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.home),
          title: Text('Home'),
          onTap: () {
            Navigator.of(context).pop();
            // 跳转到主页
          },
        ),
        ListTile(
          leading: Icon(Icons.settings),
          title: Text('Settings'),
          onTap: () {
            Navigator.of(context).pop();
            // 跳转到设置页
          },
        ),
        ListTile(
          leading: Icon(Icons.exit_to_app),
          title: Text('Logout'),
          onTap: () {
            Navigator.of(context).pop();
            // 退出登录
          },
        ),
      ],
    );
  }
}

参数说明

ProDrawer 构造函数接受多个参数，用于自定义侧边栏的行为和外观。以下是主要参数的详细说明：

const ProDrawer({
  Key? key,
  this.drawerHeader, // 固定在侧边栏顶部的头部UI
  required this.drawerBody, // 侧边栏菜单主体UI
  required this.initialPage, // 初始加载的页面
  required this.xOffset, // 侧边栏打开时页面与左侧的距离
  this.drawerBackgroundColor, // 侧边栏的背景颜色
  this.footer, // 固定在侧边栏底部的UI
  required this.drawerAnimationDuration, // 侧边栏打开关闭的动画时长
  this.pageContainerDecorationWhileDrawerOpen, // 侧边栏打开时页面的装饰
  this.pageContainerCircularRadiusWhileDrawerOpen, // 侧边栏打开时页面的圆角半径，默认为15
}) : super(key: key);