Flutter侧边菜单收缩插件shrink_sidemenu的使用

Flutter侧边菜单收缩插件shrink_sidemenu的使用

Liquid收缩侧边菜单

shrink_sidemenu 是一个为Flutter设计的侧边菜单插件，兼容 liquid_ui。

Liquid Ui收缩侧边菜单

侧边菜单类型

有8种配置的Liquid收缩侧边菜单：

1. SlideNRotate

2. SlideNRotate Inverse

3. ShrinkNRotate

4. ShrinkNRotate Inverse

5. Slide

6. Slide Inverse

7. ShrinkNSlide

8. ShrinkNSlide Inverse

开始使用

步骤1：在pubspec.yaml文件中添加依赖项

dependencies:
  flutter:
    sdk: flutter
  liquid_ui: // 用于额外功能

  shrink_sidemenu: // Liquid收缩侧边菜单不依赖于liquid

步骤2：将Scaffold包裹在SideMenu中

final GlobalKey<SideMenuState> _sideMenuKey = GlobalKey<SideMenuState>();

SideMenu(
  key: _sideMenuKey,
  menu: buildMenu(),
  type: SideMenuType.slideNRotate, // 选择一种菜单类型
  child: Scaffold(
    appBar: AppBar(
      leading: IconButton(
        icon: Icon(Icons.menu),
        onPressed: () {
          final _state = _sideMenuKey.currentState;
          if (_state.isOpened)
            _state.closeSideMenu(); // 关闭侧边菜单
          else
            _state.openSideMenu(); // 打开侧边菜单
        },
      ),
      title: Text('侧边菜单'),
    ),
    body: Center(
      child: Text('主页面内容'),
    ),
  ),
);

关于liquid ui for flutter

liquid_ui 是一个开源UI工具包，用于在Flutter中开发跨平台应用。可以快速创建Android、iOS、Web或桌面应用，具有强大的网格系统、文本处理器、表单、预构建组件和多种实用工具。

作者

Raj Singh

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

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Liquid收缩侧边菜单',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(title: 'Liquid收缩侧边菜单'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  bool isOpened = false;

  final GlobalKey<SideMenuState> _sideMenuKey = GlobalKey<SideMenuState>();
  final GlobalKey<SideMenuState> _endSideMenuKey = GlobalKey<SideMenuState>();

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  toggleMenu([bool end = false]) {
    if (end) {
      final _state = _endSideMenuKey.currentState!;
      if (_state.isOpened) {
        _state.closeSideMenu();
      } else {
        _state.openSideMenu();
      }
    } else {
      final _state = _sideMenuKey.currentState!;
      if (_state.isOpened) {
        _state.closeSideMenu();
      } else {
        _state.openSideMenu();
      }
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SideMenu(
      key: _endSideMenuKey,
      inverse: true, // 右侧侧边菜单
      background: Colors.green[700],
      type: SideMenuType.slideNRotate,
      menu: Padding(
        padding: const EdgeInsets.only(left: 25.0),
        child: buildMenu(),
      ),
      onChange: (_isOpened) {
        setState(() => isOpened = _isOpened);
      },
      child: SideMenu(
        key: _sideMenuKey,
        menu: buildMenu(),
        type: SideMenuType.slideNRotate,
        onChange: (_isOpened) {
          setState(() => isOpened = _isOpened);
        },
        child: IgnorePointer(
          ignoring: isOpened,
          child: Scaffold(
            appBar: AppBar(
              centerTitle: true,
              leading: IconButton(
                icon: const Icon(Icons.menu),
                onPressed: () => toggleMenu(),
              ),
              actions: [
                IconButton(
                  icon: const Icon(Icons.menu),
                  onPressed: () => toggleMenu(true),
                )
              ],
              title: Text(widget.title),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Text(
                    '你已经点击了按钮多少次：',
                  ),
                  Text(
                    '$_counter',
                    style: Theme.of(context).textTheme.headline4,
                  ),
                ],
              ),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: _incrementCounter,
              tooltip: '增加计数',
              child: const Icon(Icons.add),
            ),
          ),
        ),
      ),
    );
  }

  Widget buildMenu() {
    return SingleChildScrollView(
      padding: const EdgeInsets.symmetric(vertical: 50.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.only(left: 16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: const [
                CircleAvatar(
                  backgroundColor: Colors.white,
                  radius: 22.0,
                ),
                SizedBox(height: 16.0),
                Text(
                  "你好，John Doe",
                  style: TextStyle(color: Colors.white),
                ),
                SizedBox(height: 20.0),
              ],
            ),
          ),
          ListTile(
            onTap: () {},
            leading: const Icon(Icons.home, size: 20.0, color: Colors.white),
            title: const Text("首页"),
            textColor: Colors.white,
            dense: true,
          ),
          ListTile(
            onTap: () {},
            leading: const Icon(Icons.verified_user,
                size: 20.0, color: Colors.white),
            title: const Text("个人资料"),
            textColor: Colors.white,
            dense: true,
          ),
          ListTile(
            onTap: () {},
            leading: const Icon(Icons.monetization_on,
                size: 20.0, color: Colors.white),
            title: const Text("钱包"),
            textColor: Colors.white,
            dense: true,
          ),
          ListTile(
            onTap: () {},
            leading: const Icon(Icons.shopping_cart,
                size: 20.0, color: Colors.white),
            title: const Text("购物车"),
            textColor: Colors.white,
            dense: true,
          ),
          ListTile(
            onTap: () {},
            leading: const Icon(Icons.star_border,
                size: 20.0, color: Colors.white),
            title: const Text("收藏夹"),
            textColor: Colors.white,
            dense: true,
          ),
          ListTile(
            onTap: () {},
            leading: const Icon(Icons.settings,
                size: 20.0, color: Colors.white),
            title: const Text("设置"),
            textColor: Colors.white,
            dense: true,
          ),
        ],
      ),
    );
  }
}

