Flutter多级联动下拉选择插件rashail_multi_dropdown的使用

Flutter多级联动下拉选择插件rashail_multi_dropdown的使用

预览

单选模式

RashailMultiDropdown(
  onOptionSelected: (List<ValueItem> selectedOptions) {},
  options: const [
    ValueItem(label: '选项1', value: '1'),
    ValueItem(label: '选项2', value: '2'),
    ValueItem(label: '选项3', value: '3'),
    ValueItem(label: '选项4', value: '4'),
    ValueItem(label: '选项5', value: '5'),
    ValueItem(label: '选项6', value: '6'),
  ],
  selectionType: SelectionType.single,
  chipConfig: const ChipConfig(wrapType: WrapType.wrap),
  dropdownHeight: 300,
  optionTextStyle: const TextStyle(fontSize: 16),
  selectedOptionIcon: const Icon(Icons.check_circle),
),

多选模式

RashailMultiDropdown(
  onOptionSelected: (List<ValueItem> selectedOptions) {},
  options: const [
    ValueItem(label: '选项1', value: '1'),
    ValueItem(label: '选项2', value: '2'),
    ValueItem(label: '选项3', value: '3'),
    ValueItem(label: '选项4', value: '4'),
    ValueItem(label: '选项5', value: '5'),
    ValueItem(label: '选项6', value: '6'),
  ],
  selectionType: SelectionType.multi,
  chipConfig: const ChipConfig(wrapType: WrapType.wrap),
  dropdownHeight: 300,
  optionTextStyle: const TextStyle(fontSize: 16),
  selectedOptionIcon: const Icon(Icons.check_circle),
),

网络请求

RashailMultiDropdown.network(
  onOptionSelected: (options) {},
  networkConfig: NetworkConfig(
    url: 'https://jsonplaceholder.typicode.com/users',
    method: RequestMethod.get,
    headers: {
      'Content-Type': 'application/json',
    },
  ),
  chipConfig: const ChipConfig(wrapType: WrapType.wrap),
  responseParser: (response) {
    final list = (response as List<dynamic>).map((e) {
      final item = e as Map<String, dynamic>;
      return ValueItem(
        label: item['name'],
        value: item['id'].toString(),
      );
    }).toList();
    return Future.value(list);
  },
  responseErrorBuilder: ((context, body) {
    return const Padding(
      padding: EdgeInsets.all(16.0),
      child: Text('错误获取数据'),
    );
  }),
)

功能

  • 允许从列表中选择多个或单个项。
  • 可以从URL获取数据。
  • 显示所选项作为标签。可以自定义标签样式。
  • 可以禁用下拉项。
  • 可以预选下拉项。
  • 可以自定义下拉项。
  • 可以自定义所选项生成器。
  • 可以自定义下拉字段样式。
  • 在下拉项被选中或取消选中时触发回调。

开始使用

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

dependencies:
  rashail_multi_dropdown: ^0.0.1

然后运行 flutter packages get。

