Flutter轮盘选择器插件 `wheel_spinner` 的使用

WheelSpinner 提供了一个类似轮盘、旋钮或更具体地说是音高调节旋钮的简单数字选择器。它允许你通过手指滑动或拖动来更新一个 double 值，就像下面的例子所示。

如何使用

只需导入包并使用暴露的 WheelSpinner 小部件即可。查看各个参数以获取更多关于主题和显示自定义以及事件处理程序的详细信息。以下是一个完整的使用示例：

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

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  late double value;

  @override
  void initState() {
    value = Random().nextDouble() * 100;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: 100,
        height: 60,
        child: WheelSpinnerTheme(
          data: WheelSpinnerThemeData.light().copyWith(
            borderRadius: BorderRadius.circular(10),
            dividerColor: Colors.black,
          ),
          child: WheelSpinner(
            value: value,
            min: 0.0,
            max: 100.0,
            onSlideStart: (val) => debugPrint('Start: $val'),
            onSlideUpdate: (val) => setState(() => value = val),
            onSlideDone: (val) => debugPrint('Done: $val'),
            childBuilder: (val) => Text(val.toString()),
          ),
        ),
      ),
    );
  }
}

必需参数

value: 当前值。
min: 最小值。
max: 最大值。

可选参数

onSlideStart: 滑动开始时的回调函数。
onSlideUpdate: 滑动过程中更新时的回调函数。
onSlideDone: 滑动结束时的回调函数。
childBuilder: 自定义显示内容的小部件构建器。
theme: 主题配置。

自定义主题

你可以使用 theme 属性覆盖一次主题，或者将多个选择器包裹在同一个 WheelSpinnerTheme 小部件中，该小部件在其 data 属性中引用一个主题。

直接覆盖示例

WheelSpinner(
  value: value,
  min: 0.0,
  max: 100.0,
  onSlideUpdate: (val) => onChange(value),
  theme: WheelSpinnerTheme.light().copyWith(
    borderRadius: BorderRadius.circular(10),
  ),
)

继承小部件覆盖示例

WheelSpinnerTheme(
  data: WheelSpinnerTheme.light().copyWith(
    borderRadius: BorderRadius.circular(10),
  ),
  child: WheelSpinner(
    value: value,
    min: 0.0,
    max: 100.0,
    onSlideUpdate: (val) => onChange(value),
  ),
)

更多关于Flutter轮盘选择器插件wheel_spinner的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 1楼•5 小时前作者

更多关于Flutter轮盘选择器插件wheel_spinner的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter项目中使用wheel_spinner插件来实现轮盘选择器的代码示例。这个插件允许你创建一个可旋转的轮盘选择器，适用于需要从一组选项中进行选择的场景。

首先，确保你已经在pubspec.yaml文件中添加了wheel_spinner依赖：

dependencies:
  flutter:
    sdk: flutter
  wheel_spinner: ^latest_version  # 请替换为实际的最新版本号

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

接下来，你可以在你的Flutter项目中创建一个包含轮盘选择器的页面。以下是一个完整的示例代码：

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

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

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

class WheelSpinnerDemo extends StatefulWidget {
  @override
  _WheelSpinnerDemoState createState() => _WheelSpinnerDemoState();
}

class _WheelSpinnerDemoState extends State<WheelSpinnerDemo> {
  String selectedItem = 'Item 1';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wheel Spinner Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Item: $selectedItem',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            WheelSpinner(
              items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
              itemCount: 5,
              itemHeight: 50,
              itemWidth: 200,
              itemSpace: 20,
              itemFontSize: 20,
              itemColor: Colors.white,
              circleColor: Colors.blue,
              selectedColor: Colors.blueAccent,
              onSelected: (index) {
                setState(() {
                  selectedItem = 'Item ${index + 1}';
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

添加依赖：在pubspec.yaml文件中添加了wheel_spinner依赖。
创建主应用：在MyApp类中定义了应用的入口。
创建演示页面：在WheelSpinnerDemo类中定义了包含轮盘选择器的页面。
定义状态：在_WheelSpinnerDemoState类中管理选中项的状态。
构建UI：使用WheelSpinner组件创建了一个轮盘选择器，并设置了相关属性，如items（选项列表）、itemCount（选项数量）、itemHeight（选项高度）、itemWidth（选项宽度）、itemSpace（选项间距）、itemFontSize（选项字体大小）、itemColor（选项颜色）、circleColor（轮盘颜色）、selectedColor（选中项颜色）以及onSelected（选中项回调）。

当用户旋转轮盘选择器时，onSelected回调会被触发，更新选中项的状态并显示在屏幕上。

这个示例展示了如何使用wheel_spinner插件在Flutter应用中实现一个简单的轮盘选择器。你可以根据需要进一步自定义和扩展这个示例。

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