Flutter时间选择器插件tie_picker的使用

Tie Picker 是一个简约且具有意见性的辅助工具，用于自定义选择器和日历，并支持主题颜色（目前仅支持浅色模式）和国际化。

目录

• 日历
• 时间选择器
• 模态选择器
• 迷你选择器

使用TiePicker

安装

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

dependencies:
  tie_picker: ^版本号

然后运行flutter pub get来获取包。

国际化支持

为了支持国际化，你需要在MaterialApp中添加以下配置：

import 'package:tie_picker/tie_picker.dart';

MaterialApp(
    locale: const Locale('en'),
    /// 添加支持的语言
    supportedLocales: TiePickerLocalizations.supportedLocales,
    localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        /// 添加本地化代理
        TiePickerLocalizations.delegate
    ],
);

日历

要使用日历，需要传递当前日期。国际化也必须正确设置以确保日期格式正确。

你可以通过以下模式之一设置选择器：

enum CalendarMode {
  day,
  month,
  year,
}

使用方法：

date = await ModalPicker.datePicker(
    context: context,
    date: date,
    mode: CalendarMode.day,
);

展示效果：

时间选择器

时间选择器遵循与日历相同的原则。你可以传递当前时间作为参数，并返回新的选定时间。24小时格式可以配置。

使用方法：

void openTimePicker() async {
    date = await ModalPicker.timePicker(
        context: context,
        date: date,
        use24hFormat: false,
    );
}

展示效果：

模态选择器

模态选择器接受任何List<T>类型的参数，并使用哈希相等性来比较数据。

示例：

class MyClass {
  final int id;
  final String value;

  MyClass({
    required this.id,
    required this.value,
  });

  [@override](/user/override)
  bool operator ==(covariant MyClass other) {
    if (identical(this, other)) return true;
  
    return 
      other.id == id &&
      other.value == value;
  }

  [@override](/user/override)
  int get hashCode => id.hashCode ^ value.hashCode;
}

toText()函数允许正确解析任何T值的标签。TextField使用toText()函数的结果进行搜索。

使用方法：

int? item = 0;

void openModalPicker() async {
    final result = await ModalPicker.modalPick<int>(
        context: context,
        label: 'Modal pick',
        list: List.generate(50, (index) => index),
        item: item,
        toText: (value) => 'Option $value',
    );
    if (result == null) return;
    item = result;
}

展示效果：

迷你选择器

迷你选择器是一个小巧的选择器，用于在少量项目之间进行选择。它的工作方式与模态选择器相同。

使用方法：

MyClass? data;

void openMiniPicker() async {
    final result = await ModalPicker.miniPick<MyClass>(
        context: context,
        label: 'Mini pick',
        list: List.generate(
        50,
        (index) => MyClass(id: index, value: "Option $index"),
        ),
        item: data,
        toText: (value) => 'Option $value',
    );
    if (result == null) return;
    data = result;
}

展示效果：

示例代码

以下是完整的示例代码：

// 忽略对于公共成员的 API 文档和构造函数排序
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:tie_picker/tie_picker.dart';

void main() {
  runApp(
    MaterialApp(
      locale: const Locale('en'),
      debugShowCheckedModeBanner: false,
      theme: ThemeData.from(
        colorScheme: ColorScheme.fromSeed(
          seedColor: const Color(0xFF6C6EA0),
          brightness: Brightness.light,
        ),
      ),
      supportedLocales: const [
        Locale('es', 'AR'),
        ...TiePickerLocalizations.supportedLocales
      ],
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        TiePickerLocalizations.delegate
      ],
      home: const MainPage(),
    ),
  );
}

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

  [@override](/user/override)
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  DateTime? date;

  void openDatePicker() async {
    date = await ModalPicker.datePicker(
      context: context,
      date: date,
      mode: CalendarMode.day,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Tie picker')),
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              CupertinoButton(
                onPressed: openDatePicker,
                child: const Text('Open date picker'),
              ),
              CupertinoButton(
                onPressed: openModalPicker,
                child: const Text('Open Modal picker'),
              ),
              CupertinoButton(
                onPressed: openMiniPicker,
                child: const Text('Open Mini picker'),
              ),
              CupertinoButton(
                onPressed: openTimePicker,
                child: const Text('Open time picker'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  int? item = 0;

  void openModalPicker() async {
    final result = await ModalPicker.modalPick<int>(
      context: context,
      label: 'Modal pick',
      list: List.generate(50, (index) => index),
      item: item,
      toText: (value) => 'Option $value',
    );
    if (result == null) return;
    item = result;
  }

  MyClass? data;

  void openMiniPicker() async {
    final result = await ModalPicker.miniPick<MyClass>(
      context: context,
      label: 'Mini pick',
      list: List.generate(
        50,
        (index) => MyClass(id: index, value: "Option $index"),
      ),
      item: data,
      toText: (value) => 'Option $value',
    );
    if (result == null) return;
    data = result;
  }

  void openTimePicker() async {
    date = await ModalPicker.timePicker(
      context: context,
      date: date,
      use24hFormat: false,
    );
  }
}

class MyClass {
  final int id;
  final String value;

  MyClass({
    required this.id,
    required this.value,
  });

  [@override](/user/override)
  bool operator ==(covariant MyClass other) {
    if (identical(this, other)) return true;

    return other.id == id && other.value == value;
  }

  [@override](/user/override)
  int get hashCode => id.hashCode ^ value.hashCode;
}