Flutter如何使用flutter_easy_select选择组件插件

在Flutter项目中使用flutter_easy_select插件时遇到了几个问题：

  1. 如何正确安装和配置这个插件？
  2. 选择器的数据源应该怎么绑定，支持动态更新吗？
  3. 能否自定义选项的样式（如文字颜色、背景等）？
  4. 多级联动选择该如何实现？
  5. 选中值后如何通过回调获取结果？
    希望能提供一个完整的示例代码说明基本用法和常见配置。
2 回复

在Flutter中使用flutter_easy_select插件很简单：

  1. 添加依赖：在pubspec.yaml中添加：
dependencies:
  flutter_easy_select: ^最新版本

运行flutter pub get

  1. 基本使用：
import 'package:flutter_easy_select/flutter_easy_select.dart';

EasySelect(
  title: "选择项",
  value: selectedValue,
  items: [
    EasySelectItem(value: "1", label: "选项1"),
    EasySelectItem(value: "2", label: "选项2"),
  ],
  onChange: (value) {
    setState(() {
      selectedValue = value;
    });
  },
)
  1. 主要特性：
  • 支持单选/多选
  • 可自定义样式
  • 支持搜索过滤
  • 支持分组显示
  1. 多选模式：
EasySelect.multiple(
  selectedValues: selectedList,
  // ...其他参数
)

记得在State中定义对应的变量来存储选中值。这个插件比原生Dropdown更美观易用，适合需要自定义样式的选择场景。

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


Flutter 中使用 flutter_easy_select 插件可以快速实现单选或多选功能。以下是基本步骤和示例：

1. 添加依赖

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

dependencies:
  flutter_easy_select: ^最新版本  # 请查看 pub.dev 获取最新版本号

运行 flutter pub get 安装。

2. 基本用法

单选示例：

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

class SingleSelectExample extends StatefulWidget {
  @override
  _SingleSelectExampleState createState() => _SingleSelectExampleState();
}

class _SingleSelectExampleState extends State<SingleSelectExample> {
  String? selectedValue;

  final List<String> options = ['选项1', '选项2', '选项3'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FlutterEasySelect(
          items: options.map((option) => FESelectItem(option, option)).toList(),
          onChanged: (value) {
            setState(() {
              selectedValue = value;
            });
          },
          title: '请选择',
          value: selectedValue,
        ),
      ),
    );
  }
}

多选示例：

class MultiSelectExample extends StatefulWidget {
  @override
  _MultiSelectExampleState createState() => _MultiSelectExampleState();
}

class _MultiSelectExampleState extends State<MultiSelectExample> {
  List<String> selectedValues = [];

  final List<String> options = ['苹果', '香蕉', '橙子'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FlutterEasySelect.multiple(
          items: options.map((option) => FESelectItem(option, option)).toList(),
          onChanged: (values) {
            setState(() {
              selectedValues = values.cast<String>();
            });
          },
          title: '选择水果',
          value: selectedValues,
        ),
      ),
    );
  }
}

3. 主要参数说明

  • items：选项列表，需为 FESelectItem 对象
  • value：当前选中的值（单选为单个值，多选为列表）
  • onChanged：选择变化回调
  • title：选择框标题
  • 支持自定义样式：backgroundColor、textStyle 等

4. 注意事项

  • 确保选项的 value 值唯一
  • 多选时 value 需传入列表类型
  • 可通过 FESelectItem 的 disabled 属性禁用选项

通过以上代码即可快速集成选择功能，详细参数可参考插件的官方文档。

回到顶部