Flutter链式选择器插件linkage_picker的使用

Flutter链式选择器插件linkage_picker的使用

linkage_picker 是一个基于 CupertinoPicker 风格的链式选择器组件。它提供了 DatePicker 实现，并且你可以通过扩展 LinkagePickerWidget 来实现更复杂的场景。

DatePicker

DatePicker 是一个预设的链式选择器。

DatePicker(
  start: DateTime(2000, today.month, today.day),
  end: DateTime(2050, today.month, today.day),
  date: date,
)

你也可以将 DatePicker 以底部弹出框的形式展示：

DatePicker(
  ...
).showAsBottomSheet(context)

或者将其嵌入到其他组件中：

ValueListenableBuilder<bool>(
  valueListenable: showPicker,
  builder: (context, value, _) {
    return value
        ? Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              DatePicker(
                ...,
                onControllerCreated: (controller) {
                  this.controller = controller;
                },
              ),
              TextButton(
                onPressed: () {
                  showPicker.value = false;
                  final result = controller.result;
                  if (result != null) {
                    content.value = DateFormat('yyyy-MM-dd').format(result);
                  }
                },
                child: const Text('确认')),
            ],
          )
        : const SizedBox.shrink();
  })

CustomPicker

你可以通过扩展 LinkagePickerWidget 来创建自定义的链式选择器。

class CustomPicker extends LinkagePickerWidget<CustomData, String> {
  CustomPicker()
      : super(
          maxLevel: LinkagePickerLevel.second,
          dataBuilder: (level, parent) {
            return switch (level) {
              LinkagePickerLevel.first => LinkagePickerData<CustomData>[...],
              LinkagePickerLevel.second => LinkagePickerData<CustomData>[...],
              _ => throw UnimplementedError(),
            };
          },
          equalizer: (level, value1, value2) {
            return switch (level) {
              _ => (value1 as CustomData).equals(value2 as CustomData),
            };
          },
          resultConverter: (selection) {
            final getResultString(selection.first, selection.last);
          },
          conflictResolver: (level, previous, currents) {
            return switch (level) {
              LinkagePickerLevel.first => null,
              LinkagePickerLevel.second =>
                (previous as CustomData).copyWith(...),
              _ => throw UnimplementedError(),
            };
          },
          initialValue: <CustomData>[...],
          pickerStyle: LinkagePickerStyle(
            itemBuilder: (level, data, selected) {
              switch (level) {
                case LinkagePickerLevel.first:
                  return buildFirstPickerItem(data, selected);
                case LinkagePickerLevel.second:
                  return buildSecondPickerItem(data, selected);
                default:
                  throw UnimplementedError();
              }
            },
          ),
        );
}

LinkagePickerWidget<T,R>

• <T>: 数据源值的类型
• <R>: 结果的类型
• maxLevel: 选择器的最大层级
• dataBuilder: 返回当前层级及其父数据的数据源
• equalizer: 告诉组件在当前层级两个值是否相等
• resultConverter: 将结果转换为你想要的类型
• conflictResolver: 将选择器选定的结果转换为导航结果
• initialValue: 选择器的初始值
• pickerStyle: 自定义选择器的样式
• onControllerCreated: 控制器创建时的回调

LinkagePickerStyle

• diameterRatio: 与 CupertinoPicker.diameterRatio 相同
• itemExtent: 与 CupertinoPicker.itemExtent 相同
• backgroundColor: 与 CupertinoPicker.backgroundColor 相同
• offAxisFraction: 与 CupertinoPicker.offAxisFraction 相同
• squeeze: 与 CupertinoPicker.squeeze 相同
• useMagnifier: 与 CupertinoPicker.useMagnifier 相同
• magnification: 与 CupertinoPicker.magnification 相同
• selectionOverlay: 与 CupertinoPicker.selectionOverlay 相同
• heightRatio: 选择器高度与项目高度的比例
• itemBuilder: 自定义选择器项目的样式

完整示例代码

import 'package:example/picker_field/picker_field_custom_color_palette.dart';
import 'package:example/picker_field/picker_field_custom_time.dart';
import 'package:example/picker_field/picker_field_date_bottom_sheet.dart';
import 'package:example/picker_field/picker_field_date.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Linkage Picker Example'),
      ),
      body: Container(
        padding: const EdgeInsets.symmetric(horizontal: 32),
        child: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(vertical: 32),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              pickerExampleSegment(
                'DatePicker',
                const PickerFieldDate(),
              ),
              pickerExampleSegment(
                'DatePicker[BottomSheet]',
                PickerFieldDateBottomSheet(context),
              ),
              pickerExampleSegment(
                'CustomPicker[Time]',
                PickerFieldCustomTime(context),
              ),
              pickerExampleSegment(
                'CustomPicker[ColorPalette]',
                PickerFieldCustomColorPalette(context),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget pickerExampleSegment(String title, Widget child) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: const TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.w600,
          ),
        ),
        const SizedBox(height: 8),
        child,
        const SizedBox(height: 20),
      ],
    );
  }
}