Flutter垂直滑动抽屉插件vertical_sliding_drawers的使用

vertical_sliding_drawers 是一个 Flutter 插件，用于创建垂直滑动的抽屉效果。它允许你在应用中添加一个可以从屏幕顶部或底部滑入的抽屉，类似于水平滑动的 Drawer，但是方向是垂直的。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  vertical_sliding_drawers: ^0.1.0  # 请检查最新版本

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

使用插件

以下是一个简单的示例，展示了如何使用 vertical_sliding_drawers 插件来创建一个从顶部滑入的抽屉。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Vertical Sliding Drawer Example'),
        ),
        body: VerticalSlidingDrawers(
          drawerHeight: 200, // 抽屉的高度
          drawer: Container(
            color: Colors.blue,
            child: Center(
              child: Text(
                'This is the drawer content',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
          ),
          body: Container(
            color: Colors.white,
            child: Center(
              child: Text(
                'This is the main content',
                style: TextStyle(color: Colors.black, fontSize: 20),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

参数说明

• drawerHeight: 抽屉的高度。
• drawer: 抽屉的内容，通常是一个 Container 或其他自定义的 Widget。
• body: 主内容区域，通常是一个 Container 或其他自定义的 Widget。

自定义抽屉行为

你可以通过设置不同的参数来控制抽屉的行为，例如抽屉的初始状态、动画持续时间等。以下是一个更复杂的示例：

VerticalSlidingDrawers(
  drawerHeight: 200,
  initialDrawerState: DrawerState.open, // 初始化状态为打开
  animationDuration: Duration(milliseconds: 500), // 动画持续时间
  drawer: Container(
    color: Colors.blue,
    child: Center(
      child: Text(
        'This is the drawer content',
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    ),
  ),
  body: Container(
    color: Colors.white,
    child: Center(
      child: Text(
        'This is the main content',
        style: TextStyle(color: Colors.black, fontSize: 20),
      ),
    ),
  ),
),

控制抽屉状态

你也可以通过 VerticalSlidingDrawersController 来控制抽屉的打开和关闭状态：

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

class _MyAppState extends State<MyApp> {
  VerticalSlidingDrawersController _controller = VerticalSlidingDrawersController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Vertical Sliding Drawer Example'),
          actions: [
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {
                _controller.toggle();
              },
            ),
          ],
        ),
        body: VerticalSlidingDrawers(
          controller: _controller,
          drawerHeight: 200,
          drawer: Container(
            color: Colors.blue,
            child: Center(
              child: Text(
                'This is the drawer content',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
          ),
          body: Container(
            color: Colors.white,
            child: Center(
              child: Text(
                'This is the main content',
                style: TextStyle(color: Colors.black, fontSize: 20),
              ),
            ),
          ),
        ),
      ),
    );
  }
}