更多关于Flutter侧边菜单收缩插件shrink_sidemenu的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然，以下是如何在Flutter项目中使用shrink_sidemenu插件来实现侧边菜单收缩效果的代码示例。

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

dependencies:
  flutter:
    sdk: flutter
  shrink_sidemenu: ^最新版本号  # 请替换为实际的最新版本号

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

接下来，在你的Flutter项目中创建一个使用ShrinkSideMenu的示例页面。以下是一个完整的代码示例：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  double _menuWidth = 250.0;
  bool _isMenuOpen = true;

  void _toggleMenu() {
    setState(() {
      _isMenuOpen = !_isMenuOpen;
      _menuWidth = _isMenuOpen ? 250.0 : 60.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shrink Side Menu Example'),
        leading: IconButton(
          icon: Icon(_isMenuOpen ? Icons.menu : Icons.arrow_back),
          onPressed: _toggleMenu,
        ),
      ),
      body: Stack(
        children: [
          ShrinkSideMenu(
            menuWidth: _menuWidth,
            menu: Container(
              color: Colors.blueGrey[500],
              child: ListView(
                padding: EdgeInsets.zero,
                children: <Widget>[
                  ListTile(
                    leading: Icon(Icons.home),
                    title: Text('Home'),
                    onTap: () {},
                  ),
                  ListTile(
                    leading: Icon(Icons.settings),
                    title: Text('Settings'),
                    onTap: () {},
                  ),
                  // 添加更多菜单项
                ],
              ),
            ),
            content: Container(
              color: Colors.white,
              child: Center(
                child: Text('Main Content Area'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个侧边菜单和一个主内容区域。侧边菜单的宽度和内容区域的显示状态通过_menuWidth和_isMenuOpen变量控制。当用户点击AppBar上的图标时，_toggleMenu函数会被调用，从而切换菜单的展开和收缩状态。

ShrinkSideMenu组件接受两个主要参数：menu和content。menu参数定义了侧边菜单的内容，而content参数定义了主内容区域的内容。menuWidth参数控制侧边菜单的宽度。

请注意，shrink_sidemenu插件的具体API可能会随着版本的更新而变化，因此建议查阅最新的官方文档以获取最新的使用方法和API信息。

回到顶部