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

wheel_picker 是一个用于轻松创建滚轮选择输入的Flutter插件，它扩展了原生的 ListWheelScrollView 类。以下是关于如何安装和使用该插件的详细介绍。

Key Features

• Item Selection: 可以轻松获取选中的项目索引。
• Highlight Selection: 通过颜色阴影高亮显示选中项。
• Tap Navigation: 支持点击滚动。
• Horizontal Scroll Direction: 支持水平方向的滚轮视图。
• Styling Flexibility: 使用 WheelPickerStyle 自定义外观。
• Precise Control: 使用 WheelPickerController 管理和同步多个 WheelPicker 小部件。
• Mounting Controllers: 方便地集成和切换多个控制器。

安装

在您的 pubspec.yaml 文件中添加依赖：

dependencies:
  wheel_picker: ^0.2.1

然后从命令行安装包：

flutter packages get

使用方法

要使用此插件，请导入包：

import 'package:wheel_picker/wheel_picker.dart';

示例代码

基本示例 (左Gif)

这是一个简单的例子，展示了如何创建一个基本的 WheelPicker：

const daysOfWeek = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
return WheelPicker(
  itemCount: 7,
  builder: (context, index) => Text(daysOfWeek[index]),
  selectedIndexColor: Colors.orange,
  looping: false,
);

高级示例 (右Gif)

对于更复杂的用法，您可以附加一个控制器并根据需要调整它。以下是一个更完整的示例，展示了如何创建一个包含小时、分钟和AM/PM选择的时钟选择器：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Example',
      theme: ThemeData.dark(useMaterial3: true),
      home: const Scaffold(
        body: Center(
          child: WheelPickerExample(),
        ),
      ),
    );
  }
}

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

  @override
  State<WheelPickerExample> createState() => _WheelPickerExampleState();
}

class _WheelPickerExampleState extends State<WheelPickerExample> {
  final now = TimeOfDay.now();
  late final _hoursWheel = WheelPickerController(
    itemCount: 12,
    initialIndex: now.hour % 12,
  );
  late final _minutesWheel = WheelPickerController(
    itemCount: 60,
    initialIndex: now.minute,
    mounts: [_hoursWheel],
  );

  @override
  Widget build(BuildContext context) {
    const textStyle = TextStyle(fontSize: 26.0, height: 1.5);
    final wheelStyle = WheelPickerStyle(
      itemExtent: textStyle.fontSize! * textStyle.height!, // Text height
      squeeze: 1.25,
      diameterRatio: .8,
      surroundingOpacity: .25,
      magnification: 1.2,
    );

    Widget itemBuilder(BuildContext context, int index) {
      return Text("$index".padLeft(2, '0'), style: textStyle);
    }

    final timeWheels = <Widget>[
      for (final wheelController in [_hoursWheel, _minutesWheel])
        Expanded(
          child: WheelPicker(
            builder: itemBuilder,
            controller: wheelController,
            looping: wheelController == _minutesWheel,
            style: wheelStyle,
            selectedIndexColor: Colors.redAccent,
          ),
        ),
    ];
    timeWheels.insert(1, const Text(":", style: textStyle));

    final amPmWheel = Expanded(
      child: WheelPicker(
        itemCount: 2,
        builder: (context, index) {
          return Text(["AM", "PM"][index], style: textStyle);
        },
        initialIndex: (now.period == DayPeriod.am) ? 0 : 1,
        looping: false,
        style: wheelStyle.copyWith(
          shiftAnimationStyle: const WheelShiftAnimationStyle(
            duration: Duration(seconds: 1),
            curve: Curves.bounceOut,
          ),
        ),
      ),
    );

    return Center(
      child: SizedBox(
        width: 200.0,
        height: 200.0,
        child: Stack(
          fit: StackFit.expand,
          children: [
            _centerBar(context),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10.0),
              child: Row(
                children: [
                  ...timeWheels,
                  const SizedBox(width: 6.0),
                  amPmWheel,
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    // Don't forget to dispose the controllers at the end.
    _hoursWheel.dispose();
    _minutesWheel.dispose();
    super.dispose();
  }

  Widget _centerBar(BuildContext context) {
    return Center(
      child: Container(
        height: 38.0,
        decoration: BoxDecoration(
          color: const Color(0xFFC3C9FA).withAlpha(26),
          borderRadius: BorderRadius.circular(8.0),
        ),
      ),
    );
  }
}

注意事项

• 在实际应用中，请确保在适当的时候释放控制器资源，例如在 dispose 方法中调用 controller.dispose()。
• 您可以通过修改 WheelPickerStyle 来自定义滚轮的选择器样式，如字体大小、间距等。

希望这些信息能帮助您更好地理解和使用 wheel_picker 插件！如果您有任何问题或建议，欢迎随时提出。