【Flutter】drag_select_grid_view: ^0.6.2 使用

新镜2025-09-08 16:49

组件网址：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');

  @override
  void initState() {
    super.initState();
    // 监听选择变化
    controller.addListener(() {
      print('选中: ${controller.value.amount} 项');
    });
  }

  @override
  Widget 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,
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

核心API

控制器方法

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

dart 复制代码

// 选择/取消选择
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里面，如果要全选的话也可以通过以下代码赋值。

dart 复制代码

dragController.value = Selection(indexes);

使用起来很简单。

问题

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

dart 复制代码

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