Flutter侧边抽屉导航插件slide_drawer的使用

Flutter侧边抽屉导航插件slide_drawer的使用

SlideDrawer 是一个在 Flutter 中轻松使用抽屉导航栏的插件，并且支持炫酷的滑动动画。下面是详细的使用方法。

SlideDrawer

示例动图

开始使用

首先，在你的 Flutter 项目中添加 slide_drawer 依赖。

$ flutter pub add slide_drawer

或者在 pubspec.yaml 文件中添加：

dependencies:
  slide_drawer: ^1.0.3

然后运行 flutter pub get。

示例代码

你可以查看 example 文件夹来学习如何在应用中使用不同的 SlideDrawer 方法。

基本用法

首先，我们需要导入 slide_drawer 包。

import 'package:slide_drawer/slide_drawer.dart';

然后，将应用首页包裹在 SlideDrawer 中。为了使用基本的 SlideDrawer，只需要定义一个菜单项列表（MenuItem）以生成抽屉中的菜单。抽屉会自动使用默认主题颜色作为背景色，并使用主题亮度作为抽屉亮度。

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Slide Drawer Demo',
      // SlideDrawer 将使用此主题样式
      theme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      // 将你的 HomePage 包裹在 SlideDrawer 中
      home: SlideDrawer(
        items: [
          MenuItem('Home', onTap: (){}),
          MenuItem('Project', onTap: (){}),
          MenuItem('Favourite', onTap: (){}),
          MenuItem('Profile', onTap: (){}),
          MenuItem('Setting', onTap: (){}),
        ],
        child: HomePage(),
      ),
    );
  }
}

然后设置 AppBar 菜单按钮的 onPressed 属性以切换 SlideDrawer。

appBar: AppBar(
  title: Text('Slide Drawer Demo'),
  leading: IconButton(
    icon: Icon(Icons.menu),
    // 调用 SlideDrawer 的 toggle 方法来交替打开和关闭抽屉
    onPressed: () => SlideDrawer.of(context)?.toggle(),
  ),
),

使用图标

我们也可以为菜单项添加图标。

home: SlideDrawer(
  items: [
    MenuItem('Home', icon: Icons.home, onTap: (){}),
    MenuItem('Project', icon:Icons.rss_feed, onTap: (){}),
    MenuItem('Favourite', icon: Icons.favorite_border, onTap: (){}),
    MenuItem('Profile', icon: Icons.person_outline, onTap: (){}),
    MenuItem('Setting', icon: Icons.settings, onTap: (){}),
  ],
  child: HomePage(),
),

自定义背景

SlideDrawer 还支持 backgroundColor 和 backgroundGradient 参数。

如果指定了 backgroundGradient，则抽屉将使用它作为背景。如果没有指定 backgroundGradient，则使用 backgroundColor。如果也没有指定 backgroundColor，则会使用默认的主题颜色作为背景。

建议在使用 backgroundGradient 或 backgroundColor 时指定亮度（Brightness），因为深色背景应使用 Brightness.dark，浅色背景应使用 Brightness.light。

// 使用自定义渐变作为背景。
home: SlideDrawer(
  items: [
    MenuItem('Home', icon: Icons.home, onTap: (){}),
    MenuItem('Project', icon:Icons.rss_feed, onTap: (){}),
    MenuItem('Favourite', icon: Icons.favorite_border, onTap: (){}),
    MenuItem('Profile', icon: Icons.person_outline, onTap: (){}),
    MenuItem('Setting', icon: Icons.settings, onTap: (){}),
  ],
  brightness: Brightness.dark,
  backgroundGradient: LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    stops: [0.0, 1.0], 
    colors: [
      Color(0xFF000046),
      Color(0xFF1CB5E0),
    ],
  ),
  child: HomePage(),
),

// 使用自定义颜色作为背景。
home: SlideDrawer(
  items: [
    MenuItem('Home', icon: Icons.home, onTap: (){}),
    MenuItem('Project', icon:Icons.rss_feed, onTap: (){}),
    MenuItem('Favourite', icon: Icons.favorite_border, onTap: (){}),
    MenuItem('Profile', icon: Icons.person_outline, onTap: (){}),
    MenuItem('Setting', icon: Icons.settings, onTap: (){}),
  ],
  brightness: Brightness.dark,
  backgroundColor: Colors.blue[900],
  child: HomePage(),
),

自定义头部抽屉

建议在使用 headDrawer 时将 alignment 设置为 SlideDrawerAlignment.start。

