Flutter爆炸菜单插件flutter_boom_menu_new的使用

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

Flutter爆炸菜单插件flutter_boom_menu_new的使用

使用

它是一个已弃用的包flutter_boom_menu的迁移版本。

BoomMenu小部件通常放置在Scaffold.floatingActionButton参数中，以替代FloatingActionButton小部件。无法通过Scaffold.floatingActionButtonLocation参数设置其位置，但可以通过marginRight和marginBottom参数（默认值为16）来设置右边距和下边距，从而将按钮放置在屏幕上的任何位置。如果使用Scaffold.bottomNavigationBar，浮动按钮将始终放置在其上方，因此BottomAppBar.hasNotch应始终为false。

标题

每个子按钮可以有Icon、Title、SubTitle，这些都可以通过自定义参数提供。如果未提供Title参数，则不会渲染标题。

该插件会自行处理动画。

alt 文本

示例用法（包含所有参数）：

  BoomMenu buildBoomMenu() {
    return BoomMenu(
        animatedIcon: AnimatedIcons.menu_close,
        animatedIconTheme: IconThemeData(size: 22.0),
        //child: Icon(Icons.add),
        onOpen: () => print('OPENING DIAL'),
        onClose: () => print('DIAL CLOSED'),
        scrollVisible: scrollVisible,
        overlayColor: Colors.black,
        elevation: 10,
        overlayOpacity: 0.7,
        children: [
          MenuItemModel(
//          child: Icon(Icons.accessibility, color: Colors.black, size: 40,),
            child:
                Image.asset('assets/logout_icon.png', color: Colors.grey[850]),
            title: "退出",
            titleColor: Colors.grey[850]!,
            subtitle: "Lorem ipsum dolor sit amet, consectetur",
            subTitleColor: Colors.grey[850]!,
            backgroundColor: Colors.grey[50]!,
            onTap: () => print('第三个子项'),
            elevation: 10,
          ),
          MenuItemModel(
            child: Image.asset('assets/schemes_icon.png', color: Colors.white),
            title: "列表",
            titleColor: Colors.white,
            subtitle: "Lorem ipsum dolor sit amet, consectetur",
            subTitleColor: Colors.white,
            backgroundColor: Colors.pinkAccent,
            onTap: () => print('第四个子项'),
            elevation: 10,
          ),
          MenuItemModel(
            child: Image.asset('assets/customers_icon.png',
                color: Colors.grey[850]),
            title: "团队",
            titleColor: Colors.grey[850]!,
            subtitle: "Lorem ipsum dolor sit amet, consectetur",
            subTitleColor: Colors.grey[850]!,
            backgroundColor: Colors.grey[50]!,
            onTap: () => print('第三个子项'),
            elevation: 10,
          ),
          MenuItemModel(
            child: Image.asset('assets/profile_icon.png', color: Colors.white),
            title: "个人资料",
            titleColor: Colors.white,
            subtitle: "Lorem ipsum dolor sit amet, consectetur",
            subTitleColor: Colors.white,
            backgroundColor: Colors.blue,
            onTap: () => print('第四个子项'),
            elevation: 10,
          )
        ]);
  }

问题与反馈

如需反馈或报告错误，请在 GitHub Issues 页面 提交。

贡献

欢迎提交拉取请求。

完整示例代码

/// Created by aimen 2022-07-27.
/// Email : aymensayoud2019@gmail.com

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

import 'package:flutter_boom_menu_new/flutter_boom_menu_new.dart';

void main() {
  runApp(MaterialApp(home: MyApp(), title: 'Boom Menu 示例'));
}

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

class MyAppState extends State<MyApp> with TickerProviderStateMixin {
  ScrollController? scrollController;
  bool scrollVisible = true;

  [@override](/user/override)
  void initState() {
    super.initState();

    scrollController = ScrollController()
      ..addListener(() {
        setDialVisible(scrollController!.position.userScrollDirection == ScrollDirection.forward);
      });
  }

  void setDialVisible(bool value) {
    setState(() {
      scrollVisible = value;
    });
  }

  Widget buildBody() {
    return ListView.builder(
      controller: scrollController,
      itemCount: 30,
      itemBuilder: (ctx, i) => ListTile(title: Text('项目 $i')),
    );
  }

