Flutter拖拽排序网格视图插件flutter_draggable_gridview的使用

flutter_draggable_gridview

flutter_draggable_gridview是一个支持多平台的拖放功能的GridView.builder插件。它提供了所有在Gridview.builder中可用的属性，并且可以通过几行代码轻松实现。

Draggable GridView.

Usage

Example

下面是一个简单的示例，展示了如何使用DraggableGridViewBuilder：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Draggable GridView')),
        body: DraggableGridViewPage(),
      ),
    );
  }
}

class DraggableGridViewPage extends StatefulWidget {
  @override
  _DraggableGridViewPageState createState() => _DraggableGridViewPageState();
}

class _DraggableGridViewPageState extends State<DraggableGridViewPage> {
  List<DraggableGridItem> _listOfDraggableGridItem = [
    DraggableGridItem(child: Container(color: Colors.red, child: Center(child: Text('Item 1'))), isDraggable: true),
    DraggableGridItem(child: Container(color: Colors.green, child: Center(child: Text('Item 2'))), isDraggable: true),
    DraggableGridItem(child: Container(color: Colors.blue, child: Center(child: Text('Item 3'))), isDraggable: true),
    // Add more items as needed
  ];

  @override
  Widget build(BuildContext context) {
    return 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');
        setState(() {
          _listOfDraggableGridItem = list;
        });
      },
      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,
          ),
        );
      },
    );
  }
}

Required parameters

gridDelegate: 控制GridView内子项布局的委托。
children: 包含DraggableGridItem列表，用于显示具有拖放功能的小部件。
dragCompletion: 提供更新后的列表和旧的新索引的回调。

Optional parameters

isOnlyLongPress: 默认为true，如果设置为false，则简单点击即可触发拖动，否则需要长按。
dragFeedback: 返回一个用作反馈的小部件。
dragPlaceHolder: 返回一个用作占位符的小部件。
dragChildWhenDragging: 返回一个当拖动正在进行时替代子项的小部件。

注意事项

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

License

Flutter Draggable GridView是MIT许可的。

如果你有任何问题或建议，请随时联系开发者或查看官方GitHub仓库获取更多信息。

更多关于Flutter拖拽排序网格视图插件flutter_draggable_gridview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 1楼•3 天前

更多关于Flutter拖拽排序网格视图插件flutter_draggable_gridview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter中使用flutter_draggable_gridview插件来实现拖拽排序网格视图的示例代码。

首先，确保你已经在你的pubspec.yaml文件中添加了flutter_draggable_gridview的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_draggable_gridview: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来是一个完整的示例代码，展示了如何使用flutter_draggable_gridview来实现拖拽排序的网格视图：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Draggable GridView Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> items = List.generate(25, (index) => "Item ${index + 1}");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Draggable GridView Example'),
      ),
      body: DraggableGridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, // 每行3列
          crossAxisSpacing: 4.0,
          mainAxisSpacing: 4.0,
          childAspectRatio: 1.0,
        ),
        itemCount: items.length,
        itemBuilder: (context, index) {
          return DraggableTile(
            key: ValueKey(items[index]), // 使用ValueKey来确保拖动时不会出现问题
            child: Card(
              child: Center(
                child: Text(items[index]),
              ),
            ),
            onDragEnded: (details) {
              // 拖动结束后，更新items的顺序
              int from = details.initialPosition;
              int to = details.targetPosition;
              Collections.swap(items, from, to);
              setState(() {}); // 刷新UI
            },
          );
        },
      ),
    );
  }
}

class DraggableTile extends StatelessWidget {
  final Widget child;
  final ValueChanged<DragEndedDetails> onDragEnded;

  DraggableTile({required this.child, required this.onDragEnded});

  @override
  Widget build(BuildContext context) {
    return Draggable(
      data: 'draggable_item',
      feedback: Opacity(
        opacity: 0.5,
        child: child,
      ),
      childWhenDragging: Container(),
      onDragEnded: (details) {
        onDragEnded(details);
      },
      child: child,
    );
  }
}

代码说明：

依赖添加：在pubspec.yaml中添加flutter_draggable_gridview依赖。
主应用：MyApp是应用的入口，设置了主题和主页MyHomePage。
主页：MyHomePage是一个StatefulWidget，包含一个可拖拽排序的网格视图。
数据：items列表包含了网格视图中的项目。
网格视图：使用DraggableGridView.builder构建网格视图，gridDelegate定义了网格的布局（如每行几列、间距等）。
项目构建：itemBuilder定义了每个网格项的构建逻辑，这里使用了DraggableTile组件。
拖拽逻辑：DraggableTile是一个包含Draggable的组件，onDragEnded回调用于处理拖动结束时的逻辑，更新items的顺序并刷新UI。

这个示例展示了如何使用flutter_draggable_gridview来创建一个可拖拽排序的网格视图。你可以根据实际需求进行进一步的自定义和扩展。