Flutter可拖拽网格视图插件flutter_draggable_gridview_haoxin的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter可拖拽网格视图插件flutter_draggable_gridview_haoxin的使用

flutter_draggable_gridview 版本

flutter_draggable_gridview Git Stars

平台-Android

平台-iOS

平台-Linux

平台-Mac

平台-web

平台-Windows

许可证-MIT

此包支持在GridView.builder中进行多平台的拖放操作。它提供了所有在GridView.builder中可用的属性，并且只需要几行代码即可轻松实现。

可拖拽网格视图

Draggable GridView

使用方法

示例

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

控制子项在GridView中布局的代理。

SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 2,
  childAspectRatio: MediaQuery.of(context).size.width / (MediaQuery.of(context).size.height / 3),
)
children

包含一个DraggableGridItem列表，用于在GridView.builder中显示小部件以提供拖放功能。该列表还包含一个isDraggable参数，用于管理是否启用或禁用拖放功能。

_listOfDraggableGridItem
dragCompletion

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

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

可选参数

isOnlyLongPress

此属性包含bool值。如果此属性为false，则可以使用简单按压进行拖放；否则，只能通过长按来拖放。默认值为true。

isOnlyLongPress: false
dragFeedback

通过此回调，您必须返回一个Widget，并且我们将使用此Widget作为反馈。更多关于反馈的信息，请参阅Draggable类。

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

通过此回调，您必须返回一个PlaceHolderWidget，并且我们将使用此Widget作为占位符。

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

通过此回调，您必须返回一个Widget，并且我们将在拖动时显示此Widget而不是子项。更多关于childWhenDragging的信息，请参阅Draggable类。

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

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

1 回复

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


当然，以下是一个关于如何使用 flutter_draggable_gridview_haoxin 插件的示例代码。这个插件允许你创建一个可拖拽的网格视图，非常适合用于需要重新排序项目的场景。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_draggable_gridview_haoxin: ^最新版本号  # 请替换为实际最新版本号

然后运行 flutter pub get 来获取依赖。

接下来是一个完整的示例代码，展示了如何使用这个插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Draggable GridView Demo',
      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<String>.generate(20, (i) => "Item $i");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Draggable GridView Demo'),
      ),
      body: DraggableGridView<String>(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          crossAxisSpacing: 4.0,
          mainAxisSpacing: 4.0,
          childAspectRatio: 1.0,
        ),
        items: items,
        itemBuilder: (context, item) {
          return Container(
            color: Colors.primaries[items.indexOf(item) % Colors.primaries.length],
            child: Center(
              child: Text(
                item,
                style: TextStyle(color: Colors.white, fontSize: 16),
              ),
            ),
          );
        },
        onWillAccept: (oldIndex, newIndex) {
          // 如果需要，可以在这里处理拖动前的逻辑
          return true;
        },
        onDragCompleted: (oldIndex, newIndex) {
          // 在拖动完成后更新列表顺序
          if (oldIndex < newIndex) {
            newIndex -= 1;
          }
          final String item = items.removeAt(oldIndex);
          items.insert(newIndex, item);
          setState(() {});
        },
      ),
    );
  }
}

代码解释

  1. 依赖导入：确保在 pubspec.yaml 中添加了 flutter_draggable_gridview_haoxin 依赖。
  2. 主应用：MyApp 类是应用的入口。
  3. 主页：MyHomePage 是一个有状态的小部件，包含主要的网格视图逻辑。
  4. 数据：items 列表包含要显示的网格项。
  5. 网格视图：
    • DraggableGridView：创建可拖拽的网格视图。
    • gridDelegate：定义网格布局，这里是每行3个项目。
    • items：要显示的项目列表。
    • itemBuilder：定义每个项目的构建方式。
    • onWillAccept：在拖动开始前的回调，用于处理拖动前的逻辑（可选）。
    • onDragCompleted：在拖动完成后的回调，用于更新项目顺序。

运行这个代码后，你将看到一个包含20个可拖拽项目的网格视图，每个项目都有不同的颜色，并且可以在网格中重新排序。

回到顶部