Flutter多项选择下拉插件multiselected_item_dropdown的使用

Flutter多项选择下拉插件multiselected_item_dropdown的使用

简介

multiselected_item_dropdown 是一个用于展示多选下拉列表的 Flutter 插件。

配置选项

选项 描述 类型 必填
list 下拉列表中的项目列表 List 是
hintText 用户选择项目前的占位符文字 String? 否
onSelectedItem 当用户选择一个项目时调用的回调函数 Function(T)? 否
initialValue 初始选中的项目 T? 否
hintTextStyle 占位符文字的样式 TextStyle? 否
itemTextStyle 项目文字的样式 TextStyle? 否
iconColor 图标颜色 Color? 否
backgroundDropdownColor 下拉列表背景颜色 Color? 否
backgroundBorderRadiusColor 下拉列表背景圆角颜色 Color? 否
backgroundChipColor 芯片颜色 Color? 否
backgroundChipTextColor 芯片文字颜色 Color? 否
showBorderRadius 是否显示圆角 bool? 否
isMultiSelected 是否启用多选功能 bool? 否
isShowMultiSelected 是否显示已选项目列表 bool? 否
selectedList 已选项目的列表 List<T?>? 否
onUpdateSelectedList 当多个项目被选中时调用的回调函数 Function(List<T?> selectedList)? 否
stringBuilder 自定义显示的项目文本 Function(T item)? 否

使用方法与示例

默认下拉菜单

// 导入 MultiSelectedItemDropdown 组件
import 'package:multiselected_item_dropdown/multiselected_item_dropdown.dart';

// 默认下拉菜单示例
MultiSelectedItemDropdown<String>(
  list: ['item 1', 'item 2', 'item 3', 'item 4'], // 必填字段
  hintText: '请选择...', // 用户选择项目前的占位符文字
  onSelectedItem: (String selectedValue) { // 当用户选择一个项目时调用的回调函数
    print(selectedValue);
  },
)

多选下拉菜单

// 导入 MultiSelectedItemDropdown 组件
import 'package:multiselected_item_dropdown/multiselected_item_dropdown.dart';

// 多选下拉菜单示例
MultiSelectedItemDropdown<String>(
  list: ['item 1', 'item 2', 'item 3', 'item 4'], // 必填字段
  hintText: '请选择...', // 用户选择项目前的占位符文字
  selectedList: ['item 1', 'item 2'], // 已选项目的列表
  isShowMultiSelected: true, // 是否显示已选项目列表
  isMultiSelected: true, // 是否启用多选功能
  onUpdateSelectedList: (List<String> selectedList) { // 当多个项目被选中时调用的回调函数
    print(selectedList);
  },
)

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

1 回复

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


multiselected_item_dropdown 是一个用于 Flutter 的多项选择下拉插件，允许用户从下拉列表中选择多个选项。以下是使用该插件的基本步骤和示例代码。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 multiselected_item_dropdown 插件依赖：

dependencies:
  flutter:
    sdk: flutter
  multiselected_item_dropdown: ^1.0.0  # 请使用最新版本

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

2. 导入插件

在你的 Dart 文件中导入插件：

import 'package:multiselected_item_dropdown/multiselected_item_dropdown.dart';

3. 使用 MultiSelectedItemDropdown

以下是一个简单的示例，展示如何使用 MultiSelectedItemDropdown：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MultiSelect Dropdown Example'),
        ),
        body: Center(
          child: MultiSelectDropdownExample(),
        ),
      ),
    );
  }
}

class MultiSelectDropdownExample extends StatefulWidget {
  @override
  _MultiSelectDropdownExampleState createState() =>
      _MultiSelectDropdownExampleState();
}

class _MultiSelectDropdownExampleState extends State<MultiSelectDropdownExample> {
  List<String> selectedItems = [];

  List<String> items = [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
  ];

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: [
          MultiSelectedItemDropdown(
            items: items,
            selectedItems: selectedItems,
            onChanged: (List<String> selectedItems) {
              setState(() {
                this.selectedItems = selectedItems;
              });
            },
            hintText: 'Select items',
          ),
          SizedBox(height: 20),
          Text('Selected Items: ${selectedItems.join(", ")}'),
        ],
      ),
    );
  }
}

4. 参数说明

  • items: 这是一个包含所有可选项的列表。
  • selectedItems: 这是当前选中的项的列表。你可以通过 onChanged 回调来更新它。
  • onChanged: 当用户选择或取消选择项时调用的回调函数。它会返回当前选中的项的列表。
  • hintText: 下拉框的提示文本。

5. 运行应用

运行你的 Flutter 应用，你将看到一个多项选择下拉框。用户可以从下拉列表中选择多个项，选中的项会显示在下拉框下方。

6. 自定义样式

你可以通过 decoration 参数来自定义下拉框的外观，例如添加边框、背景颜色等。

MultiSelectedItemDropdown(
  items: items,
  selectedItems: selectedItems,
  onChanged: (List<String> selectedItems) {
    setState(() {
      this.selectedItems = selectedItems;
    });
  },
  hintText: 'Select items',
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    filled: true,
    fillColor: Colors.grey[200],
  ),
),
回到顶部