Flutter项目选择项插件item_selector的使用

Flutter项目选择项插件item_selector的使用

简介

item_selector 是一个通用的Flutter选择项插件，支持在 ListView、GridView、Row、Column 或其他可以包含索引子组件的父组件中进行选择。它支持单击选择和长按拖动多选，并且具有自动滚动功能。

预览

以下是 item_selector 在不同布局中的效果预览：

ListView	GridView

Column	自定义布局

使用方法

要使用 item_selector 插件，首先需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  item_selector: ^最新版本号

然后，在 Dart 代码中导入并使用该插件。以下是一个完整的示例代码，展示了如何在 ListView、GridView 和 Column 中使用 item_selector。

完整示例代码

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:item_selector/item_selector.dart';

void main() => runApp(ExampleApp());

// 定义页面数据
final pages = <PageData>[
  PageData(
    title: 'Column',
    icon: Icons.view_agenda,
    builder: (_) => ColumnPage(),
  ),
  PageData(
    title: 'ListView',
    icon: Icons.view_headline,
    builder: (_) => ListViewPage(),
  ),
  PageData(
    title: 'GridView',
    icon: Icons.view_module,
    builder: (_) => GridViewPage(),
  ),
];

class PageData {
  const PageData({this.title, this.icon, this.builder});
  final String? title;
  final IconData? icon;
  final WidgetBuilder? builder;
}

// 主应用类
class ExampleApp extends StatefulWidget {
  [@override](/user/override)
  _ExampleAppState createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  int currentPage = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Item Selector',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Item Selector + ${pages[currentPage].title}'),
        ),
        body: AnimatedSwitcher(
          duration: Duration(milliseconds: 246),
          child: Container(
            key: ValueKey<int>(currentPage),
            child: pages[currentPage].builder!(context),
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: currentPage,
          onTap: (index) => setState(() => currentPage = index),
          items: pages
              .map((page) => BottomNavigationBarItem(
                    icon: Icon(page.icon!),
                    title: Text(page.title!),
                  ))
              .toList(),
        ),
      ),
    );
  }
}

// 构建列表项
Widget buildListItem(BuildContext context, int index, bool selected) {
  return Card(
    margin: EdgeInsets.all(10),
    elevation: selected ? 2 : 10, // 选中时降低阴影效果
    child: ListTile(
      leading: FlutterLogo(), // 列表项前的图标
      contentPadding: EdgeInsets.all(10),
      title: Text(index.toString()), // 显示索引
    ),
  );
}

// Column 页面
class ColumnPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ItemSelectionController(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: List.generate(4, (index) {
          return ItemSelectionBuilder(
            index: index,
            builder: buildListItem, // 使用 buildListItem 构建每个项
          );
        }),
      ),
    );
  }
}

// ListView 页面
class ListViewPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ItemSelectionController(
      child: ListView.builder(
        itemCount: 100, // 生成100个列表项
        itemBuilder: (BuildContext context, int index) {
          return ItemSelectionBuilder(
            index: index,
            builder: buildListItem, // 使用 buildListItem 构建每个项
          );
        },
      ),
    );
  }
}

// 构建网格项
Widget buildGridItem(BuildContext context, int index, bool selected) {
  return Card(
    margin: EdgeInsets.all(10),
    elevation: selected ? 2 : 10, // 选中时降低阴影效果
    child: GridTile(
      child: Center(child: FlutterLogo()), // 网格项中的图标
      footer: Padding(
        padding: const EdgeInsets.all(2),
        child: Text(
          index.toString(), // 显示索引
          textAlign: TextAlign.end,
        ),
      ),
    ),
  );
}

// GridView 页面
class GridViewPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final selection = RectSelection(4); // 创建矩形选择器
    return ItemSelectionController(
      selection: selection,
      child: GridView.count(
        crossAxisCount: 4, // 每行4个网格项
        mainAxisSpacing: 4, // 主轴间距
        crossAxisSpacing: 4, // 交叉轴间距
        children: List.generate(100, (int index) {
          return ItemSelectionBuilder(
            index: index,
            builder: buildGridItem, // 使用 buildGridItem 构建每个项
          );
        }),
      ),
      onSelectionStart: selection.start, // 开始选择时调用
      onSelectionUpdate: selection.update, // 更新选择时调用
    );
  }
}

// 矩形选择器类
class RectSelection extends ItemSelection {
  RectSelection(this.columns);

  final int columns; // 每行的列数
  ItemSelection oldSelection = ItemSelection();

  int rowAt(int index) => index ~/ columns; // 计算行号
  int columnAt(int index) => index % columns; // 计算列号
  int indexAt(int row, int column) => column + row * columns; // 计算索引

  bool start(int start, int end) {
    oldSelection = ItemSelection(start, end);
    return false;
  }

  bool update(int start, int end) {
    // 计算矩形选择区域的边界
    final startRow = rowAt(min(start, end));
    final endRow = rowAt(max(start, end));
    final startColumn = columnAt(min(start, end));
    final endColumn = columnAt(max(start, end));

    // 构造新的矩形选择区域
    final newSelection = ItemSelection();
    for (int r = startRow; r <= endRow; ++r) {
      final startIndex = indexAt(r, startColumn);
      final endIndex = indexAt(r, endColumn);
      newSelection.add(startIndex, endIndex);
    }

    // 应用选择变化
    addAll(ItemSelection.copy(newSelection)..removeAll(oldSelection));
    removeAll(ItemSelection.copy(oldSelection)..removeAll(newSelection));

    oldSelection = newSelection;
    return true;
  }
}