  BoomMenu buildBoomMenu() {
    return BoomMenu(
        animatedIcon: AnimatedIcons.menu_close,
        animatedIconTheme: IconThemeData(size: 22.0),
        //child: Icon(Icons.add),
        onOpen: () => print('打开拨盘'),
        onClose: () => print('拨盘关闭'),
        scrollVisible: scrollVisible,
        overlayColor: Colors.black,
        elevation: 10,
        overlayOpacity: 0.7,
        children: [
          MenuItemModel(
//          child: Icon(Icons.accessibility, color: Colors.black, size: 40,),
            child:
                Image.asset('assets/logout_icon.png', color: Colors.grey[850]),
            title: "退出",
            titleColor: Colors.grey[850]!,
            subtitle: "Lorem ipsum dolor sit amet, consectetur",
            subTitleColor: Colors.grey[850]!,
            backgroundColor: Colors.grey[50]!,
            onTap: () => print('第三个子项'),
            elevation: 10,
          ),
          MenuItemModel(
            child: Image.asset('assets/schemes_icon.png', color: Colors.white),
            title: "列表",
            titleColor: Colors.white,
            subtitle: "Lorem ipsum dolor sit amet, consectetur",
            subTitleColor: Colors.white,
            backgroundColor: Colors.pinkAccent,
            onTap: () => print('第四个子项'),
            elevation: 10,
          ),
          MenuItemModel(
            child: Image.asset('assets/customers_icon.png',
                color: Colors.grey[850]),
            title: "团队",
            titleColor: Colors.grey[850]!,
            subtitle: "Lorem ipsum dolor sit amet, consectetur",
            subTitleColor: Colors.grey[850]!,
            backgroundColor: Colors.grey[50]!,
            onTap: () => print('第三个子项'),
            elevation: 10,
          ),
          MenuItemModel(
            child: Image.asset('assets/profile_icon.png', color: Colors.white),
            title: "个人资料",
            titleColor: Colors.white,
            subtitle: "Lorem ipsum dolor sit amet, consectetur",
            subTitleColor: Colors.white,
            backgroundColor: Colors.blue,
            onTap: () => print('第四个子项'),
            elevation: 10,
          )
        ]);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Boom Menu 示例')),
      body: buildBody(),
      floatingActionButton: buildBoomMenu(),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何使用 flutter_boom_menu_new 插件的示例代码。这个插件允许你创建一个爆炸菜单效果，类似于径向菜单。下面是一个基本的实现示例：

首先，确保在你的 pubspec.yaml 文件中添加 flutter_boom_menu_new 依赖：

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

然后，运行 flutter pub get 来获取依赖。

接下来，在你的 Dart 文件中实现爆炸菜单。以下是一个完整的示例代码：

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

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

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

class BoomMenuPage extends StatefulWidget {
  @override
  _BoomMenuPageState createState() => _BoomMenuPageState();
}

class _BoomMenuPageState extends State<BoomMenuPage> with SingleTickerProviderStateMixin {
  late BoomMenuButtonController _controller;

  @override
  void initState() {
    super.initState();
    _controller = BoomMenuButtonController();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Boom Menu Example'),
      ),
      body: Center(
        child: BoomMenuButton<String>(
          controller: _controller,
          buttonType: BoomMenuButtonType.circle, // 可选类型: BoomMenuButtonType.circle 或 BoomMenuButtonType.plus
          itemCount: 6,
          buttonWidth: 200,
          buttonHeight: 200,
          subButtonSpacingAngle: 360 / 6,
          effect: BoomMenuEffect.zoom, // 可选效果: BoomMenuEffect.zoom 或 BoomMenuEffect.slide 或 BoomMenuEffect.sticky
          space: 20,
          playAnimationOnInit: true,
          children: List.generate(6, (index) {
            return BoomMenuItem(
              child: Container(
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.blue[index * 100],
                ),
                alignment: Alignment.center,
                child: Text(
                  'Item ${index + 1}',
                  style: TextStyle(color: Colors.white),
                ),
              ),
              background: Container(
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.blue[index * 100].withOpacity(0.5),
                ),
              ),
              onClick: () {
                print('Clicked on item ${index + 1}');
                _controller.closeMenu(); // 关闭菜单
              },
            );
          }),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller.openMenu();
        },
        tooltip: 'Open Menu',
        child: Icon(Icons.menu),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，其中包含一个 BoomMenuButton。当用户点击浮动操作按钮（FAB）时，菜单会打开。每个菜单项都是一个带有文本标签的圆形按钮，当用户点击某个菜单项时，会在控制台打印出相应的信息，并关闭菜单。

  • BoomMenuButtonController 用于控制菜单的打开和关闭。
  • buttonType 定义了菜单按钮的形状（圆形或加号）。
  • itemCount 指定了菜单项的数量。
  • subButtonSpacingAngle 定义了每个菜单项之间的角度间隔。
  • effect 定义了菜单项的动画效果。
  • children 是一个 BoomMenuItem 列表，每个 BoomMenuItem 代表一个菜单项。

这个示例展示了 flutter_boom_menu_new 插件的基本用法，你可以根据需要进一步自定义和扩展菜单项的外观和行为。

回到顶部