home: SlideDrawer(
  alignment: SlideDrawerAlignment.start,
  headDrawer: Image.asset('boys.png'),
  items: [
    MenuItem('Home', icon: Icons.home, onTap: (){}),
    MenuItem('Project', icon:Icons.rss_feed, onTap: (){}),
    MenuItem('Favourite', icon: Icons.favorite_border, onTap: (){}),
    MenuItem('Profile', icon: Icons.person_outline, onTap: (){}),
    MenuItem('Setting', icon: Icons.settings, onTap: (){}),
  ],
  brightness: Brightness.dark,
  backgroundColor: Colors.blue[900],
  child: HomePage(),
),

自定义内容抽屉

在之前的例子中，我们使用了 items 让 SlideDrawer 生成内容抽屉中的菜单。但你也可以设置任何自定义小部件作为内容抽屉。

home: SlideDrawer(
  brightness: Brightness.dark,
  contentDrawer: Container(
    padding: EdgeInsets.symmetric(horizontal: 5),
    child: Column(
      children: [
        ListTile(title: 'Home', icon: Icons.home, onTap: (){}),
        ListTile(title: 'Project', icon:Icons.rss_feed, onTap: (){}),
        ListTile(title: 'Favourite', icon: Icons.favorite_border, onTap: (){}),
        ListTile(title: 'Profile', icon: Icons.person_outline, onTap: (){}),
        ListTile(title: 'Setting', icon: Icons.settings, onTap: (){}),
      ],
    ),
  ),
  child: HomePage(),
),

自定义全屏抽屉

如果你有创意的想法，想在抽屉中使用全屏小部件，不用担心。我们可以将它传递给 drawer，这样 SlideDrawer 将使用自定义抽屉的样式，并忽略 backgroundColor、gradientColor 和 brightness 的任何值。

home: SlideDrawer(
  drawer: Container(
    color: Colors.teal,
    padding: EdgeInsets.symmetric(vertical: 36, horizontal: 15),
    child: Theme(
      data: ThemeData(brightness: Brightness.dark),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          ListTile(title: 'Home', icon: Icons.home, onTap: (){}),
          ListTile(title: 'Project', icon:Icons.rss_feed, onTap: (){}),
          ListTile(title: 'Favourite', icon: Icons.favorite_border, onTap: (){}),
          ListTile(title: 'Profile', icon: Icons.person_outline, onTap: (){}),
          ListTile(title: 'Setting', icon: Icons.settings, onTap: (){}),
        ],
      ),
    ),
  ),
  child: HomePage(),
),

其他配置

默认情况下，SlideDrawer 通过向右移动（默认 offsetFromRight 为 60）、缩放和沿 Y 轴旋转（角度为 pi / 24 弧度或 7.5 度）来动画化主页。

如果你想禁用旋转，可以将 isRotate 设置为 false。

home: SlideDrawer(
  isRotate: false,
  items: [
    MenuItem('Home', icon: Icons.home, onTap: (){}),
    MenuItem('Project', icon:Icons.rss_feed, onTap: (){}),
    MenuItem('Favourite', icon: Icons.favorite_border, onTap: (){}),
    MenuItem('Profile', icon: Icons.person_outline, onTap: (){}),
    MenuItem('Setting', icon: Icons.settings, onTap: (){}),
  ],
  child: HomePage(),
),

如果你想旋转到特定角度，可以设置 rotateAngle。

home: SlideDrawer(
  isRotate: true,
  rotateAngle: pi / 36,
  items: [
    MenuItem('Home', icon: Icons.home, onTap: (){}),
    MenuItem('Project', icon:Icons.rss_feed, onTap: (){}),
    MenuItem('Favourite', icon: Icons.favorite_border, onTap: (){}),
    MenuItem('Profile', icon: Icons.person_outline, onTap: (){}),
    MenuItem('Setting', icon: Icons.settings, onTap: (){}),
  ],
  child: HomePage(),
),

如果你想调整抽屉的偏移量，可以修改 offsetFromRight。

home: SlideDrawer(
  offsetFromRight: 80.0,
  items: [
    MenuItem('Home', icon: Icons.home, onTap: (){}),
    MenuItem('Project', icon:Icons.rss_feed, onTap: (){}),
    MenuItem('Favourite', icon: Icons.favorite_border, onTap: (){}),
    MenuItem('Profile', icon: Icons.person_outline, onTap: (){}),
    MenuItem('Setting', icon: Icons.settings, onTap: (){}),
  ],
  child: HomePage(),
),

