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

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

inner_drawer 是一个用于创建内部侧边栏（左右两侧）的插件，非常适合用来插入菜单列表或其他内容。它是对 flutter_inner_drawer 的一个分支版本。

安装

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  inner_drawer: "^1.0.0+1"

然后运行 flutter pub get 来安装该插件。

示例代码

以下是一个完整的示例代码，展示了如何使用 inner_drawer 插件来实现侧边抽屉导航功能。

示例代码

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

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

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

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<InnerDrawerState> _innerDrawerKey = GlobalKey<InnerDrawerState>();

  void _toggle() {
    _innerDrawerKey.currentState.toggle(
      // 可选参数，方向可以设置为 InnerDrawerDirection.start 或 InnerDrawerDirection.end
      direction: InnerDrawerDirection.end,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return InnerDrawer(
      key: _innerDrawerKey,
      onTapClose: true, // 点击背景关闭抽屉
      swipe: true, // 启用滑动打开抽屉
      colorTransitionChild: Colors.red, // 拖动时子组件的背景颜色过渡
      colorTransitionScaffold: Colors.black54, // 拖动时主页面的背景颜色过渡
      offset: const IDOffset.only(bottom: 0.05, right: 0.0, left: 0.0), // 设置抽屉的偏移量
      scale: const IDOffset.horizontal(0.8), // 设置缩放比例
      proportionalChildArea: true, // 动态调整抽屉宽度
      borderRadius: 50, // 主页面圆角
      leftAnimationType: InnerDrawerAnimation.static, // 左侧动画类型
      rightAnimationType: InnerDrawerAnimation.quadratic, // 右侧动画类型
      backgroundDecoration: BoxDecoration(color: Colors.red), // 主页面背景装饰
      onDragUpdate: (double val, InnerDrawerDirection? direction) {
        // 打印拖动值和方向
        print(val);
        print(direction == InnerDrawerDirection.start);
      },
      innerDrawerCallback: (isOpen) => print(isOpen ? '打开' : '关闭'), // 抽屉打开或关闭回调
      leftChild: Container(), // 左侧内容
      rightChild: Container(), // 右侧内容
      scaffold: Scaffold(
        appBar: AppBar(
          title: Text('Inner Drawer 示例'),
          actions: [
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: _toggle, // 点击按钮打开抽屉
            ),
          ],
        ),
        body: Center(
          child: Text('主页面内容'),
        ),
      ),
    );
  }
}

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

1 回复

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


inner_drawer 是一个用于 Flutter 的侧边抽屉导航插件，它允许你在应用中创建可滑动的侧边抽屉。与 Flutter 自带的 Drawer 组件不同，inner_drawer 提供了更多的自定义选项和灵活性，例如可以设置左右两个抽屉、自定义动画效果等。

安装

首先，你需要在 pubspec.yaml 文件中添加 inner_drawer 依赖：

dependencies:
  flutter:
    sdk: flutter
  inner_drawer: ^2.0.0

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

基本用法

以下是一个简单的示例，展示如何使用 inner_drawer 创建一个带有左右两个抽屉的应用。

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

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

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

class InnerDrawerExample extends StatefulWidget {
  @override
  _InnerDrawerExampleState createState() => _InnerDrawerExampleState();
}

class _InnerDrawerExampleState extends State<InnerDrawerExample> {
  final GlobalKey<InnerDrawerState> _innerDrawerKey = GlobalKey<InnerDrawerState>();

  @override
  Widget build(BuildContext context) {
    return InnerDrawer(
      key: _innerDrawerKey,
      onTapClose: true, // 点击内容区域关闭抽屉
      swipe: true, // 允许滑动打开抽屉
      leftChild: _buildLeftDrawer(), // 左侧抽屉内容
      rightChild: _buildRightDrawer(), // 右侧抽屉内容
      scaffold: Scaffold(
        appBar: AppBar(
          title: Text('Inner Drawer Example'),
          leading: IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {
              _innerDrawerKey.currentState?.toggle(direction: InnerDrawerDirection.start);
            },
          ),
          actions: [
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {
                _innerDrawerKey.currentState?.toggle(direction: InnerDrawerDirection.end);
              },
            ),
          ],
        ),
        body: Center(
          child: Text('Main Content'),
        ),
      ),
    );
  }

  Widget _buildLeftDrawer() {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text('Left Drawer', style: TextStyle(color: Colors.white, fontSize: 24)),
      ),
    );
  }

  Widget _buildRightDrawer() {
    return Container(
      color: Colors.red,
      child: Center(
        child: Text('Right Drawer', style: TextStyle(color: Colors.white, fontSize: 24)),
      ),
    );
  }
}

主要属性

  • key: 用于控制 InnerDrawer 的状态。
  • onTapClose: 点击内容区域是否关闭抽屉。
  • swipe: 是否允许通过滑动手势打开抽屉。
  • leftChild: 左侧抽屉的内容。
  • rightChild: 右侧抽屉的内容。
  • scaffold: 主内容区域的 Scaffold 组件。

控制抽屉

你可以通过 GlobalKey<InnerDrawerState> 来控制抽屉的打开和关闭：

_innerDrawerKey.currentState?.toggle(direction: InnerDrawerDirection.start); // 打开左侧抽屉
_innerDrawerKey.currentState?.toggle(direction: InnerDrawerDirection.end); // 打开右侧抽屉

自定义动画

inner_drawer 还允许你自定义抽屉的动画效果，例如设置动画持续时间、曲线等。你可以通过 innerDrawer 的 animationType 和 animationDuration 属性来实现。

InnerDrawer(
  animationType: InnerDrawerAnimation.static, // 静态动画
  animationDuration: Duration(milliseconds: 500), // 动画持续时间
  // 其他属性...
)
回到顶部