Flutter选择器插件wheel_chooser的使用

WheelChooser 是一个允许用户通过滚动轮盘来选择数字、字符串或自定义小部件的Flutter插件。

安装

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

dependencies:
  wheel_chooser: ^1.1.2

创建 WheelChooser 小部件

显示字符串

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

class StringChooserExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('String Chooser')),
      body: Center(
        child: WheelChooser(
          onValueChanged: (s) => print(s),
          datas: ["a", "b", "c"],
        ),
      ),
    );
  }
}

显示整数

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

class IntegerChooserExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Integer Chooser')),
      body: Center(
        child: WheelChooser.integer(
          onValueChanged: (i) => print(i),
          maxValue: 10,
          minValue: 1,
          step: 2,
        ),
      ),
    );
  }
}

显示带有标题和返回值的选项

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

class ChoiceChooserExample extends StatelessWidget {
  final List<WheelChoice> aChoices = [
    WheelChoice(value: DateTime(2000, 1, 1, 9, 0), title: '9AM'),
    WheelChoice(value: DateTime(2000, 1, 1, 9, 30), title: '9:30AM'),
    WheelChoice(value: DateTime(2000, 1, 1, 10, 0), title: '10AM'),
    WheelChoice(value: DateTime(2000, 1, 1, 10, 30), title: '10:30AM'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Choice Chooser')),
      body: Center(
        child: WheelChooser.choices(
          choices: aChoices,
          onChoiceChanged: (value) {
            print('selected time is ${value.hour} hours and ${value.minute} minutes');
          },
        ),
      ),
    );
  }
}

显示自定义小部件

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

class CustomChooserExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Custom Chooser')),
      body: Center(
        child: WheelChooser.custom(
          onValueChanged: (a) => print(a),
          children: <Widget>[
            Text("data1"),
            Text("data2"),
            Text("data3"),
          ],
        ),
      ),
    );
  }
}

使用示例

垂直显示整数

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

class VerticalIntegerExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Vertical Integer Chooser')),
      body: Center(
        child: WheelChooser.integer(
          onValueChanged: (s) => print(s.toString()),
          maxValue: 18,
          minValue: 1,
          initValue: 5,
          unSelectTextStyle: TextStyle(color: Colors.grey),
        ),
      ),
    );
  }
}

水平显示整数

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

class HorizontalIntegerExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Horizontal Integer Chooser')),
      body: Center(
        child: WheelChooser.integer(
          onValueChanged: (s) => print(s.toString()),
          maxValue: 20,
          minValue: 1,
          initValue: 9,
          horizontal: true,
          unSelectTextStyle: TextStyle(color: Colors.grey),
        ),
      ),
    );
  }
}

从 v0.1.1 开始支持无限滚动，从 v1.0.0 开始支持空安全。

以上代码提供了完整的示例demo，涵盖了 `WheelChooser` 的基本用法，包括显示字符串、整数、自定义选项和自定义小部件等。你可以根据需要选择适合的实现方式。