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

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

一个类似拨盘的选择器，用于以新的方式选择值。

特性

1. 模块化：拨盘有可以自定义的子组件。
2. 动画效果：拨盘具有强大的动画效果。
3. 选择值：API 提供了回调函数以便于使用。
4. 易于访问：有两种与拨盘交互的方式，通过拖动或点击。

开始使用

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

dependencies:
  circular_selector: ^0.0.1

在您的库中添加以下导入：

import 'package:circular_selector/circular_selector.dart';

现在您可以使用 CircularSelector 小部件了！

使用示例

您可以在下面查看一个简单的示例：

CircularSelector(
    onSelected: (int index) {
        print('Selected: $index');
    },
    childSize: 30.0,
    radiusDividend: 2.5,
    customOffset: Offset(
        0.0,
        AppBar().preferredSize.height,
    ),
    children: CircularSelector.getTestContainers(20, 30.0),
)

对于可执行示例，请参阅 example 文件夹。

完整示例代码

下面是一个完整的示例代码，展示了如何在一个页面中使用多个 CircularSelector 组件。

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:circular_selector/circular_selector.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: '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:
                    CircularSelector.getTestContainers(20, 30.0, rainbow: true),
              ),
              CircularSelector(
                onSelected: testSelected(1),
                childSize: 30.0,
                radiusDividend: 4,
                customOffset: Offset(
                  0.0,
                  AppBar().preferredSize.height -
                      MediaQuery.of(context).padding.top,
                ),
                circleBackgroundColor: const Color.fromARGB(255, 170, 170, 170),
                children:
                    CircularSelector.getTestContainers(10, 30.0, rainbow: true),
              ),
              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, 255, 255, 255),
                children:
                    CircularSelector.getTestContainers(5, 30.0, rainbow: true),
              ),
            ]),
          ),
        ]),
      ),
    );
  }
}