Flutter可控轮盘滑块插件wheel_slider_controllable的使用

Flutter可控轮盘滑块插件wheel_slider_controllable的使用

Wheel Slider 提供了许多自定义选项，并允许用户以类似轮子的外观进行滚动。

gif of wheel slider gif of wheel slider

Wheel Slider 基于 wheel_chooser 构建。

功能特性

  • 🔢 显示数字而不是线条。
  • ↔↕ 水平/垂直滚动。
  • 📳 在滚动时振动。
  • 🔧 自定义小部件。
  • 🔧 自定义指针。
  • 🖼️ 为滑块添加背景小部件。
  • 🎨 更改线条或指针的颜色。

开始使用

安装

在 pubspec.yaml 文件中添加 wheel_slider: 依赖项，然后运行 flutter pub get。

dependencies:
  wheel_slider:

导入

在文件顶部添加以下导入语句：

import 'package:wheel_slider/wheel_slider.dart';

Android

在 AndroidManifest.xml 文件中添加振动权限，位于 <project root>/android/app/src/main/AndroidManifest.xml。

<uses-permission android:name="android.permission.VIBRATE"/>

iOS

支持 CoreHaptics 设备上的振动持续时间和模式。在旧设备上，模式通过 500ms 的振动来模拟。

使用示例

默认轮盘滑块

WheelSlider(
    totalCount: _totalCount,
    initValue: _initValue,
    onValueChanged: (val) {
        setState(() {
          _currentValue = val;
        });
    },
    hapticFeedbackType: HapticFeedbackType.vibrate,
),

显示双精度值的轮盘滑块

WheelSlider(
    interval: 0.5,  // 此字段用于显示十进制/双精度值
    totalCount: _totalCount,
    initValue: _initValue,
    onValueChanged: (val) {
        setState(() {
          _currentValue = val;
        });
    },
    hapticFeedbackType: HapticFeedbackType.vibrate,
),

数字轮盘滑块

WheelSlider.number(
    perspective: 0.01,
    totalCount: _nTotalCount,
    initValue: _nInitValue,
    unSelectedNumberStyle: const TextStyle(
        fontSize: 12.0,
        color: Colors.black54,
    ),
    currentIndex: _nCurrentValue,
    onValueChanged: (val) {
        setState(() {
          _nCurrentValue = val;
        });
    },
    hapticFeedbackType: HapticFeedbackType.heavyImpact,
),

显示双精度值的数字轮盘滑块

WheelSlider.number(
    interval: 0.5, // 此字段用于显示十进制/双精度值
    perspective: 0.01,
    totalCount: _nTotalCount,
    initValue: _nInitValue,
    unSelectedNumberStyle: const TextStyle(
        fontSize: 12.0,
        color: Colors.black54,
    ),
    currentIndex: _nCurrentValue,
    onValueChanged: (val) {
        setState(() -> {
          _nCurrentValue = val;
        });
    },
    hapticFeedbackType: HapticFeedbackType.heavyImpact,
),

自定义小部件轮盘滑块

WheelSlider.customWidget(
    totalCount: 12,
    initValue: 5,
    isInfinite: false,
    scrollPhysics: const BouncingScrollPhysics(),
    children: List.generate(12, (index) => const Center(
        child: FlutterLogo(
            size: 100,
        ),
    )),
    onValueChanged: (val) {
        setState(() {
          _cCurrentValue = val;
        });
    },
    hapticFeedbackType: HapticFeedbackType.vibrate,
    showPointer: false,
    itemSize: 80,
),

属性说明

  • interval - 用于显示十进制值。默认值为 1，更改时也需要相应更新 totalCount。
  • currentIndex - 获取当前值（滚动时）。
  • perspective - 调整滑块从平面到轮状的外观，值必须 <= 0.01。
  • squeeze - 调整滑块中每个项目的间距。
  • isVibrate - 启用或禁用滚动时的振动。
  • hapticFeedbackType - 更改振动类型。
  • itemSize - 滑块中每个项目的大小。
  • background - 使用任何小部件作为滑块的背景。
  • allowPointerTappable:
    • 设置为 false 时，占用区域的滚动功能将被禁用。
    • 使用带有 GestureDetector 或 InkWell 的自定义指针时，设置为 false 以启用手势。
    • 使用默认指针时，将其设置为默认状态即 true。

