multi_select_item 是一个用于在 Flutter 中实现多项选择的插件。它允许用户从列表中选择多个项目，并且可以轻松地集成到你的应用中。以下是如何使用 multi_select_item 插件的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  multi_select_item: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

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

import 'package:multi_select_item/multi_select_item.dart';

3. 创建 MultiSelectController

MultiSelectController 用于管理选择状态。你可以在你的 State 类中创建一个 MultiSelectController 实例：

class _MyHomePageState extends State<MyHomePage> {
  MultiSelectController multiSelectController = MultiSelectController();
  
  [@override](/user/override)
  void initState() {
    super.initState();
    multiSelectController.disableEditingWhenNoneSelected = true;
  }
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multi Select Example'),
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return MultiSelectItem(
            isSelecting: multiSelectController.isSelecting,
            onSelected: () {
              setState(() {
                multiSelectController.toggle(index);
              });
            },
            child: ListTile(
              title: Text('Item $index'),
              selected: multiSelectController.isSelected(index),
            ),
          );
        },
      ),
    );
  }
}

4. 使用 MultiSelectItem

在 ListView.builder 或任何其他列表构建器中，使用 MultiSelectItem 来包装每个列表项。MultiSelectItem 需要以下参数：

• isSelecting: 一个布尔值，表示是否处于选择模式。通常使用 multiSelectController.isSelecting。
• onSelected: 当用户选择或取消选择项目时调用的回调函数。通常使用 multiSelectController.toggle(index) 来切换选择状态。
• child: 实际的列表项内容。

5. 控制选择模式

你可以通过 multiSelectController 来控制选择模式。例如，你可以通过长按列表项来进入选择模式：

GestureDetector(
  onLongPress: () {
    setState(() {
      multiSelectController.startEditing();
    });
  },
  child: ListView.builder(
    itemCount: 10,
    itemBuilder: (context, index) {
      return MultiSelectItem(
        isSelecting: multiSelectController.isSelecting,
        onSelected: () {
          setState(() {
            multiSelectController.toggle(index);
          });
        },
        child: ListTile(
          title: Text('Item $index'),
          selected: multiSelectController.isSelected(index),
        ),
      );
    },
  ),
);

6. 获取选中的项目

你可以通过 multiSelectController.selectedIndexes 来获取所有选中的项目索引：

List<int> selectedIndexes = multiSelectController.selectedIndexes;

7. 结束选择模式

你可以通过调用 multiSelectController.stopEditing() 来结束选择模式：

setState(() {
  multiSelectController.stopEditing();
});

完整示例

以下是一个完整的示例，展示了如何使用 multi_select_item 插件：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  MultiSelectController multiSelectController = MultiSelectController();

  [@override](/user/override)
  void initState() {
    super.initState();
    multiSelectController.disableEditingWhenNoneSelected = true;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multi Select Example'),
        actions: [
          IconButton(
            icon: Icon(Icons.delete),
            onPressed: () {
              setState(() {
                multiSelectController.selectedIndexes.forEach((index) {
                  // 处理删除操作
                });
                multiSelectController.stopEditing();
              });
            },
          ),
        ],
      ),
      body: GestureDetector(
        onLongPress: () {
          setState(() {
            multiSelectController.startEditing();
          });
        },
        child: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return MultiSelectItem(
              isSelecting: multiSelectController.isSelecting,
              onSelected: () {
                setState(() {
                  multiSelectController.toggle(index);
                });
              },
              child: ListTile(
                title: Text('Item $index'),
                selected: multiSelectController.isSelected(index),
              ),
            );
          },
        ),
      ),
    );
  }
}