Flutter拖拽容器插件drag_container的使用

Flutter拖拽容器插件drag_container的使用

题记

—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。

重要消息

1 添加依赖

实现拖拽容器效果，在这里使用drag_container依赖库，首先通过pub仓库添加依赖，代码如下：

dependencies:
  drag_container: ^0.0.1

或者通过GitHub方式添加依赖，代码如下：

dependencies:
  drag_container:
    git:
      url: https://github.com/zhaolongs/drag_container.git
      ref: master

然后加载依赖，运行以下命令：

flutter pub get

接着在需要使用的地方导入包：

import 'package:drag_container/drag_container.dart';

之后就可以使用 DragContainer 拖拽布局了。

2 DragContainer拖拽视图基本使用

通过 DragContainer 可以实现一个可拖拽的容器，通常用于上拉或下拉的交互效果。例如，下图展示了拖拽容器浮在主视图的上层，因此页面主体内容可以考虑使用层叠布局。

示例代码

/// 上拉拖拽容器效果
class BottomDragWidget extends StatefulWidget {
  [@override](/user/override)
  State<StatefulWidget> createState() {
    return BottomDragWidgetState();
  }
}

class BottomDragWidgetState extends State {
  /// 滑动控制器
  ScrollController scrollController = ScrollController();

  /// 拖拽控制器
  DragController dragController = DragController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("拖拽容器效果"),
      ),
      backgroundColor: Colors.grey,
      /// 页面主体使用层叠布局
      body: Stack(
        children: <Widget>[
          /// ... ... 页面中其他视图
          /// 拖拽视图
          buildDragWidget(),
        ],
      ),
    );
  }

  /// 构建底部对齐的拖拽容器效果视图
  Widget buildDragWidget() {
    /// 层叠布局中的底部对齐
    return Align(
      alignment: Alignment.bottomCenter,
      child: DragContainer(
        /// 拖拽关闭时的高度（占屏幕高度的比例，默认0.4）
        initChildRate: 0.1,

        /// 拖拽打开时的高度（占屏幕高度的比例，默认0.4）
        maxChildRate: 0.4,

        /// 是否显示默认的标题
        isShowHeader: true,

        /// 背景颜色
        backGroundColor: Colors.white,

        /// 背景圆角大小
        cornerRadius: 12,

        /// 自动上滑或下滑的分界值
        maxOffsetDistance: 1.5,

        /// 拖拽控制器
        controller: dragController,

        /// 滑动控制器
        scrollController: scrollController,

        /// 自动滑动的时间
        duration: Duration(milliseconds: 800),

        /// 拖拽的子Widget
        dragWidget: buildListView(),

        /// 拖拽标题点击事件回调
        dragCallBack: (isOpen) {},
      ),
    );
  }

  /// 构建拖拽容器内的滑动视图
  buildListView() {
    return ListView.builder(
      physics: ClampingScrollPhysics(),

      /// 列表的控制器 与拖拽容器关联
      controller: scrollController,

      /// 列表项数量
      itemCount: 20,
      itemBuilder: (BuildContext context, int index) {
        return InkWell(
            onTap: () {
              print("点击事件 $index");

              /// 关闭拖拽容器
              dragController.close();
            },
            child: ListTile(title: Text('测试数据 $index')));
      },
    );
  }
}

更多关于Flutter拖拽容器插件drag_container的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


drag_container 是一个用于实现拖拽功能的 Flutter 插件，允许用户通过拖拽手势移动容器。以下是如何使用 drag_container 插件的步骤和示例代码。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 drag_container 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  drag_container: ^1.0.0  # 请使用最新版本

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

2. 导入插件

在 Dart 文件中导入 drag_container 插件：

import 'package:drag_container/drag_container.dart';

3. 使用 DragContainer

DragContainer 是一个可以拖拽的容器组件。你可以将其包裹在任何你想要拖拽的 widget 外面。

以下是一个简单的示例，展示如何使用 DragContainer：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Drag Container Example'),
        ),
        body: Center(
          child: DragContainer(
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Drag Me',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

4. 自定义拖拽行为

DragContainer 提供了一些属性来自定义拖拽行为：

  • onDragStart: 当拖拽开始时触发的回调。
  • onDragUpdate: 当拖拽位置更新时触发的回调。
  • onDragEnd: 当拖拽结束时触发的回调。
  • constraints: 限制拖拽范围。

以下是一个自定义拖拽行为的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Drag Container Example'),
        ),
        body: Center(
          child: DragContainer(
            onDragStart: (details) {
              print('Drag started at ${details.globalPosition}');
            },
            onDragUpdate: (details) {
              print('Dragging at ${details.globalPosition}');
            },
            onDragEnd: (details) {
              print('Drag ended at ${details.offset}');
            },
            constraints: BoxConstraints(
              minWidth: 100,
              maxWidth: 200,
              minHeight: 100,
              maxHeight: 200,
            ),
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Drag Me',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
回到顶部