完整示例代码

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

import 'package:example/wheelslider_with_double.dart';
import 'package:example/widgets/custom_box.dart';
import 'package:flutter/material.dart';
import 'package:wheel_slider/wheel_slider.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(
      theme: ThemeData(
        textTheme: const TextTheme(
          headlineSmall: TextStyle(
            fontWeight: FontWeight.w600,
            fontSize: 20.0,
          ),
        ),
      ),
      debugShowCheckedModeBanner: false,
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final int _totalCount = 100;
  final int _initValue = 50;
  int _currentValue = 50;

  final int _nTotalCount = 50;
  final int _nInitValue = 10;
  int _nCurrentValue = 10;

  final int _cInitValue = 7;
  int _cCurrentValue = 7;

  final List<Map<String, String>> _countryList = [
    {'flag': 'assets/argentina.png', 'name': 'Argentina'},
    {'flag': 'assets/australia.png', 'name': 'Australia'},
    {'flag': 'assets/brazil.png', 'name': 'Brazil'},
    {'flag': 'assets/canada.png', 'name': 'Canada'},
    {'flag': 'assets/cuba.png', 'name': 'Cuba'},
    {'flag': 'assets/hungary.png', 'name': 'Hungary'},
    {'flag': 'assets/iceland.png', 'name': 'Iceland'},
    {'flag': 'assets/india.png', 'name': 'India'},
    {'flag': 'assets/monaco.png', 'name': 'Monaco'},
    {'flag': 'assets/south-africa.png', 'name': 'South Africa'},
    {'flag': 'assets/ukraine.png', 'name': 'Ukraine'},
    {'flag': 'assets/usa.png', 'name': 'USA'},
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text(
          'Wheel Slider',
          style: TextStyle(
            fontWeight: FontWeight.w600,
            fontSize: 20.0,
          ),
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(10.0),
        child: SingleChildScrollView(
          physics: const BouncingScrollPhysics(),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ElevatedButton(
                  onPressed: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => const WheelSliderWithDouble()));
                  },
                  child: const Text('Examples with double value')),
              const SizedBox(
                height: 10.0,
              ),
              CustomBox(
                title: 'Default Wheel Slider',
                wheelSlider: WheelSlider(
                  totalCount: _totalCount,
                  initValue: _initValue,
                  onValueChanged: (val) {
                    setState(() {
                      _currentValue = val;
                    });
                  },
                  hapticFeedbackType: HapticFeedbackType.vibrate,
                  pointerColor: Colors.redAccent,
                ),
                valueText: Text(
                  _currentValue.toString(),
                  style: const TextStyle(
                    fontSize: 18.0,
                    height: 2.0,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
              const SizedBox(
                height: 30.0,
              ),
              CustomBox(
                title: 'Numbered Wheel Slider',
                wheelSlider: WheelSlider.number(
                  horizontal: false,
                  verticalListHeight: 300.0,
                  perspective: 0.01,
                  totalCount: _nTotalCount,
                  initValue: _nInitValue,
                  unSelectedNumberStyle: const TextStyle(
                    fontSize: 16.0,
                    color: Colors.black54,
                  ),
                  selectedNumberStyle: const TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.redAccent,
                  ),
                  currentIndex: _nCurrentValue,
                  onValueChanged: (val) {
                    setState(() {
                      _nCurrentValue = val;
                    });
                  },
                  hapticFeedbackType: HapticFeedbackType.heavyImpact,
                ),
              ),
              const SizedBox(
                height: 40.0,
              ),
              CustomBox(
                title: 'Custom Widget Wheel Slider',
                wheelSlider: WheelSlider.customWidget(
                  totalCount: _countryList.length,
                  initValue: _cInitValue,
                  isInfinite: false,
                  scrollPhysics: const BouncingScrollPhysics(),
                  children: List.generate(
                      _countryList.length,
                      (index) => Center(
                            child: Image.asset(
                              _countryList[index]['flag']!,
                              scale: _cCurrentValue == index ? null : 1.3,
                              color: _cCurrentValue == index
                                  ? Colors.transparent
                                  : Colors.white,
                              colorBlendMode: BlendMode.color,
                            ),
                          )),
                  onValueChanged: (val) {
                    setState(() {
                      _cCurrentValue = val;
                    });
                  },
                  hapticFeedbackType: HapticFeedbackType.vibrate,
                  showPointer: false,
                  itemSize: 80,
                ),
                valueText: Text(
                  _countryList[_cCurrentValue]['name'].toString(),
                  style: const TextStyle(
                    fontSize: 18.0,
                    height: 2.0,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
              const SizedBox(
                height: 40.0,
              ),
              CustomBox(
                title: 'Custom Pointer Wheel Slider',
                wheelSlider: WheelSlider(
                  totalCount: _totalCount,
                  initValue: _initValue,
                  perspective: 0.01,
                  isVibrate: false,
                  background: Container(
                    width: 300,
                    height: double.infinity,
                    color: Colors.brown,
                  ),
                  lineColor: Colors.white,
                  customPointer: const ImageIcon(
                    AssetImage('assets/crosshair.png'),
                    color: Colors.black,
                    size: 35.0,
                  ),
                  onValueChanged: (val) {},
                ),
              ),
              const SizedBox(
                height: 40.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter可控轮盘滑块插件wheel_slider_controllable的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


wheel_slider_controllable 是一个 Flutter 插件，它提供了一个可控制的轮盘滑块（Wheel Slider），允许用户通过滑动轮盘来选择数值。这个插件非常适合用于需要用户从一系列数值中选择的场景，比如选择年龄、时间、日期等。

安装

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

dependencies:
  flutter:
    sdk: flutter
  wheel_slider_controllable: ^0.0.1  # 请使用最新版本

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

基本用法

以下是一个简单的示例，展示了如何使用 wheel_slider_controllable 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Wheel Slider Controllable Example')),
        body: Center(
          child: WheelSliderControllable(
            minValue: 0,
            maxValue: 100,
            initialValue: 50,
            onChanged: (value) {
              print('Selected value: $value');
            },
          ),
        ),
      ),
    );
  }
}

参数说明

  • minValue：滑块的最小值。
  • maxValue：滑块的最大值。
  • initialValue：滑块的初始值。
  • onChanged：当滑块值发生变化时调用的回调函数，返回当前选中的值。

自定义样式

你可以通过传递其他参数来自定义轮盘滑块的外观和行为，例如：

  • itemExtent：每个项目的高度。
  • perspective：轮盘的透视效果。
  • squeeze：轮盘的挤压效果。
  • diameterRatio：轮盘的直径比例。
WheelSliderControllable(
  minValue: 0,
  maxValue: 100,
  initialValue: 50,
  itemExtent: 50,
  perspective: 0.01,
  squeeze: 1.0,
  diameterRatio: 2.0,
  onChanged: (value) {
    print('Selected value: $value');
  },
),

控制滑块

wheel_slider_controllable 插件还提供了控制滑块的方法，例如设置滑块的当前值：

final _wheelSliderController = WheelSliderControllableController();

[@override](/user/override)
Widget build(BuildContext context) {
  return Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        WheelSliderControllable(
          controller: _wheelSliderController,
          minValue: 0,
          maxValue: 100,
          initialValue: 50,
          onChanged: (value) {
            print('Selected value: $value');
          },
        ),
        ElevatedButton(
          onPressed: () {
            _wheelSliderController.setValue(75);
          },
          child: Text('Set to 75'),
        ),
      ],
    ),
  );
}
回到顶部