Flutter选择字段插件simple_dart_select_field的使用

在Flutter开发中，有时我们需要一个能够从下拉列表或简单列表中选择项目的字段，并且可能需要支持多选功能。simple_dart_select_field 是一个非常实用的插件，可以帮助我们实现这一需求。

插件简介

SelectField 是一个可以从下拉列表或简单列表中选择项目的控件，并且支持多选功能。默认情况下，它会将列表项转换为字符串进行显示，但也可以通过自定义适配器来处理更复杂的数据类型。

支持的属性

• multiple: 是否允许多选（布尔值，默认为 false）。
• size: 列表中可见元素的数量（整数，默认为 5）。
• adapter: 用于显示列表项的适配器（默认为 toString 方法）。

使用场景

当列表元素类型不是 String 时，必须在初始化选项之前设置适配器。

示例代码

以下是一个完整的示例代码，展示了如何使用 SelectField 插件来创建一个多选列表字段。

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

// 定义一个可选对象类
class SelectableObject {
  String name;

  SelectableObject(this.name);
}

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SelectField 示例'),
        ),
        body: SelectFieldExample(),
      ),
    );
  }
}

class SelectFieldExample extends StatefulWidget {
  [@override](/user/override)
  _SelectFieldExampleState createState() => _SelectFieldExampleState();
}

class _SelectFieldExampleState extends State<SelectFieldExample> {
  // 定义一个 SelectableObject 列表
  List<SelectableObject> _options = [
    SelectableObject('选项1'),
    SelectableObject('选项2'),
    SelectableObject('选项3'),
    SelectableObject('选项4'),
  ];

  // 初始化 SelectField 控件
  late SelectField<SelectableObject> _selectField;

  [@override](/user/override)
  void initState() {
    super.initState();

    // 设置适配器以显示对象的名称
    _selectField = SelectField<SelectableObject>()
      ..adapter = (obj) => obj.name
      ..initOptions(_options)
      ..multiple = true; // 启用多选
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 显示当前选中的选项
          Text(
            '当前选中的选项: ${_selectField.selectedItems.map((e) => e.name).join(', ')}',
            style: TextStyle(fontSize: 18),
          ),
          SizedBox(height: 20),
          // 渲染 SelectField 控件
          SelectFieldBuilder(
            selectField: _selectField,
            builder: (context, selectFieldWidget) {
              return selectFieldWidget;
            },
          ),
        ],
      ),
    );
  }
}