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

如果你希望在你的应用中轻松添加一个美观的滑动动画菜单，你可以使用这个插件。你只需要将你的内容和抽屉小部件传递给 SlidingDrawer。

如何使用

要使用 SlidingDrawer，你需要传递两个构建函数 drawerBuilder 和 contentBuilder，它们分别返回抽屉和内容小部件。 你可以通过 settings 参数设置抽屉的宽度、动画持续时间和曲线。 如果需要禁用通过拖动打开/关闭抽屉的功能，可以将 ignorePointer 设置为 true。 为了响应抽屉的打开/关闭，API 提供了 onAnimationStatusChanged 监听器。 支持左侧和右侧抽屉位置。

示例

以下是一个完整的示例代码，展示了如何使用 flutter_sliding_drawer 插件：

主应用程序入口

import 'package:flutter/material.dart';
import 'package:flutter_sliding_drawer_example/main_page.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Builder(
        builder: (context) {
          return const MainPage();
        },
      ),
    );
  }
}

主页面

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

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

  @override
  State<StatefulWidget> createState() {
    return _MainPageState();
  }
}

class _MainPageState extends State<MainPage> {
  // 可选。如果需要在某些操作时打开/关闭抽屉，可以提供 Key<SlidingDrawerState>
  final slidingDrawerKey = GlobalKey<SlidingDrawerState>();

  @override
  Widget build(BuildContext context) {
    return SlidingDrawer(
      key: slidingDrawerKey,
      // 构建内容小部件
      contentBuilder: (context) {
        return Scaffold(
          appBar: AppBar(
            automaticallyImplyLeading: false,
            leading: IconButton(
              icon: const Icon(Icons.menu_rounded),
              onPressed: () {
                // 打开抽屉
                slidingDrawerKey.currentState?.open();
              },
            ),
            title: const Text('Home page'),
          ),
          body: const Center(
            child: Text('Content goes here'),
          ),
        );
      },
      // 构建抽屉小部件
      drawerBuilder: (context) {
        return Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Text('Drawer Header'),
              ),
              ListTile(
                leading: Icon(Icons.event_note),
                title: Text('Notes'),
                onTap: () {
                  // 关闭抽屉
                  slidingDrawerKey.currentState?.close();
                },
              ),
              ListTile(
                leading: Icon(Icons.person),
                title: Text('Profile'),
                onTap: () {
                  // 关闭抽屉
                  slidingDrawerKey.currentState?.close();
                },
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('Settings'),
                onTap: () {
                  // 关闭抽屉
                  slidingDrawerKey.currentState?.close();
                },
              ),
            ],
          ),
        );
      },
    );
  }
}

说明

1. 主应用程序入口：MyApp 是应用程序的入口点，它创建了一个 MaterialApp 并设置了主题。
2. 主页面：MainPage 是应用程序的主要页面，它包含了一个 SlidingDrawer 小部件。
3. 内容小部件：contentBuilder 返回一个 Scaffold，其中包含一个 AppBar 和一个中心对齐的文本。
4. 抽屉小部件：drawerBuilder 返回一个 Drawer，其中包含一个 DrawerHeader 和几个 ListTile。

通过这个示例，你可以看到如何使用 flutter_sliding_drawer 插件来实现一个带有滑动抽屉的页面。希望这对你的开发有所帮助！