Flutter多选下拉带全选功能插件multiselect_dropdown_with_select_all的使用

Flutter多选下拉带全选功能插件multiselect_dropdown_with_select_all的使用

标题

Flutter多选下拉带全选功能插件multiselect_dropdown_with_select_all的使用

内容

This README describes the package. If you publish this package to pub.dev, this README's contents appear on the landing page for your package.

Features #

多选下拉，带有全选选项。

属性 #

提供一个多选下拉组件。

[items] 是可用选项的列表。

[initialSelectedValues] 是初始选择的值列表。

[hint] 是在没有选择任何项时显示的文本。

[onChanged] 当选择项更改时被调用。

[colorHeading] 是标签文本的颜色。

[colorPlaceholder] 是占位符文本的颜色。

[colorDropdownIcon] 是下拉图标的颜色。

[borderColor] 是边框的颜色。

[radius] 是下拉的圆角。

[borderWidth] 是下拉的边框宽度。

[selectAllflag] 是布尔值，用于表示“全选”。

[isMultiSelect] 是一个标志，用于确定是否允许多选。

[scrollbar] 是一个标志，用于确定是否允许滚动条。

[scrollbartrack] 是一个标志，用于确定是否允许滚动条轨道。

[boxLabel] 是与框一起显示的文本。

开始 #

将 multiselect_dropdown_with_select_all 添加到您的 pubspec.yaml 的依赖项中，然后运行 flutter pub get。

从 pub [Stable]

dependencies:
  multiselect_dropdown_with_select_all:

使用 #

import 'package:flutter/material.dart';
import 'multi_select_dropdown.dart'; // 导入自定义组件文件
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text(‘多选下拉示例’)),
body: MultiSelectForm(),
),
);
}
}
class MultiSelectForm extends StatefulWidget {
@override
_MultiSelectFormState createState() => _MultiSelectFormState();
}
class _MultiSelectFormState extends State<MultiSelectForm> {
final _formKey = GlobalKey<FormState>();
List<String> items = [‘Option 1’, ‘Option 2’, ‘Option 3’];
List<String> selectedItems = [];
void _handleSelectionChange(List<String> newSelection) {
setState(() {
selectedItems = newSelection;
});
print(‘Selected Items: $selectedItems’);
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 155,
child: MultiSelectDropdown(
items: [
MultiSelectItem(‘1’, ‘Option 1’),
MultiSelectItem(‘2’, ‘Option 2’),
MultiSelectItem(‘3’, ‘Option 3’),
],
initialSelectedValues: selectedItems,
hint: ‘选择选项’,
selectAllflag: true,
onChanged: (selectedItems) {
print(selectedItems);
},
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
// 表单有效，处理提交
print(‘Final Selected Items: $selectedItems’);
}
},
child: Text(‘提交’),
),
],
),
),
);
}
}

附加信息 #

示例代码

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

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

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

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

class _MultiSelectFormState extends State<MultiSelectForm> {
  final _formKey = GlobalKey<FormState>();
  List<String> items = ['Option 1', 'Option 2', 'Option 3'];
  List<String> selectedItems = [];

  void _handleSelectionChange(List<String> newSelection) {
    setState(() {
      selectedItems = newSelection;
    });
    print('Selected Items: $selectedItems');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Form(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              width: 155,
              child: MultiSelectDropdown(
                items: [
                  MultiSelectItem('1', 'Option 1'),
                  MultiSelectItem('2', 'Option 2'),
                  MultiSelectItem('3', 'Option 3'),
                ],
                initialSelectedValues: selectedItems,
                hint: '选择选项',
                selectAllflag: true,
                onChanged: (selectedItems) {
                  print(selectedItems);
                },
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  // 表单有效，处理提交
                  print('Final Selected Items: $selectedItems');
                }
              },
              child: Text('提交'),
            ),
          ],
        ),
      ),
    );
  }
}