示例

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(8),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text('WRAP', style: _headerStyle),
              const SizedBox(height: 4),
              RashailMultiDropdown(
                onOptionSelected: (List<ValueItem> selectedOptions) {},
                options: const [
                  ValueItem(label: '选项1', value: '1'),
                  ValueItem(label: '选项2', value: '2'),
                  ValueItem(label: '选项3', value: '3'),
                  ValueItem(label: '选项4', value: '4'),
                  ValueItem(label: '选项5', value: '5'),
                  ValueItem(label: '选项6', value: '6'),
                ],
                selectionType: SelectionType.multi,
                chipConfig: const ChipConfig(wrapType: WrapType.wrap),
                dropdownHeight: 300,
                optionTextStyle: const TextStyle(fontSize: 16),
                selectedOptionIcon: const Icon(Icons.check_circle),
              ),
              const SizedBox(height: 50),
              const Text('SCROLL', style: _headerStyle),
              const SizedBox(height: 4),
              RashailMultiDropdown(
                onOptionSelected: (List<ValueItem> selectedOptions) {},
                options: const [
                  ValueItem(label: '选项1', value: '1'),
                  ValueItem(label: '选项2', value: '2'),
                  ValueItem(label: '选项3', value: '3'),
                  ValueItem(label: '选项4', value: '4'),
                  ValueItem(label: '选项5', value: '5'),
                  ValueItem(label: '选项6', value: '6'),
                ],
                selectionType: SelectionType.multi,
                chipConfig: const ChipConfig(wrapType: WrapType.scroll),
                dropdownHeight: 300,
                optionTextStyle: const TextStyle(fontSize: 16),
                selectedOptionIcon: const Icon(Icons.check_circle),
              ),
              const SizedBox(height: 50),
              const Text('FROM NETWORK', style: _headerStyle),
              const SizedBox(height: 4),
              RashailMultiDropdown.network(
                onOptionSelected: (options) {},
                networkConfig: NetworkConfig(
                  url: 'https://jsonplaceholder.typicode.com/users',
                  method: RequestMethod.get,
                  headers: {
                    'Content-Type': 'application/json',
                  },
                ),
                chipConfig: const ChipConfig(wrapType: WrapType.wrap),
                responseParser: (response) {
                  final list = (response as List<dynamic>).map((e) {
                    final item = e as Map<String, dynamic>;
                    return ValueItem(
                      label: item['name'],
                      value: item['id'].toString(),
                    );
                  }).toList();
                  return Future.value(list);
                },
                responseErrorBuilder: ((context, body) {
                  return const Padding(
                    padding: EdgeInsets.all(16.0),
                    child: Text('错误获取数据'),
                  );
                }),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

static const _headerStyle = TextStyle(
  fontSize: 15,
  fontWeight: FontWeight.bold,
  color: Colors.red,
);

更多关于Flutter多级联动下拉选择插件rashail_multi_dropdown的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter多级联动下拉选择插件rashail_multi_dropdown的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


rashail_multi_dropdown 是一个 Flutter 插件，用于实现多级联动下拉选择。它允许用户从多个层级的下拉菜单中选择选项，通常用于省市区选择、分类选择等场景。

安装

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

dependencies:
  flutter:
    sdk: flutter
  rashail_multi_dropdown: ^0.0.1  # 请使用最新版本

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

使用步骤

  1. 导入包：

    在你的 Dart 文件中导入 rashail_multi_dropdown 包：

    import 'package:rashail_multi_dropdown/rashail_multi_dropdown.dart';

  2. 准备数据：

    你需要准备一个嵌套的数据结构来表示多级联动的选项。例如，省市区数据可以这样表示：

    List<Map<String, dynamic>> data = [
  {
    "id": 1,
    "name": "北京",
    "children": [
      {
        "id": 11,
        "name": "北京市",
        "children": [
          {"id": 111, "name": "东城区"},
          {"id": 112, "name": "西城区"},
        ]
      }
    ]
  },
  {
    "id": 2,
    "name": "上海",
    "children": [
      {
        "id": 21,
        "name": "上海市",
        "children": [
          {"id": 211, "name": "黄浦区"},
          {"id": 212, "name": "徐汇区"},
        ]
      }
    ]
  }
];

  3. 使用 MultiLevelDropdown 组件：

    在你的 UI 中使用 MultiLevelDropdown 组件：

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

class _MyHomePageState extends State<MyHomePage> {
  List<Map<String, dynamic>> selectedItems = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multi-Level Dropdown Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            MultiLevelDropdown(
              data: data,
              onChanged: (List<Map<String, dynamic>> selectedItems) {
                setState(() {
                  this.selectedItems = selectedItems;
                });
              },
            ),
            SizedBox(height: 20),
            Text('Selected Items: ${selectedItems.map((item) => item['name']).join(', ')}'),
          ],
        ),
      ),
    );
  }
}

  4. 处理选中项：

    onChanged 回调会在用户选择选项时触发，并返回当前选中的项。你可以在这个回调中处理选中的数据。

参数说明

  • data: 多级联动的数据源，通常是一个嵌套的 Map 或 List。
  • onChanged: 选中项发生变化时的回调函数。
  • hintText: 下拉框的提示文字。
  • style: 下拉框的文本样式。
  • dropdownColor: 下拉框的背景颜色。
  • icon: 下拉框右侧的图标。
  • maxLevel: 最大层级数。
  • selectedItems: 初始选中的项。

注意事项

  • 确保数据源的格式正确，通常是一个嵌套的 Map 或 List。
  • onChanged 回调中的 selectedItems 是一个列表，包含了每一级选中的项。

示例代码

以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Multi-Level Dropdown Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  List<Map<String, dynamic>> selectedItems = [];

  List<Map<String, dynamic>> data = [
    {
      "id": 1,
      "name": "北京",
      "children": [
        {
          "id": 11,
          "name": "北京市",
          "children": [
            {"id": 111, "name": "东城区"},
            {"id": 112, "name": "西城区"},
          ]
        }
      ]
    },
    {
      "id": 2,
      "name": "上海",
      "children": [
        {
          "id": 21,
          "name": "上海市",
          "children": [
            {"id": 211, "name": "黄浦区"},
            {"id": 212, "name": "徐汇区"},
          ]
        }
      ]
    }
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multi-Level Dropdown Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            MultiLevelDropdown(
              data: data,
              onChanged: (List<Map<String, dynamic>> selectedItems) {
                setState(() {
                  this.selectedItems = selectedItems;
                });
              },
            ),
            SizedBox(height: 20),
            Text('Selected Items: ${selectedItems.map((item) => item['name']).join(', ')}'),
          ],
        ),
      ),
    );
  }
}
回到顶部