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

在Flutter开发中，circular_selector_v2 是一个非常实用的插件，用于创建圆形选择器。它可以帮助开发者快速实现类似于苹果设备上的控制中心功能。本文将详细介绍如何使用 circular_selector_v2 插件，并提供完整的代码示例。

使用步骤

1. 添加依赖

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

dependencies:
  circular_selector_v2: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

2. 创建基本布局

我们将使用 CircularSelector 小部件来创建一个圆形选择器，并将其嵌套在一个 Stack 中，以便实现多层选择器的效果。

示例代码

以下是完整的示例代码，展示了如何使用 circular_selector_v2 插件：

// 导入必要的库
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:circular_selector_v2/circular_selector_v2.dart';

void main() {
  // 启动应用
  runApp(const MyApp());
}

// 定义主应用程序类
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Circular Selector Demo',
      themeMode: ThemeMode.system,
      darkTheme: ThemeData.dark(),
      home: const MyHomePage(title: 'Circular Selector Demo'),
    );
  }
}

// 定义主页面类
class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  // 定义选择回调函数
  Function(int) testSelected(int selectorIndex) {
    return (index) {
      if (kDebugMode) {
        print('Selected: $index of selector $selectorIndex');
      }
    };
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Stack(children: [
          // 第一层圆形选择器
          Container(
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
            ),
            child: Stack(alignment: Alignment.center, children: [
              CircularSelector(
                onSelected: testSelected(0), // 回调函数
                childSize: 30.0, // 子项大小
                radiusDividend: 2.5, // 半径倍数
                customOffset: Offset(
                  0.0,
                  AppBar().preferredSize.height -
                      MediaQuery.of(context).padding.top,
                ), // 自定义偏移量
                circleBackgroundColor: const Color.fromARGB(255, 85, 85, 85), // 圆形背景颜色
                children: const [
                  Icon(Icons.person), // 子项图标
                  Icon(Icons.notifications),
                  Icon(Icons.nightlight),
                  Icon(Icons.volume_up),
                  Icon(Icons.wb_sunny),
                  Icon(Icons.settings),
                ],
              ),
              // 第二层圆形选择器
              CircularSelector(
                onSelected: testSelected(2), // 回调函数
                childSize: 30.0, // 子项大小
                radiusDividend: 7, // 半径倍数
                customOffset: Offset(
                  0.0,
                  AppBar().preferredSize.height -
                      MediaQuery.of(context).padding.top,
                ), // 自定义偏移量
                circleBackgroundColor: const Color.fromARGB(255, 0, 0, 0), // 圆形背景颜色
                children: const [
                  Icon(Icons.home_filled), // 子项图标
                  Icon(Icons.logout),
                ],
              ),
            ]),
          ),
        ]),
      ),
    );
  }
}