我们还可以使用自定义曲线和持续时间。默认值为 linear 和 300ms。我们可以通过设置 curveReverse 和 durationReverse 来改变反向动画的曲线和持续时间。

home: SlideDrawer(
  curve: Curves.easeInOut,
  duration: Duration(milliseconds: 200),
  items: [
    MenuItem('Home', icon: Icons.home, onTap: (){}),
    MenuItem('Project', icon:Icons.rss_feed, onTap: (){}),
    MenuItem('Favourite', icon: Icons.favorite_border, onTap: (){}),
    MenuItem('Profile', icon: Icons.person_outline, onTap: (){}),
    MenuItem('Setting', icon: Icons.settings, onTap: (){}),
  ],
  child: HomePage(),
),

更多关于Flutter侧边抽屉导航插件slide_drawer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter侧边抽屉导航插件slide_drawer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


slide_drawer 是一个用于在 Flutter 应用中实现侧边抽屉导航的插件。它提供了一种简单的方式来创建一个可以滑入和滑出的侧边导航菜单。下面是如何使用 slide_drawer 插件的详细步骤。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 slide_drawer 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  slide_drawer: ^1.0.0+1  # 请查看最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在需要使用 slide_drawer 的 Dart 文件中导入插件：

import 'package:slide_drawer/slide_drawer.dart';

3. 创建抽屉内容

创建一个包含抽屉内容的 Widget。这个 Widget 将显示在侧边抽屉中。

Widget _buildDrawer() {
  return Container(
    color: Colors.blue,
    child: ListView(
      padding: EdgeInsets.zero,
      children: <Widget>[
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.blueAccent,
          ),
          child: Text(
            'Drawer Header',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
            ),
          ),
        ),
        ListTile(
          leading: Icon(Icons.home, color: Colors.white),
          title: Text('Home', style: TextStyle(color: Colors.white)),
          onTap: () {
            // 处理点击事件
          },
        ),
        ListTile(
          leading: Icon(Icons.settings, color: Colors.white),
          title: Text('Settings', style: TextStyle(color: Colors.white)),
          onTap: () {
            // 处理点击事件
          },
        ),
      ],
    ),
  );
}

4. 使用 SlideDrawer

将 SlideDrawer 包裹在应用的根 Widget 上。SlideDrawer 需要两个主要参数：

  • child: 主内容 Widget。
  • drawer: 抽屉内容 Widget。
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Slide Drawer Example'),
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            SlideDrawer.of(context)?.toggle();
          },
        ),
      ),
      body: SlideDrawer(
        child: Center(
          child: Text('Main Content'),
        ),
        drawer: _buildDrawer(),
      ),
    );
  }
}

5. 控制抽屉的打开和关闭

你可以通过 SlideDrawer.of(context)?.toggle() 方法来打开或关闭抽屉。在上面的例子中，我们在 AppBar 的 leading 按钮中使用了这个方法。

6. 完整示例

以下是一个完整的示例：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Slide Drawer Example'),
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            SlideDrawer.of(context)?.toggle();
          },
        ),
      ),
      body: SlideDrawer(
        child: Center(
          child: Text('Main Content'),
        ),
        drawer: _buildDrawer(),
      ),
    );
  }

  Widget _buildDrawer() {
    return Container(
      color: Colors.blue,
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.blueAccent,
            ),
            child: Text(
              'Drawer Header',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
              ),
            ),
          ),
          ListTile(
            leading: Icon(Icons.home, color: Colors.white),
            title: Text('Home', style: TextStyle(color: Colors.white)),
            onTap: () {
              // 处理点击事件
            },
          ),
          ListTile(
            leading: Icon(Icons.settings, color: Colors.white),
            title: Text('Settings', style: TextStyle(color: Colors.white)),
            onTap: () {
              // 处理点击事件
            },
          ),
        ],
      ),
    );
  }
}

7. 运行应用

现在，你可以运行应用并查看效果。点击左上角的菜单按钮，侧边抽屉将会滑入和滑出。

8. 自定义

SlideDrawer 还提供了其他参数，例如 drawerWidth、animationDuration 等，你可以根据需要自定义抽屉的宽度、动画持续时间等。

SlideDrawer(
  child: Center(
    child: Text('Main Content'),
  ),
  drawer: _buildDrawer(),
  drawerWidth: 250, // 自定义抽屉宽度
  animationDuration: Duration(milliseconds: 500), // 自定义动画持续时间
);
回到顶部