Flutter增强型下拉选择插件dropdown_plus的使用

dropdown_plus 是一个简单易用的下拉选择组件，支持表单中的搜索、键盘导航、离线数据源、远程数据源和自定义样式。它提供了丰富的配置选项，使得开发者可以轻松地集成到Flutter应用中。

Getting Started

简单文本下拉框示例

TextDropdownFormField(
    options: ["Male", "Female"],
    decoration: InputDecoration(
        border: OutlineInputBorder(),
        suffixIcon: Icon(Icons.arrow_drop_down),
        labelText: "Gender"),
    dropdownHeight: 120,
)

安装

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

dependencies:
  dropdown_plus: <latest version>

可定制化示例

下面是一个更复杂的例子，展示了如何使用带有自定义项和过滤功能的 DropdownFormField 组件。

final List<Map<String, dynamic>> _roles = [
  {"name": "Super Admin", "desc": "Having full access rights", "role": 1},
  {
    "name": "Admin",
    "desc": "Having full access rights of a Organization",
    "role": 2
  },
  {
    "name": "Manager",
    "desc": "Having Management access rights of a Organization",
    "role": 3
  },
  {
    "name": "Technician",
    "desc": "Having Technician Support access rights",
    "role": 4
  },
  {
    "name": "Customer Support",
    "desc": "Having Customer Support access rights",
    "role": 5
  },
  {"name": "User", "desc": "Having End User access rights", "role": 6},
];

// ...

DropdownFormField<Map<String, dynamic>>(
    onEmptyActionPressed: () async {},
    decoration: InputDecoration(
        border: OutlineInputBorder(),
        suffixIcon: Icon(Icons.arrow_drop_down),
        labelText: "Access"),
    onSaved: (dynamic str) {},
    onChanged: (dynamic str) {},
    validator: (dynamic str) {},
    displayItemFn: (dynamic item) => Text(
          (item ?? {})['name'] ?? '',
          style: TextStyle(fontSize: 16),
        ),
    findFn: (dynamic str) async => _roles,
    selectedFn: (dynamic item1, dynamic item2) {
      if (item1 != null && item2 != null) {
        return item1['name'] == item2['name'];
      }
      return false;
    },
    filterFn: (dynamic item, str) =>
        item['name'].toLowerCase().indexOf(str.toLowerCase()) >= 0,
    dropdownItemFn: (dynamic item, int position, bool focused,
            bool selected, Function() onTap) =>
        ListTile(
          title: Text(item['name']),
          subtitle: Text(
            item['desc'] ?? '',
          ),
          tileColor:
              focused ? Color.fromARGB(20, 0, 0, 0) : Colors.transparent,
          onTap: onTap,
        ),
),

Options

以下是 DropdownFormField 支持的一些常用属性：

• autoFocus: 是否自动聚焦。
• filterFn: 过滤函数，用于筛选显示的选项。
• selectedFn: 比较两个项目的函数，判断是否选中。
• findFn: 异步查找函数，返回数据列表。
• dropdownItemFn: 自定义下拉菜单项的渲染方式。
• displayItemFn: 自定义显示当前选中项的方式。
• decoration: 输入框装饰。
• dropdownColor: 下拉菜单颜色。
• controller: 控制器，用于管理下拉框的状态。
• onChanged: 当选项改变时触发的回调。
• onSaved: 表单保存时触发的回调。
• validator: 验证器，用于验证输入的有效性。
• dropdownHeight: 下拉菜单高度。
• searchTextStyle: 搜索文本样式。
• emptyText: 当没有匹配项时显示的文本。
• emptyActionText: 当没有匹配项且有操作按钮时显示的文本。
• onEmptyActionPressed: 当点击空状态下的操作按钮时触发的回调。

示例代码

以下是一个完整的 main.dart 示例代码，展示了如何将上述组件集成到Flutter应用中。

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final List<Map<String, dynamic>> _roles = [
    {"name": "Super Admin", "desc": "Having full access rights", "role": 1},
    {
      "name": "Admin",
      "desc": "Having full access rights of a Organization",
      "role": 2
    },
    {
      "name": "Manager",
      "desc": "Having Management access rights of a Organization",
      "role": 3
    },
    {
      "name": "Technician",
      "desc": "Having Technician Support access rights",
      "role": 4
    },
    {
      "name": "Customer Support",
      "desc": "Having Customer Support access rights",
      "role": 5
    },
    {"name": "User", "desc": "Having End User access rights", "role": 6},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dropdown Plus Demo'),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            TextDropdownFormField(
              options: ["Male", "Female"],
              decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  suffixIcon: Icon(Icons.arrow_drop_down),
                  labelText: "Gender"),
              dropdownHeight: 120,
            ),
            SizedBox(
              height: 16,
            ),
            DropdownFormField<Map<String, dynamic>>(
              onEmptyActionPressed: () async {},
              decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  suffixIcon: Icon(Icons.arrow_drop_down),
                  labelText: "Access"),
              onSaved: (dynamic str) {},
              onChanged: (dynamic str) {},
              validator: (dynamic str) {},
              displayItemFn: (dynamic item) => Text(
                (item ?? {})['name'] ?? '',
                style: TextStyle(fontSize: 16),
              ),
              findFn: (dynamic str) async => _roles,
              selectedFn: (dynamic item1, dynamic item2) {
                if (item1 != null && item2 != null) {
                  return item1['name'] == item2['name'];
                }
                return false;
              },
              filterFn: (dynamic item, str) =>
                  item['name'].toLowerCase().indexOf(str.toLowerCase()) >= 0,
              dropdownItemFn: (dynamic item, int position, bool focused,
                      bool selected, Function() onTap) =>
                  ListTile(
                title: Text(item['name']),
                subtitle: Text(
                  item['desc'] ?? '',
                ),
                tileColor:
                    focused ? Color.fromARGB(20, 0, 0, 0) : Colors.transparent,
                onTap: onTap,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

通过以上内容，您可以快速上手并充分利用 dropdown_plus 插件的强大功能，为您的Flutter应用程序增添更加丰富和交互性强的用户体验。