Flutter滑动抽屉组件插件sliding_drawer的使用

Flutter滑动抽屉组件插件sliding_drawer的使用

Sliding Drawer 是一个提供滑动效果的抽屉组件。它允许用户通过滑动手势打开和关闭抽屉。

🎯 特性

• 简单易用的API
• 支持任意方向的滑动
• 可自定义抽屉宽度
• 控制器管理抽屉状态
• 可自定义遮罩颜色

⚙️ 开始使用

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

dependencies:
  sliding_drawer: ^1.0.2

🚀 使用方法

1. 创建一个 SlidingDrawerController

在你的状态类中创建一个 SlidingDrawerController 实例。你可以在此处设置初始状态和抽屉宽度（可选）。

class _HomePageState extends State<HomePage> {
  // 创建一个抽屉控制器。
  // 你也可以在这里设置抽屉宽度和初始状态（可选）。
  final SlidingDrawerController _drawerController = SlidingDrawerController(
    isOpenOnInitial: false,
    drawerFraction: 0.7,
  );

  [@override](/user/override)
  void dispose() {
    // 清理控制器，当小部件从 widget 树中移除时。
    _drawerController.dispose();

    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 填写下一步的内容。
  }
}

2. 创建并连接 SlidingDrawer

创建一个 SlidingDrawer 并将其与控制器连接。你还可以设置一些可选属性，例如遮罩颜色、轴方向和点击遮罩区域的回调。

return SlidingDrawer(
  // 连接控制器到抽屉。
  controller: _drawerController,
  // 设置一些可选属性（如遮罩颜色、轴方向、点击遮罩区域的回调）。
  shadeColor: Colors.black.withOpacity(0.35),
  axisDirection: AxisDirection.right,
  // 当 onShadedAreaTap 不为空且抽屉未关闭时，每次与主体交互都会被忽略。
  // 为了避免这种行为，请将 onShadedAreaTap 留空。
  onShadedAreaTap: () {
    // 使用控制器与抽屉进行交互（如关闭）。
    _drawerController.animateClose(
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeOut,
    );
  },
  // 添加一个抽屉小部件。
  drawer: const DrawerWidget(),
  // 添加一个主体小部件。
  body: BodyWidget(
    onMenuPressed: () {
      // 打开抽屉。
      _drawerController.animateOpen(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeOut,
      );
    },
  ),
);

3. （可选）使用控制器与抽屉交互

你可以使用控制器来控制抽屉的状态，例如打开或关闭。

// 调用 animateClose 方法以动画形式关闭抽屉。
_drawerController.animateClose(
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeOut,
);

❤️ 其他信息

欢迎提交拉取请求！

如果你遇到任何问题或有任何想法，请随时提出问题：

• 提交错误报告
• 提交功能请求
• 提问

文档中可能存在一些语法问题，如果你能帮忙修正会非常感激。

完整示例代码

以下是完整的示例代码，展示了如何使用 SlidingDrawer 组件。

import 'package:example/body_widget.dart';
import 'package:example/drawer_widget.dart';
import 'package:flutter/material.dart';
import 'package:sliding_drawer/sliding_drawer.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({
    super.key,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: Colors.blue,
        brightness: Brightness.dark,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({
    super.key,
  });

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 创建一个抽屉控制器。
  // 你也可以在这里设置抽屉宽度和初始状态（可选）。
  final SlidingDrawerController _drawerController = SlidingDrawerController();

  [@override](/user/override)
  void dispose() {
    // 清理控制器，当小部件从 widget 树中移除时。
    _drawerController.dispose();

    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SlidingDrawer(
      // 连接控制器到抽屉。
      controller: _drawerController,
      // 设置一些可选属性（如遮罩颜色、轴方向、点击遮罩区域的回调）。
      shadeColor: Colors.black.withOpacity(0.35),
      axisDirection: AxisDirection.right,
      // 当 onShadedAreaTap 不为空且抽屉未关闭时，每次与主体交互都会被忽略。
      // 为了避免这种行为，请将 onShadedAreaTap 留空。
      onShadedAreaTap: () {
        // 使用控制器与抽屉进行交互（如关闭）。
        _drawerController.animateClose(
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeOut,
        );
      },
      // 添加一个抽屉小部件。
      drawer: const DrawerWidget(),
      // 添加一个主体小部件。
      body: BodyWidget(
        onMenuPressed: () {
          // 打开抽屉。
          _drawerController.animateOpen(
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeOut,
          );
        },
      ),
    );
  }
}