Flutter长按拖拽网格视图插件long_press_draggable_gridview的使用

Flutter长按拖拽网格视图插件long_press_draggable_gridview的使用

平台支持

本插件支持在多平台上实现GridView.builder中的拖拽功能。它提供了GridView.builder的所有属性，并且只需要几行代码即可轻松实现。

该项目基于flutter_draggable_gridview，该库仅允许一次存在一个网格视图，因此我们对其进行了修改，并添加了对CustomScrollView的支持。

可拖拽的网格视图

使用方法

示例代码

DraggableGridViewBuilder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: MediaQuery.of(context).size.width / (MediaQuery.of(context).size.height / 3),
  ),
  children: _listOfDraggableGridItem,
  isOnlyLongPress: false,
  dragCompletion: (List<DraggableGridItem> list, int beforeIndex, int afterIndex) {
    print('onDragAccept: $beforeIndex -> $afterIndex');
  },
  dragFeedback: (List<DraggableGridItem> list, int index) {
    return Container(
      child: list[index].child,
      width: 200,
      height: 150,
    );
  },
  dragPlaceHolder: (List<DraggableGridItem> list, int index) {
    return PlaceHolderWidget(
      child: Container(
        color: Colors.white,
      ),
    );
  },
);

必需参数

gridDelegate

一个控制网格视图中子部件布局的委托。

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 2, // 每行显示2个元素
  childAspectRatio: MediaQuery.of(context).size.width / (MediaQuery.of(context).size.height / 3), // 设置子项宽高比
)

children

包含DraggableGridItem列表的属性，用于在GridView.builder中显示小部件以提供拖放功能。此外，它还包含isDraggable参数，用于启用或禁用拖放功能。

children: _listOfDraggableGridItem,

dragCompletion

此回调提供更新后的列表和旧的与新的索引。

dragCompletion: (List<DraggableGridItem> list, int beforeIndex, int afterIndex) {
  print('onDragAccept: $beforeIndex -> $afterIndex');
},

可选参数

dragFeedback

通过此回调，您需要返回一个小部件，并且我们将使用此小部件作为反馈。了解更多关于反馈的信息可以从Draggable类中获取。

dragFeedback: (List<DraggableGridItem> list, int index) {
  return Container(
    child: list[index].child,
    width: 200,
    height: 150,
  );
},

dragPlaceHolder

通过此回调，您需要返回一个PlaceHolderWidget，并且我们将使用此小部件作为占位符。

dragPlaceHolder: (List<DraggableGridItem> list, int index) {
  return PlaceHolderWidget(
    child: Container(
      color: Colors.white,
    ),
  );
},

dragChildWhenDragging

通过此回调，您需要返回一个小部件，并且当拖动进行时，我们将显示此小部件而不是子部件。了解更多关于childWhenDragging的信息可以从Draggable类中获取。

dragChildWhenDragging: (List<DraggableGridItem> list, int index) {
  return Container(
    child: list[index].child,
    width: 200,
    height: 150,
  );
},

最后但同样重要

您可以使用所有GridView.builder的属性来创建DraggableGridViewBuilder类。

注意事项

结果将以列表形式返回，因此可能会丢失，如果您需要，您需要负责将它们存储在永久位置。

贡献者指南

对于贡献者来说，向我们的仓库贡献总是受欢迎的。我们请求贡献者只向develop分支创建拉取请求。

报告问题/功能请求指南

如果您能分享以下信息，对我们理解问题的根本原因会有很大帮助：

• 库版本
• 代码片段
• 如果适用，日志
• 设备规格（制造商，操作系统版本等）
• 重现问题的截图/视频及步骤

许可证

Flutter Draggable GridView 是 MIT-licensed。

示例代码

import 'package:example/constants/colors.dart';
import 'package:example/constants/strings.dart';
import 'package:example/pages/grid_example.dart';
import 'package:example/pages/grid_with_scrollcontroller.dart';
import 'package:example/pages/grid_with_sliver.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  const SystemUiOverlayStyle dark = SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.transparent,
    systemNavigationBarDividerColor: null,
    statusBarColor: null,
    systemNavigationBarIconBrightness: Brightness.light,
    statusBarIconBrightness: Brightness.dark,
    statusBarBrightness: Brightness.light,
  );
  SystemChrome.setSystemUIOverlayStyle(dark);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: Strings.app_title,
      theme: ThemeData(
        primarySwatch: AppColors.primaryColor,
      ),
      home: MyHomePage(
        title: Strings.app_title,
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFEFEEEE),
      appBar: AppBar(
        centerTitle: true,
        title: Text(title),
      ),
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => GridExample(
                        title: 'Grid Example',
                      ),
                    ),
                  );
                },
                child: Text('Grid Example'),
              ),
              SizedBox(height: 50),
              ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => GridWithScrollControllerExample(
                        title: 'Grid With ScrollController Example',
                      ),
                    ),
                  );
                },
                child: Text('Grid With ScrollController Example'),
              ),
              SizedBox(height: 50),
              ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => GridSliverExample(
                        title: 'Grid With CustomScrollView Example',
                      ),
                    ),
                  );
                },
                child: Text('Grid With CustomScrollView Example'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}