cf_multi_picker #

一个用于创建多选选择器的插件。

使用方法 #

要使用此插件，请在项目的 pubspec.yaml 文件中添加 cf_multi_picker 作为依赖项。

示例 #

// 显示一个多选选择器
CfPicker.showMultiPicker(
  context: context, // 当前上下文
  data: PickerData, // 数据源
  onConfirm: (data, _select) { // 确认回调
    print(data); // 打印选择结果
  }
);

安装 #

flutter pub add cf_multi_picker

使用包 #

import 'package:cf_multi_picker/cf_multi_picker.dart';

预览 #

以下是一个完整的示例代码，展示如何使用 cf_multi_picker 插件。

完整示例代码

// 导入必要的库
import 'package:flutter/material.dart';
import 'dart:async';

import 'package:cf_multi_picker/cf_multi_picker.dart'; // 引入 cf_multi_picker 插件

void main() {
  // 初始化 Flutter 环境
  WidgetsFlutterBinding.ensureInitialized();

  runApp(const MyApp()); // 启动应用
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState(); // 创建状态类
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown'; // 平台版本信息
  List<dynamic> result = []; // 选择结果
  List<int> select = []; // 选择的索引

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState(); // 初始化平台状态
  }

  // 初始化平台状态（异步操作）
  Future<void> initPlatformState() async {}

  // 按钮点击事件，触发多选选择器
  void onPress(BuildContext context) {
    CfPicker.showMultiPicker(
      context: context, // 当前上下文
      data: PickerData, // 数据源
      onConfirm: (data, _select) { // 回调函数
        setState(() { // 更新 UI
          result = data;
          select = _select;
        });
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MediaQuery(
      data: const MediaQueryData(
        size: Size(1000, 500), // 设置屏幕大小
      ),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('cf_multi_picker 示例'), // 应用标题
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center, // 子组件垂直居中
              children: [
                // 显示选择结果
                Text("结果: $result"),
                // 显示选择的索引
                Text("选择的索引: $select"),
                // 添加按钮，触发多选选择器
                Builder(
                  builder: (context) {
                    return ElevatedButton(
                      onPressed: () {
                        onPress(context); // 调用触发函数
                      },
                      child: const Icon(Icons.add), // 图标
                    );
                  },
                ),
                // 显示平台版本信息
                FutureBuilder<String?>(
                  future: CallNativeFlutter.platformVersion, // 获取平台版本
                  builder: (_, snapshoot) {
                    return Text(snapshoot.data ?? ''); // 显示结果
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

// 定义数据源
List<dynamic> PickerData = [
  {
    'select': 1, // 默认选择数量
    'data': [1, 2, 3, 4] // 可选项
  },
  {
    'select': 1,
    'data': [11, 22, 33, 44]
  },
  {
    'select': 1,
    'data': ["aaa", "bbb", "ccc"]
  }
];