Flutter圆形选择器插件circle_wheel的使用

Flutter圆形选择器插件circle_wheel的使用

圆形选择器插件circle_wheel简介

Flutter에서 아름답고 상호작용이 가능한 방사형 레이아웃을 부드러운 360도 회전으로 구현할 수 있는 유연한 원형 휠 위젯입니다.

示例

特点

丰富的旋转控制

• 支持手势的平滑360度旋转
• 可自定义的旋转阻力和动画曲线
• 可选的反弹效果

智能热点系统

• 定义单个或多个热点位置
• 热点处动态的项目缩放
• 可自定义的热点角度和范围

灵活的样式

• 支持任何类型的widget作为项目
• 动态缩放和动画
• 灵活的布局选项（完整的圆或部分圆）

性能优化

• 可选的基于可见性的渲染
• 平滑的动画和过渡

访问性支持

• 支持语义标签
• 可选的触觉反馈
• 可配置的交互模式

平台支持

要求

• Dart SDK: ^3.5.4
• Flutter: >=1.17.0
• Android: minSdkVersion 16
• iOS: iOS 11.0 or higher
• Web: 所有现代浏览器
• 桌面: Windows 10+, macOS 10.14+, Linux (GTK 3.x)

安装

pubspec.yaml 文件中添加 circle_wheel：

dependencies:
  circle_wheel: 0.0.1+2

基本用法

import 'package:circle_wheel/circle_wheel.dart';

CircleWheel(
  radius: 150, // 轮子半径
  itemCount: 8, // 项目数量
  itemBuilder: (index, isAtHotspot) { // 项目构建器
    return Icon(
      Icons.star, // 星星图标
      size: isAtHotspot ? 32 : 24, // 热点时放大
      color: isAtHotspot ? Colors.amber : Colors.grey, // 热点时颜色变化
    );
  },
)

高级用法

交互式菜单

CircleWheel(
  radius: 150, // 轮子半径
  itemCount: 6, // 项目数量
  snapToHotspot: true, // 吸附到热点
  hotspotScale: 1.2, // 热点缩放比例
  onItemSelected: (index) { // 项目选择回调
    // 处理项目选择
  },
  itemBuilder: (index, isAtHotspot) { // 项目构建器
    return MenuOption(
      icon: menuIcons[index], // 图标
      label: menuLabels[index], // 标签
      isSelected: isAtHotspot, // 是否为热点
    );
  },
)

自动旋转显示

CircleWheel(
  radius: 180, // 轮子半径
  itemCount: 12, // 项目数量
  autoRotate: true, // 自动旋转
  autoRotateSpeed: 0.5, // 自动旋转速度
  itemBuilder: (index, isAtHotspot) { // 项目构建器
    return AnimatedContainer(
      duration: Duration(milliseconds: 200), // 动画持续时间
      width: isAtHotspot ? 100 : 80, // 热点时放大
      height: isAtHotspot ? 100 : 80, // 热点时放大
      child: YourCustomWidget(), // 自定义widget
    );
  },
)

自定义

主要选项

动画选项

• rotationDuration: 旋转动画持续时间
• rotationCurve: 旋转动画曲线
• hotspotTransitionDuration: 热点过渡持续时间
• autoRotate: 开启自动旋转
• autoRotateSpeed: 自动旋转速度

布局选项

• radius: 轮子半径
• startAngle: 轮子起始角度
• endAngle: 部分轮子的结束角度（可选）
• innerRadius: 环形布局的内半径（可选）

交互选项

• snapToHotspot: 开启吸附到热点
• rotationResistance: 控制旋转灵敏度
• bounceBack: 开启反弹效果
• multipleHotspots: 定义多个热点位置

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 circle_wheel 插件。

import 'package:example/MusicPlayerExample.dart';
import 'package:example/StepCounterExample.dart';
import 'package:example/TodoListExample.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CircleWheel Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('CircleWheel Examples'),
      ),
      body: ListView(
        children: [
          ListTile(
            title: const Text('Music Player'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => const MusicPlayerExample()),
              );
            },
          ),
          ListTile(
            title: const Text('Scheduler'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => const TodoListExample()),
              );
            },
          ),
          ListTile(
            title: const Text('Step Counter'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => const StepCounterExample()),
              );
            },
          ),
        ],
      ),
    );
  }
}