Flutter抽屉行为管理插件drawerbehavior的使用

简介

drawerbehavior 是一个Flutter库，提供了额外的抽屉行为功能，如在抽屉滑动时移动视图或缩放视图的高度。该插件支持多种效果，包括缩放、3D效果、右抽屉、带头部和尾部的抽屉等。

安装与配置

1. 添加依赖

在 pubspec.yaml 文件中添加 drawerbehavior 依赖：

dependencies:
  drawerbehavior: latest_version

2. 安装包

通过命令行安装包：

$ flutter packages get

或者使用编辑器自带的 flutter packages get 功能。

3. 导入库

在 Dart 文件中导入 drawerbehavior 库：

import 'package:drawerbehavior/drawerbehavior.dart';

示例代码

以下是一个完整的示例，展示了如何使用 drawerbehavior 创建带有缩放效果的抽屉：

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

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

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

class DrawerScale extends StatefulWidget {
  @override
  _DrawerScaleState createState() => _DrawerScaleState();
}

class _DrawerScaleState extends State<DrawerScale> {
  late int selectedMenuItemId;

  @override
  void initState() {
    selectedMenuItemId = menu.items[0].id;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return DrawerScaffold(
      appBar: AppBar(
          title: Text("Drawer - Scale"),
          actions: [IconButton(icon: Icon(Icons.add), onPressed: () {})]),
      drawers: [
        SideDrawer(
          percentage: 0.6, // 抽屉打开时占据屏幕的比例
          menu: menu, // 菜单项
          direction: Direction.left, // 抽屉方向
          animation: true, // 是否启用动画
          color: Theme.of(context).primaryColor, // 抽屉背景色
          selectedItemId: selectedMenuItemId, // 当前选中的菜单项ID
          onMenuItemSelected: (itemId) {
            setState(() {
              selectedMenuItemId = itemId;
            });
          },
        )
      ],
      builder: (context, id) => IndexedStack(
        index: id,
        children: menu.items
            .map((e) => Center(
                  child: Text("Page~${e.title}"),
                ))
            .toList(),
      ),
    );
  }
}

// 示例菜单数据
final menu = Menu([
  MenuItem(id: 0, title: "Home"),
  MenuItem(id: 1, title: "Settings"),
  MenuItem(id: 2, title: "About"),
]);

迁移指南

Null-safety Release

• mainDrawer (DrawerScaffold) -> defaultDirection (DrawerScaffold)

  new DrawerScaffold(
    defaultDirection: Direction.right,
    ...
  );
  

其他迁移

• contentView (Screen) -> builder (ScreenBuilder)

  builder: (context, id) => Center(child: _widget),
  

• menuView (MenuView) -> drawers (List<SideDrawer>)

  drawers: [
    SideDrawer(
      menu: menu,
      direction: Direction.left,
      ...
    )
  ],
  

• percentage (DrawerScaffold) -> drawers (List<SideDrawer>)

  DrawerScaffold(
    drawers: [
      SideDrawer(
        percentage: 0.6,
        ...
      )
    ]
    ...
  );
  

自定义选项

DrawerScaffold

DrawerScaffoldController controller;
List<SideDrawer> drawers;
ScreenBuilder builder;
bool enableGestures; // 默认: true
PreferredSizeWidget appBar;
double cornerRadius; // 默认: 16
double backgroundColor; // 默认: Theme.of(context).scaffoldBackgroundColor
Widget floatingActionButton;
Widget bottomNavigationBar;
FloatingActionButtonLocation floatingActionButtonLocation;
FloatingActionButtonAnimator floatingActionButtonAnimator;
List<BoxShadow> contentShadow;
Widget bottomSheet;
bool extendBodyBehindAppBar;
List<Widget> persistentFooterButtons;
bool primary;
bool resizeToAvoidBottomInset;
bool resizeToAvoidBottomPadding;

/// 监听抽屉滑动事件
Function(SideDrawer, double) onSlide;
/// 监听抽屉打开事件
Function(SideDrawer) onOpened;
/// 监听抽屉关闭事件
Function(SideDrawer) onClosed;

SideDrawer

double percentage; // 默认: 0.8
double elevation; // 默认: 4
double cornerRadius;
double degree; // 15-45度
double peekSize; // 56px
Menu menu;
String selectedItemId;
Direction direction;
Duration duration;
Curve curve;
bool animation; // 默认: false
bool slide; // 默认: false
bool peekMenu; // 默认: false
bool hideOnItemPressed; // 默认: true
Function(String) onMenuItemSelected;
Widget headerView;
Widget footerView;
DecorationImage background;
Color color;
Color selectorColor;
TextStyle textStyle;
Alignment alignment;
EdgeInsets padding;
Function(BuildContext, MenuItem, bool) itemBuilder;

MenuItem

String id;
String title;
IconData icon;

更多示例

更多详细的示例代码可以在 GitHub仓库 中找到。

贡献者

感谢以下贡献者的努力：

trademunch	anjarnaufals	Vladimir Vlach	Chris Hayen

希望以上内容能帮助你更好地理解和使用 drawerbehavior 插件。如果有任何问题或建议，请随时提出！