Flutter多选功能插件multi_select_flutter的使用

multi_select_flutter 是一个用于在Flutter中创建多种样式多选组件的插件。它提供了丰富的特性，如支持表单验证、默认设计中立、提供对话框、底部弹出层或选择芯片风格的小部件、可搜索性等。

功能特性

• 支持FormField特性，例如验证器。
• 默认设计中立，易于集成到现有应用界面中。
• 提供了Dialog、BottomSheet、ChoiceChip三种不同样式的多选组件。
• 对于较大的列表，可以选择使多选组件具备搜索功能。

使用方法

MultiSelectDialogField / MultiSelectBottomSheetField

这两个组件提供了InkWell按钮，点击后可以打开对话框或底部弹出层进行多选操作，并且它们还带有FormField特性。你可以通过提供的参数自定义这些组件的行为和外观。

示例代码

MultiSelectDialogField(
  items: _animals.map((e) => MultiSelectItem(e, e.name)).toList(),
  listType: MultiSelectListType.CHIP,
  onConfirm: (values) {
    _selectedAnimals = values;
  },
),

MultiSelectDialog / MultiSelectBottomSheet

如果你想要自己创建用于打开对话框或底部弹出层的按钮，则可以调用以下函数：

• MultiSelectDialog 可以在showDialog()的构建器中使用。
• MultiSelectBottomSheet 可以在showModalBottomSheet()的构建器中使用。

示例代码

void _showMultiSelect(BuildContext context) async {
  await showDialog(
    context: context,
    builder: (ctx) {
      return MultiSelectDialog(
        items: _items,
        initialValue: _selectedAnimals,
        onConfirm: (values) {
          // 处理确认后的逻辑
        },
      );
    },
  );
}

MultiSelectChipDisplay

用于展示已选择的项目，可以作为其他组件（如MultiSelectDialogField）的一部分，也可以独立使用。可以通过onTap回调移除项目。

示例代码

MultiSelectChipDisplay(
  items: _selectedAnimals.map((e) => MultiSelectItem(e, e)).toList(),
  onTap: (value) {
    setState(() {
      _selectedAnimals.remove(value);
    });
  },
),

MultiSelectChipField

与MultiSelectChipDisplay类似，但这些芯片是主要的选择界面。

示例代码

MultiSelectChipField<Animal>(
  items: _items,
  icon: Icon(Icons.check),
  onTap: (values) {
    _selectedAnimals = values;
  },
),

完整示例Demo

以下是结合上述所有组件的一个完整示例应用程序，展示了如何在实际项目中使用multi_select_flutter插件。

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

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

class Animal {
  final int id;
  final String name;

  Animal({this.id, this.name});
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Multi Select',
      theme: ThemeData(
        primarySwatch: Colors.purple,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Multi Select'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static List<Animal> _animals = [
    // ... (动物列表)
  ];

  final _items = _animals.map((animal) => MultiSelectItem<Animal>(animal, animal.name)).toList();

  List<Animal> _selectedAnimals2 = [];
  List<Animal> _selectedAnimals3 = [];
  List<Animal> _selectedAnimals5 = [];

  final _multiSelectKey = GlobalKey<FormFieldState>();

  @override
  void initState() {
    _selectedAnimals5 = _animals;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Container(
          alignment: Alignment.center,
          padding: EdgeInsets.all(20),
          child: Column(
            children: <Widget>[
              SizedBox(height: 40),

              // Rounded blue MultiSelectDialogField
              MultiSelectDialogField(
                items: _items,
                title: Text("Animals"),
                selectedColor: Colors.blue,
                decoration: BoxDecoration(
                  color: Colors.blue.withOpacity(0.1),
                  borderRadius: BorderRadius.all(Radius.circular(40)),
                  border: Border.all(color: Colors.blue, width: 2),
                ),
                buttonIcon: Icon(Icons.pets, color: Colors.blue),
                buttonText: Text(
                  "Favorite Animals",
                  style: TextStyle(color: Colors.blue[800], fontSize: 16),
                ),
                onConfirm: (results) {
                  // 处理选择结果
                },
              ),
              SizedBox(height: 50),

              // MultiSelectBottomSheetField with decoration applied to container
              Container(
                decoration: BoxDecoration(
                  color: Theme.of(context).primaryColor.withOpacity(.4),
                  border: Border.all(color: Theme.of(context).primaryColor, width: 2),
                ),
                child: Column(
                  children: <Widget>[
                    MultiSelectBottomSheetField(
                      initialChildSize: 0.4,
                      listType: MultiSelectListType.CHIP,
                      searchable: true,
                      buttonText: Text("Favorite Animals"),
                      title: Text("Animals"),
                      items: _items,
                      onConfirm: (values) {
                        _selectedAnimals2 = values;
                      },
                      chipDisplay: MultiSelectChipDisplay(onTap: (value) {
                        setState(() {
                          _selectedAnimals2.remove(value);
                        });
                      }),
                    ),
                    if (_selectedAnimals2.isEmpty)
                      Container(
                        padding: EdgeInsets.all(10),
                        alignment: Alignment.centerLeft,
                        child: Text("None selected", style: TextStyle(color: Colors.black54)),
                      ),
                  ],
                ),
              ),
              SizedBox(height: 40),

              // MultiSelectBottomSheetField with validators
              MultiSelectBottomSheetField<Animal>(
                key: _multiSelectKey,
                initialChildSize: 0.7,
                maxChildSize: 0.95,
                title: Text("Animals"),
                buttonText: Text("Favorite Animals"),
                items: _items,
                searchable: true,
                validator: (values) {
                  if (values == null || values.isEmpty) {
                    return "Required";
                  }
                  List<String> names = values.map((e) => e.name).toList();
                  if (names.contains("Frog")) {
                    return "Frogs are weird!";
                  }
                  return null;
                },
                onConfirm: (values) {
                  setState(() {
                    _selectedAnimals3 = values;
                  });
                  _multiSelectKey.currentState.validate();
                },
                chipDisplay: MultiSelectChipDisplay(onTap: (item) {
                  setState(() {
                    _selectedAnimals3.remove(item);
                  });
                  _multiSelectKey.currentState.validate();
                }),
              ),
              SizedBox(height: 40),

              // MultiSelectChipField
              MultiSelectChipField(
                items: _items,
                initialValue: [_animals[4], _animals[7], _animals[9]],
                title: Text("Animals"),
                headerColor: Colors.blue.withOpacity(0.5),
                decoration: BoxDecoration(border: Border.all(color: Colors.blue[700], width: 1.8)),
                selectedChipColor: Colors.blue.withOpacity(0.5),
                selectedTextStyle: TextStyle(color: Colors.blue[800]),
                onTap: (values) {
                  // 处理选择结果
                },
              ),
              SizedBox(height: 40),

              // MultiSelectDialogField with initial values
              MultiSelectDialogField(
                onConfirm: (val) {
                  _selectedAnimals5 = val;
                },
                dialogWidth: MediaQuery.of(context).size.width * 0.7,
                items: _items,
                initialValue: _selectedAnimals5,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上就是关于multi_select_flutter插件的基本介绍及使用指南，希望对你有所帮助！如果有任何问题或者需要进一步的帮助，请随时提问。