【Flutter】drag_select_grid_view: ^0.6.2 使用

组件网址：drag_select_grid_view | Flutter package

这个组件就是滑动选中功能。

使用起来跟GridView差不多

import 'package:drag_select_grid_view/drag_select_grid_view.dart';class MyWidget extends StatefulWidget {@override_MyWidgetState createState() => _MyWidgetState();
}class _MyWidgetState extends State<MyWidget> {final DragSelectGridViewController controller = DragSelectGridViewController();final List<String> items = List.generate(20, (index) => 'Item $index');@overridevoid initState() {super.initState();// 监听选择变化controller.addListener(() {print('选中: ${controller.value.amount} 项');});}@overrideWidget build(BuildContext context) {return DragSelectGridView(gridController: controller,itemCount: items.length,itemBuilder: (context, index, selected) {return Card(color: selected ? Colors.blue[100] : Colors.white,child: Center(child: Text(items[index])),);},gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,),);}@overridevoid dispose() {controller.dispose();super.dispose();}
}

核心API

控制器方法

以下是ai生成的,其实第一个跟第二个根本没有，但是让AI生成代码的时候它老是用前面两个

// 选择/取消选择
controller.selectIndex(0);           // 选择索引0
controller.deselectIndex(0);         // 取消选择索引0
controller.clear();                  // 清空所有选择// 获取状态
controller.value.selectedIndexes;    // 获取选中索引集合
controller.value.amount;             // 获取选中数量
controller.value.isSelecting;        // 是否有选中项

选中下标存储Selection

controller.value指的就是Selection

选中的item下标会存在Selection的selectedIndexes里面，如果要全选的话也可以通过以下代码赋值。

dragController.value = Selection(indexes);

使用起来很简单。

问题

drag_select_grid_view有一个跟我项目需求不符合的地方，这就要进行额外的处理，那就是当选择的item数量为0的时候会退出编辑模式，而我希望编辑模式由用户退出，或者是进行了删除等操作之后再自动退出。

/// Whether the grid is currently in select mode.bool get isSelecting => amount > 0;