basic_zoom_drawer 是一个用于 Flutter 的插件，它提供了一个类似抽屉效果的同时可以进行缩放的功能。这个插件通常用于创建带有缩放效果的侧边栏或抽屉菜单。

安装

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

dependencies:
  flutter:
    sdk: flutter
  basic_zoom_drawer: ^1.0.0 # 使用最新版本

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

使用

1. 导入包

   在你的 Dart 文件中导入 basic_zoom_drawer 包：

   import 'package:basic_zoom_drawer/basic_zoom_drawer.dart';
   

2. 创建 ZoomDrawer 控件

   ZoomDrawer 是一个可以包裹你整个应用或某个页面的控件。它需要一个 menuScreen 和一个 mainScreen。

   • menuScreen: 这是抽屉菜单的内容。
   • mainScreen: 这是主屏幕的内容。

   以下是一个简单的示例：

   class MyApp extends StatelessWidget {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return MaterialApp(
         home: ZoomDrawer(
           menuScreen: MenuScreen(),
           mainScreen: MainScreen(),
           borderRadius: 24.0, // 圆角半径
           showShadow: true, // 是否显示阴影
           angle: -12.0, // 旋转角度
           slideWidth: MediaQuery.of(context).size.width * 0.65, // 抽屉宽度
           openCurve: Curves.fastOutSlowIn, // 打开动画曲线
           closeCurve: Curves.fastOutSlowIn, // 关闭动画曲线
         ),
       );
     }
   }
   
   class MenuScreen extends StatelessWidget {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return Container(
         color: Colors.blue,
         child: Center(
           child: Text(
             'Menu Screen',
             style: TextStyle(color: Colors.white, fontSize: 24),
           ),
         ),
       );
     }
   }
   
   class MainScreen extends StatelessWidget {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Main Screen'),
           leading: IconButton(
             icon: Icon(Icons.menu),
             onPressed: () {
               ZoomDrawer.of(context)?.toggle(); // 打开或关闭抽屉
             },
           ),
         ),
         body: Center(
           child: Text('Main Content'),
         ),
       );
     }
   }
   

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

   你可以通过 ZoomDrawer.of(context)?.toggle() 来控制抽屉的打开和关闭。通常你会在 AppBar 的 leading 按钮中使用这个方法来触发抽屉的切换。

示例代码

以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ZoomDrawer(
        menuScreen: MenuScreen(),
        mainScreen: MainScreen(),
        borderRadius: 24.0,
        showShadow: true,
        angle: -12.0,
        slideWidth: MediaQuery.of(context).size.width * 0.65,
        openCurve: Curves.fastOutSlowIn,
        closeCurve: Curves.fastOutSlowIn,
      ),
    );
  }
}

class MenuScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text(
          'Menu Screen',
          style: TextStyle(color: Colors.white, fontSize: 24),
        ),
      ),
    );
  }
}

class MainScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            ZoomDrawer.of(context)?.toggle();
          },
        ),
      ),
      body: Center(
        child: Text('Main Content'),
      ),
    );
  }
}