Flutter轨道菜单插件orbitmenu的使用

Flutter轨道菜单插件orbitmenu的使用

描述

OrbitMenu 是一个为 Flutter 应用程序创建动态圆形菜单的多功能插件，支持交互式动画。现在它新增了弹跳和旋转两种动画风格，增强了用户体验。

可以实现的功能

• 动态圆形菜单，中央有一个大圆圈。
• 周围有多个小圆圈作为按钮。
• 完全自定义颜色、大小和行为。
• 调整小圆圈与中心圆的距离。
• 中心圆带有可定制的圆形按钮。
• 三种动画风格：弹跳、旋转、轨道。
• 完全自定义颜色、大小和行为。
• 使用布尔值切换动画。
• 添加图片到项目中。

安装

要在您的 Flutter 项目中使用 OrbitMenu，请在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  orbitmenu: ^latest_version

然后运行 flutter pub get 来安装该包。

使用方法

要实现圆形菜单，请按照以下步骤操作：

1. 导入并使用 AnimatedOrbitMenu 和相关配置类：

   import 'package:orbitmenu/animated_orbit_menu.dart';
   import 'package:orbitmenu/orbit_menu_config.dart';
   import 'package:orbitmenu/orbit_menu_animation_type.dart';
   

2. 使用 AnimatedOrbitMenu 创建菜单：

   AnimatedOrbitMenu(
     animate: true,
     config: OrbitMenuConfig(
       animationDuration: const Duration(seconds: 1),
       animationType: OrbitMenuAnimationType.bouncing,
       menuPositionX: widthSize / 2,
       menuPositiony: heightSize / 2,
       menuColor: const Color.fromARGB(255, 1, 1, 1),
       radius: 100,
       menuItems: itemList,
       itemSize: 100,
       borderCentralMenu: Border.all(color: Colors.red, width: 5),
       itemOffsetPercentage: 1,
     ),
   );
   

3. 添加自定义控件 现在，您可以将自定义控件添加到围绕父圆旋转的子元素列表中。请确保在配置中声明尺寸（itemSize），以便保持元素与父圆同步。您的控件将嵌套在一个父容器中。

   AnimatedOrbitMenu(
     animate: true,
     config: OrbitMenuConfig(
       animationDuration: Duration(seconds: 5),
       animationType: OrbitMenuAnimationType.rotating,
       menuPositionx: widthSize / 2,
       menuPositiony: heightSize / 2,
       menuColor: Colors.deepPurple,
       radius: 100,
       menuItems: itemList,
       itemSize: 50,
       titleStyle: TextStyle(color: Colors.white),
       itemOffsetPercentage: 0.5,
       myWidget: Container(color: Colors.red,)
     )
   );
   

示例

下面是一个示例代码，展示了如何使用 OrbitMenu 插件创建一个圆形菜单：

import 'package:flutter/material.dart';
import 'package:orbitmenu/animated_orbit_menu.dart';
import 'package:orbitmenu/item.dart';
import 'package:orbitmenu/orbit_menu_config.dart';
import 'package:orbitmenu/orbit_menu_animation_type.dart';

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

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

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const Scaffold(
        body: Menu(),
      ),
    );
  }
}

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

  /// Build the widget with the animation
  [@override](/user/override)
  Widget build(BuildContext context) {
    final heightSize = MediaQuery.of(context).size.height;
    final widthSize = MediaQuery.of(context).size.width;
    int numberOfItems = 5;
    List<Item> itemList = List.generate(
        numberOfItems,
        (i) =&gt; Item(
            title: (i + 1).toString(),
            onPressed: () {
              print('touch $i');
            },
            image: 'assets/images/${i+}.png'));

    return AnimatedOrbitMenu(
      animate: true,
      config: OrbitMenuConfig(
          animationDuration: const Duration(seconds: 1),
          animationType: OrbitMenuAnimationType.bouncing,
          menuPositionX: widthSize / 2,
          menuPositionY: heightSize / 2,
          menuColor: const Color.fromARGB(255, 1, 5, 5),
          radius: 100,
          menuItems: itemList,
          itemSize: 100,
          borderCentralMenu: Border.all(color: Colors.red, width: 5),
          itemOffsetPercentage: 1,),
    );
  }
}