Flutter基础选择器插件basic_selector的使用

basic_selector 是一个功能强大的 Flutter 插件，用于创建简单且高度可定制的选择器。通过它，您可以轻松实现数字、文本或时间的选择器，并且支持多种配置选项。

使用方法

添加依赖

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

dependencies:
  basic_selector: ^最新版本号

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

基本用法

数字选择器

import 'package:basic_selector/basic_selector.dart';

// 生成数字列表
static final List<int> _numbers = BasicSelectorHelpers.generateNumbers(end: 10);
int _selectedNumber = 0;

@override
Widget build(BuildContext context) {
  return BasicSelector<int>(
    items: _numbers,
    value: _selectedNumber,
    textFormatter: (item) {
      // 自定义格式化逻辑
      if (item == 1) {
        return '1 item';
      } else {
        return '$item items';
      }
    },
    onChanged: (item) {
      setState(() {
        _selectedNumber = item;
      });
    },
  );
}

文本选择器

import 'package:basic_selector/basic_selector.dart';

// 生成字母列表
static final List<String> _letters = BasicSelectorHelpers.generateAlphabet();

@override
Widget build(BuildContext context) {
  return BasicSelector<String>(
    items: _letters,
    value: 'A',
    textFormatter: (item) {
      return item.toUpperCase(); // 将字母转为大写
    },
    onChanged: (item) {
      print('Selected letter: $item');
    },
  );
}

时间选择器

import 'package:basic_selector/basic_selector.dart';

// 当前选择的时间
TimeOfDay _selectedTime = const TimeOfDay(hour: 0, minute: 0);

@override
Widget build(BuildContext context) {
  return BasicTimeSelector(
    time: _selectedTime,
    currentTime: const TimeOfDay(hour: 13, minute: 30),
    config: const BasicTimeSelectorConfig(showOnlyToCurrentType: true),
    textFormatter: (item) {
      return item.formatted(); // 格式化时间为字符串
    },
    onChanged: (item) {
      setState(() {
        _selectedTime = item;
      });
    },
  );
}

显示时间选择对话框

import 'package:basic_selector/basic_selector.dart';

@override
Widget build(BuildContext context) {
  return FilledButton(
    onPressed: () => BasicTimeSelector.showModalDialog(
      context,
      time: _selectedTime,
    ).then((value) {
      if (value != null) {
        setState(() {
          _selectedTime = value;
        });
        ScaffoldMessenger.of(context)
          ..hideCurrentSnackBar()
          ..showSnackBar(SnackBar(
            content: Text('时间已选择: ${_selectedTime.formatted()}'),
            behavior: SnackBarBehavior.floating,
          ));
      }
    }),
    child: const Text('打开对话框'),
  );
}

辅助方法

generateNumbers

生成一个数字列表，例如：

static final List<int> _numbers = BasicSelectorHelpers.generateNumbers(start: 1, end: 10, step: 2);
// 返回 [1, 3, 5, 7, 9]

generateAlphabet

生成字母表列表：

static final List<String> _alphabet = BasicSelectorHelpers.generateAlphabet();
// 返回 ['A', 'B', 'C', ... , 'Z']

generateTimes

生成时间列表：

static final List<TimeOfDay> _times = BasicSelectorHelpers.generateTimes(minuteStep: 30);
// 返回 [TimeOfDay(0, 0), TimeOfDay(0, 30), TimeOfDay(1, 0), ...]