flutter_picker_plus如何使用

在Flutter项目中集成flutter_picker_plus时遇到了问题，想请教具体的使用方法。这个插件文档比较简单，不太清楚如何实现多级联动选择器？比如我需要实现省市区三级联动的效果，应该如何配置数据源和监听选项变化？还有如何自定义选择器的样式，比如修改文字颜色和背景？希望有经验的朋友能分享一下具体代码示例和注意事项。

2 回复

Flutter Picker Plus 是一个自定义选择器插件。使用方法：

  1. 在 pubspec.yaml 添加依赖：flutter_picker_plus: ^版本号
  2. 导入：import 'package:flutter_picker_plus/flutter_picker_plus.dart';
  3. 使用 Picker 组件，设置数据源和回调函数。

示例：

Picker(
  adapter: PickerDataAdapter(data: [...]),
  onConfirm: (picker, value) {
    print(value);
  }
).showModal(context);

更多关于flutter_picker_plus如何使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter Picker Plus 是一个用于创建自定义选择器的 Flutter 插件，支持单列、多列、级联选择等功能。以下是基本使用方法：

1. 安装依赖

在 pubspec.yaml 中添加：

dependencies:
  flutter_picker_plus: ^1.1.5

运行 flutter pub get

2. 基本使用示例

import 'package:flutter_picker_plus/flutter_picker_plus.dart';

// 创建选择器
void showPicker(BuildContext context) {
  Picker(
    adapter: PickerDataAdapter<String>(pickerData: ['选项1', '选项2', '选项3']),
    title: Text("请选择"),
    selectedTextStyle: TextStyle(color: Colors.blue),
    onConfirm: (Picker picker, List value) {
      print(value); // 选中的索引
      print(picker.getSelectedValues()); // 选中的值
    },
  ).showDialog(context);
}

3. 多列选择器

Picker(
  adapter: PickerDataAdapter(pickerData: [
    ['A1','A2','A3'],
    ['B1','B2','B3']
  ]),
  onConfirm: (picker, value) {
    print(picker.getSelectedValues());
  },
).showModal(context);

4. 级联选择器

Picker(
  adapter: PickerDataAdapter(data: [
    PickerItem(text: '中国', children: [
      PickerItem(text: '北京'),
      PickerItem(text: '上海'),
    ]),
  ]),
  changeToFirst: true,
  onConfirm: (picker, value) {
    print(picker.getSelectedValues());
  },
).showModal(context);

主要参数说明：

  • adapter：数据适配器（PickerDataAdapter）
  • title：选择器标题
  • selectedTextStyle：选中项文本样式
  • onConfirm：确认回调
  • onCancel：取消回调
  • height：选择器高度

注意事项：

  • 使用 showDialog() 显示对话框样式
  • 使用 showModal() 显示底部弹窗样式
  • 可通过 PickerItem 构建复杂层级数据

通过以上配置即可快速实现各种选择器功能。

回到顶部