Flutter侧边导航插件simple_drawer的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter侧边导航插件simple_drawer的使用

simple_drawer 是一个Flutter插件，它提供了一种简单的方法来实现自定义的小部件作为抽屉（Drawer），并且可以从任意方向（上、下、左、右）滑入。通过这个插件，你可以轻松地在应用中添加侧边导航栏，并且可以根据需要自定义其外观和行为。

1. 使用步骤

1.1 添加依赖

首先，在 pubspec.yaml 文件中添加 simple_drawer 依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_drawer: ^最新版本号

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

1.2 创建SimpleDrawer

SimpleDrawer 需要放在 Stack 中，并且可以通过调用 SimpleDrawer.activate(id) 来激活它。你也可以通过 SimpleDrawer.deactivate(id) 来远程禁用抽屉。

SimpleDrawer 有以下参数：

  • id (String)：标识抽屉的唯一ID，可以是任意字符串。
  • direction (Direction)：指定抽屉从哪个方向滑入，例如 Direction.top、Direction.bottom、Direction.left 或 Direction.right。
  • child (Widget)：抽屉的内容，可以是任何Flutter小部件。
  • childWidth 和 childHeight (double)：抽屉内容的宽度和高度（以像素为单位）。对于 Direction.top 和 Direction.bottom，必须指定 childHeight；对于 Direction.left 和 Direction.right，必须指定 childWidth。
  • animationDurationInMilliseconds (int)：抽屉完全滑入或滑出所需的时间，默认为300毫秒。
  • animationCurve (Curve)：抽屉滑动时的动画曲线，默认为 Curves.ease。
  • fadeColor (Color)：抽屉后面覆盖的颜色，默认为 Colors.black54。
  • simpleDrawerAreaHeight 和 simpleDrawerAreaWidth (double)：限制抽屉及其背景色容器的总高度和宽度，默认为设备的高度和宽度。
  • onDrawerStatusChanged (Function)：当抽屉状态发生变化时调用的回调函数，接收新的 DrawerStatus 作为参数。

你还可以使用 SimpleDrawer.getDrawerStatus(id) 来获取某个 SimpleDrawer 的当前状态。

2. 完整示例代码

以下是一个完整的示例代码，展示了如何使用 simple_drawer 插件创建多个方向的抽屉，并通过按钮来控制它们的显示和隐藏。

import 'package:flutter/material.dart';
import 'package:simple_drawer/Direction.dart';
import 'package:simple_drawer/DrawerStatus.dart';
import 'package:simple_drawer/SimpleDrawer.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
    debugShowCheckedModeBanner: false,
  ));
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // SimpleDrawer from the bottom & with border Radius
    Widget bottomSimpleDrawer = SimpleDrawer(
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20), topRight: Radius.circular(20)),
          color: Colors.green,
        ),
        width: MediaQuery.of(context).size.width,
        height: 300,
      ),
      childHeight: 300,
      direction: Direction.bottom,
      id: "bottom",
    );

    // SimpleDrawer from the right
    Widget rightSimpleDrawer = SimpleDrawer(
      child: Container(
        color: Colors.green,
        height: MediaQuery.of(context).size.height,
        width: 200,
      ),
      childWidth: 200,
      direction: Direction.right,
      id: "right",
    );

    // SimpleDrawer from the left
    Widget leftSimpleDrawer = SimpleDrawer(
      child: Container(
        color: Colors.green,
        height: MediaQuery.of(context).size.height,
        width: 150,
      ),
      childWidth: 150,
      direction: Direction.left,
      id: "left",
      animationDurationInMilliseconds: 600,
      onDrawerStatusChanged: (drawerStatus) {
        print("DrawerStatus changed to: " + drawerStatus.toString());
      },
    );

    // SimpleDrawer from the top
    Widget topSimpleDrawer = SimpleDrawer(
      child: Container(
        color: Colors.green,
        width: MediaQuery.of(context).size.width,
        height: 300,
      ),
      childHeight: 300,
      direction: Direction.top,
      id: "top",
    );

    // SimpleDrawer from the left with different fadeColor
    Widget leftSimpleDrawerFadeColorAltered = SimpleDrawer(
      child: Container(
        color: Colors.green,
        height: MediaQuery.of(context).size.height,
        width: 150,
      ),
      childWidth: 150,
      direction: Direction.left,
      id: "fadeColor",
      fadeColor: Colors.blue.withOpacity(0.5),
    );

    // SimpleDrawer from the left with altered animationCurve and Duration
    Widget leftSimpleDrawerAnimationCurveAndDuration = SimpleDrawer(
      child: Container(
        color: Colors.green,
        height: MediaQuery.of(context).size.height,
        width: 150,
      ),
      childWidth: 150,
      direction: Direction.left,
      id: "animation",
      animationCurve: Curves.bounceIn,
      animationDurationInMilliseconds: 800,
    );

    // SimpleDrawer from the left with altered simpleDrawerAreaHeight & Width
    Widget leftSimpleDrawerArea = SimpleDrawer(
      child: Container(
        color: Colors.green,
        height: 300,
        width: 100,
      ),
      childWidth: 100,
      direction: Direction.left,
      id: "area",
      simpleDrawerAreaHeight: 300,
      simpleDrawerAreaWidth: 200,
    );

    return Scaffold(
      body: Stack(
        children: [
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                ElevatedButton(
                    onPressed: () {
                      SimpleDrawer.activate("right");
                    },
                    child: Text("右侧")),
                ElevatedButton(
                    onPressed: () {
                      SimpleDrawer.activate("bottom");
                    },
                    child: Text("底部")),
                DrawerStatusWidget(),
                ElevatedButton(
                    onPressed: () {
                      SimpleDrawer.activate("top");
                    },
                    child: Text("顶部")),
                ElevatedButton(
                    onPressed: () {
                      SimpleDrawer.activate("fadeColor");
                    },
                    child: Text("不同透明度")),
                ElevatedButton(
                    onPressed: () {
                      SimpleDrawer.activate("animation");
                    },
                    child: Text("不同动画曲线和时长")),
                ElevatedButton(
                    onPressed: () {
                      SimpleDrawer.activate("area");
                    },
                    child: Text("调整区域高度和宽度")),
              ],
            ),
          ),
          rightSimpleDrawer,
          bottomSimpleDrawer,
          leftSimpleDrawer,
          topSimpleDrawer,
          leftSimpleDrawerFadeColorAltered,
          leftSimpleDrawerAnimationCurveAndDuration,
          Center(child: leftSimpleDrawerArea),
        ],
      ),
    );
  }
}

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

