Flutter轮盘选择器插件spinner_wheel的使用

spinner_wheel 是一个 Flutter 插件，用于创建一个类似轮盘的选择器，用户可以旋转轮盘来选择不同的选项。它通常用于需要用户从多个选项中选择一个的场景，比如选择日期、时间、数字等。

安装 spinner_wheel

首先，你需要在 pubspec.yaml 文件中添加 spinner_wheel 依赖：

dependencies:
  flutter:
    sdk: flutter
  spinner_wheel: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

使用 spinner_wheel

以下是一个简单的示例，展示了如何使用 spinner_wheel 插件来创建一个数字选择器。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Spinner Wheel Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SpinnerWheelDemo(),
    );
  }
}

class SpinnerWheelDemo extends StatefulWidget {
  @override
  _SpinnerWheelDemoState createState() => _SpinnerWheelDemoState();
}

class _SpinnerWheelDemoState extends State<SpinnerWheelDemo> {
  int selectedValue = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Spinner Wheel Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SpinnerWheel(
              items: List.generate(100, (index) => index.toString()),
              onChanged: (value) {
                setState(() {
                  selectedValue = int.parse(value);
                });
              },
              initialIndex: 50, // 初始选中项
              itemExtent: 40.0, // 每个选项的高度
              magnification: 1.5, // 放大倍数
              perspective: 0.01, // 透视效果
              diameterRatio: 2.0, // 轮盘直径比例
            ),
            SizedBox(height: 20),
            Text(
              'Selected Value: $selectedValue',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

参数说明

• items: 一个包含所有选项的列表。每个选项通常是一个字符串。
• onChanged: 当用户选择了一个新选项时触发的回调函数。value 是选中的选项。
• initialIndex: 初始选中的选项索引。
• itemExtent: 每个选项的高度。
• magnification: 放大倍数，用于调整选中项的大小。
• perspective: 透视效果，通常设置为 0.01 以产生类似 3D 的效果。
• diameterRatio: 轮盘直径比例，用于调整轮盘的大小。

自定义样式

你可以通过调整 SpinnerWheel 的参数来自定义轮盘的外观，比如使用 TextStyle 来设置文本样式，或者使用 BoxDecoration 来设置背景颜色和边框。

SpinnerWheel(
  items: List.generate(100, (index) => index.toString()),
  onChanged: (value) {
    setState(() {
      selectedValue = int.parse(value);
    });
  },
  initialIndex: 50,
  itemExtent: 40.0,
  magnification: 1.5,
  perspective: 0.01,
  diameterRatio: 2.0,
  itemStyle: TextStyle(fontSize: 20, color: Colors.blue),
  selectedItemStyle: TextStyle(fontSize: 24, color: Colors.red, fontWeight: FontWeight.bold),
  decoration: BoxDecoration(
    color: Colors.grey[200],
    borderRadius: BorderRadius.circular(10),
    border: Border.all(color: Colors.blue),
  ),
),