Flutter多选组件插件reactive_multi_select_flutter的使用

Flutter多选组件插件reactive_multi_select_flutter的使用

reactive_multi_select_flutter 是一个用于与 reactive_forms 结合使用的多选组件插件。它基于 multi_select_flutter 插件进行了封装。

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 reactive_multi_select_flutter。

import 'package:flutter/material.dart';
import 'package:reactive_multi_select_flutter/reactive_multi_select_flutter.dart';
import 'package:reactive_forms/reactive_forms.dart';

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

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

  // 构建表单组
  FormGroup buildForm() => fb.group({
        'input': FormControl<List<String>>(value: null),
        'chip': FormControl<List<String>>(value: null),
      });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(),
        body: SafeArea(
          child: SingleChildScrollView(
            physics: const BouncingScrollPhysics(),
            padding: const EdgeInsets.symmetric(
              horizontal: 20.0,
              vertical: 20.0,
            ),
            child: ReactiveFormBuilder(
              form: buildForm,
              builder: (context, form, child) {
                return Column(
                  children: [
                    // 使用 ReactiveMultiSelectDialogField 进行多选对话框选择
                    ReactiveMultiSelectDialogField<String, String>(
                      formControlName: 'input',
                      items: [
                        MultiSelectItem('a', 'a'),
                      ],
                    ),
                    // 使用 ReactiveMultiSelectChipField 进行多选芯片选择
                    ReactiveMultiSelectChipField<String, String>(
                      formControlName: 'chip',
                      items: [
                        MultiSelectItem('a', 'a'),
                      ],
                    ),
                    // 提交按钮
                    ElevatedButton(
                      child: const Text('提交'),
                      onPressed: () {
                        if (form.valid) {
                          debugPrint(form.value.toString());
                        }
                      },
                    ),
                  ],
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

代码解释

  1. 导入必要的库

    import 'package:flutter/material.dart';
import 'package:reactive_multi_select_flutter/reactive_multi_select_flutter.dart';
import 'package:reactive_forms/reactive_forms.dart';

  2. 主函数

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

  3. 构建表单组

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

  FormGroup buildForm() => fb.group({
        'input': FormControl<List<String>>(value: null),
        'chip': FormControl<List<String>>(value: null),
      });

    在这里我们定义了一个包含两个表单控件（input 和 chip）的表单组。

  4. 构建应用界面

    [@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    theme: ThemeData(
      primarySwatch: Colors.blue,
      visualDensity: VisualDensity.adaptivePlatformDensity,
    ),
    home: Scaffold(
      appBar: AppBar(),
      body: SafeArea(
        child: SingleChildScrollView(
          physics: const BouncingScrollPhysics(),
          padding: const EdgeInsets.symmetric(
            horizontal: 20.0,
            vertical: 20.0,
          ),
          child: ReactiveFormBuilder(
            form: buildForm,
            builder: (context, form, child) {
              return Column(
                children: [
                  // 使用 ReactiveMultiSelectDialogField 进行多选对话框选择
                  ReactiveMultiSelectDialogField<String, String>(
                    formControlName: 'input',
                    items: [
                      MultiSelectItem('a', 'a'),
                    ],
                  ),
                  // 使用 ReactiveMultiSelectChipField 进行多选芯片选择
                  ReactiveMultiSelectChipField<String, String>(
                    formControlName: 'chip',
                    items: [
                      MultiSelectItem('a', 'a'),
                    ],
                  ),
                  // 提交按钮
                  ElevatedButton(
                    child: const Text('提交'),
                    onPressed: () {
                      if (form.valid) {
                        debugPrint(form.value.toString());
                      }
                    },
                  ),
                ],
              );
            },
          ),
        ),
      ),
    ),
  );
}

更多关于Flutter多选组件插件reactive_multi_select_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter多选组件插件reactive_multi_select_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用reactive_multi_select_flutter插件来实现多选组件的一个示例。这个插件允许你创建一个用户友好的多选界面。

首先，你需要在你的pubspec.yaml文件中添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  reactive_multi_select_flutter: ^x.y.z  # 请替换为最新版本号

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

接下来是一个完整的Flutter应用程序示例，展示如何使用reactive_multi_select_flutter：

import 'package:flutter/material.dart';
import 'package:reactive_multi_select_flutter/reactive_multi_select_flutter.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Reactive Multi Select Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 定义一个列表来存储选项
  final List<String> options = [
    'Option 1',
    'Option 2',
    'Option 3',
    'Option 4',
    'Option 5'
  ];

  // 定义一个列表来存储选中的选项
  List<String> selectedOptions = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Reactive Multi Select Flutter Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Selected Options:',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 16),
            Expanded(
              child: ReactiveMultiSelect<String>(
                data: options,
                selectedValues: selectedOptions,
                onChange: (result) {
                  setState(() {
                    selectedOptions = result;
                  });
                },
                chipDisplay: ChipDisplay(
                  withDeleteIcon: true,
                  deleteIconColor: Colors.red,
                ),
                chipColor: Colors.blue.withAlpha(100),
                searchEnabled: true,
                showCheckbox: true,
                label: 'Select Options',
              ),
            ),
            SizedBox(height: 16),
            Text(
              'You selected: ${selectedOptions.join(', ')}',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. options 列表包含了所有可供选择的选项。
  2. selectedOptions 列表用于存储用户选择的选项。
  3. ReactiveMultiSelect 组件用于显示多选界面，包括搜索功能、显示选中的chip（带删除图标），以及一个显示选择框的选项。
  4. onChange 回调用于在用户选择或取消选择选项时更新selectedOptions列表。
  5. 最后，文本组件显示用户选择的选项。

确保你已经正确安装了reactive_multi_select_flutter插件，并根据需要调整上述代码以适应你的项目。

回到顶部