class _DrawerStatusWidgetState extends State<DrawerStatusWidget> {
  bool isChecking = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    if (!isChecking) {
      isChecking = true;
      check();
    }
    DrawerStatus drawerStatus = SimpleDrawer.getDrawerStatus("left") ?? DrawerStatus.inactive;

    return Row(
      children: [
        ElevatedButton(
            onPressed: () {
              SimpleDrawer.activate("left");
            },
            child: Text("左侧")),
        Text(drawerStatus.toString()),
      ],
      mainAxisAlignment: MainAxisAlignment.center,
    );
  }

  void check() {
    setState(() {});
    Timer(Duration(milliseconds: 100), () {
      check();
    });
  }
}

更多关于Flutter侧边导航插件simple_drawer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter侧边导航插件simple_drawer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter应用中使用simple_drawer插件来实现侧边导航的示例代码。simple_drawer是一个简单而强大的侧边导航菜单插件，可以方便地集成到你的Flutter应用中。

首先，确保你已经在pubspec.yaml文件中添加了simple_drawer依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_drawer: ^x.y.z  # 请替换为最新版本号

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

接下来，是一个完整的示例代码，展示了如何使用simple_drawer来实现侧边导航：

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Simple Drawer Demo'),
      ),
      drawer: SimpleDrawer(
        header: DrawerHeader(
          decoration: BoxDecoration(color: Colors.blue),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text('Drawer Header', style: TextStyle(color: Colors.white)),
          ),
        ),
        items: [
          SimpleDrawerItem(
            icon: Icons.home,
            title: 'Home',
            onTap: () {
              Navigator.of(context).pop(); // 关闭抽屉
              // 执行导航到Home页面的操作，例如: Navigator.pushNamed(context, '/');
            },
          ),
          SimpleDrawerItem(
            icon: Icons.settings,
            title: 'Settings',
            onTap: () {
              Navigator.of(context).pop(); // 关闭抽屉
              // 执行导航到Settings页面的操作，例如: Navigator.pushNamed(context, '/settings');
            },
          ),
          SimpleDrawerItem(
            icon: Icons.logout,
            title: 'Logout',
            onTap: () {
              // 执行登出操作
              Navigator.of(context).popUntil((route) => route.isFirst); // 返回到根页面
            },
          ),
        ],
      ),
      body: Center(
        child: Text('Home Page Content'),
      ),
    );
  }
}

解释

  1. 添加依赖：在pubspec.yaml文件中添加simple_drawer依赖。
  2. 创建应用：在MyApp类中，定义了一个MaterialApp，并设置了主页面为MyHomePage。
  3. 创建主页面：MyHomePage是一个有状态的小部件，它包含一个Scaffold，其中包含一个AppBar和一个drawer。
  4. 定义抽屉：在drawer属性中，我们使用了SimpleDrawer。
    • header属性定义了一个DrawerHeader，其中包含了一些装饰和一个文本。
    • items属性是一个SimpleDrawerItem列表，每个项都有一个图标、标题和一个点击事件回调。
  5. 处理点击事件：在每个SimpleDrawerItem的onTap回调中，我们关闭了抽屉（使用Navigator.of(context).pop()），并执行相应的页面导航或操作。

这个示例代码展示了如何使用simple_drawer插件在Flutter应用中实现一个简单的侧边导航菜单。你可以根据自己的需求进一步自定义和扩展这个示例。

回到顶部