Flutter自定义可拖动组件

这篇具有很好参考价值的文章主要介绍了Flutter自定义可拖动组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Flutter自定义可拖动组件,Flutter,flutter文章来源地址https://www.toymoban.com/news/detail-691827.html

 WidgetsBinding.instance.addPostFrameCallback((_) async {
      Overlay.of(context)?.insert(_entry());
    });
  OverlayEntry _entry() {
    return OverlayEntry(builder: (ctx) {
      return DraggableComponentOrderStatuWidget(
          Offset(ctx.width - 100, ctx.height / 3));
    });
  }
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:upower/common/style/common_style.dart';

class DraggableComponentOrderStatuWidget extends StatefulWidget {
  DraggableComponentOrderStatuWidget(this.offsetParam, {super.key});

  Offset offsetParam;

  @override
  State<DraggableComponentOrderStatuWidget> createState() =>
      _DraggableComponentOrderStatuWidgetState();
}

class _DraggableComponentOrderStatuWidgetState
    extends State<DraggableComponentOrderStatuWidget> {
  Offset? _offset;

  Widget _getContentWidget() {
    return Container(
      alignment: Alignment.center,
      width: 100,
      height: 30,
      decoration: const BoxDecoration(
        color: ColorStyle.primaryC2,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(15), bottomLeft: Radius.circular(15)),
      ),
      child: Text(
        "租赁中",
        style: TextStyle(
            fontSize: 12.sp,
            color: Colors.white,
            decoration: TextDecoration.none),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    _offset = widget.offsetParam;
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          right: 0,
          top: _offset?.dy,
          child: Draggable(
            feedback: _getContentWidget(),
            childWhenDragging: Text(""), // 设置为null以隐藏原始小部件
            onDraggableCanceled: (velocity, offset) {
              setState(() {
                _offset = offset;
              });
            },
            child: _getContentWidget(),
          ),
        ),
      ],
    );
  }
}

到了这里,关于Flutter自定义可拖动组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • flutter web项目中鼠标拖动无法实现滚动效果

    在完成web的flutter项目时,发现ListView列表使用鼠标拖动无法滚动,尝试发现使用触摸板可以实现滚动,但如果用户使用没有触摸板的电脑或列表为横向滚动时就无法实现项目需求了,在解决问题的过程中尝试了以下方法: 1.尝试使用点击事件模拟滑动手势 如果web项目中无法使

    2024年02月09日
    浏览(43)
  • Flutter实现Android拖动到垃圾桶删除效果-Draggable和DragTarget的详细讲解

    Draggable是Flutter框架中的一个小部件,用于支持用户通过手势拖动一个子部件。它是基于手势的一种方式,可以使用户可以在屏幕上拖动指定的部件。以下是关于Draggable的一些详细介绍: Draggable的构造函数 child (Widget): 被拖动的子部件。 feedback (Widget?): 拖动时显示的反馈部件。

    2024年02月04日
    浏览(37)
  • Android应用-Flutter实现Android拖动到垃圾桶删除效果-Draggable和DragTarget的详细讲解

    Draggable是Flutter框架中的一个小部件,用于支持用户通过手势拖动一个子部件。它是基于手势的一种方式,可以使用户可以在屏幕上拖动指定的部件。以下是关于Draggable的一些详细介绍: Draggable的构造函数 child (Widget): 被拖动的子部件。 feedback (Widget?): 拖动时显示的反馈部件。

    2024年02月04日
    浏览(39)
  • Flutter 笔记 | Flutter 布局组件

    布局类组件都会包含一个或多个子组件,布局类组件都是直接或间接继承 SingleChildRenderObjectWidget 和 MultiChildRenderObjectWidget 的Widget,它们一般都会有一个 child 或 children 属性用于接收子 Widget。 不同的布局类组件对子组件排列(layout)方式不同,如下表所示: Widget 说明 用途

    2024年02月06日
    浏览(51)
  • Flutter 笔记 | Flutter 可滚动组件

    我们介绍过 Flutter 有两种布局模型: 基于 RenderBox 的盒模型布局。 基于 Sliver ( RenderSliver ) 按需加载列表布局。 之前我们主要了解了盒模型布局组件,下面学习基于 Sliver 的布局组件。 通常可滚动组件的子组件可能会非常多、占用的总高度也会非常大;如果要一次性将子组件

    2024年02月06日
    浏览(49)
  • Flutter开发笔记:Flutter 布局相关组件

    Flutter开发笔记 Flutter 布局与布局组件 - 文章信息 - Author: Jack Lee (jcLee95) Visit me at: https://jclee95.blog.csdn.net Email: 291148484@163.com. Shenzhen China Address of this article: https://blog.csdn.net/qq_28550263/article/details/131419782 【介绍】:本文介绍Flutter 布局相关组件。 Flutter 中提供了丰富的原生布局组

    2024年02月11日
    浏览(53)
  • 【Flutter】Flutter 设置默认字体 设置自定义字体

    你是否渴望成为 Flutter 的专家,掌握更多的技巧和最佳实践?我们有个好消息要告诉你! Flutter 从零到一 基础入门到应用上线全攻略 正在等待你的加入!这个专栏包含了你需要的所有 Flutter 学习资源

    2024年02月09日
    浏览(54)
  • 【第四章 flutter学习之flutter基础组件】

    android、ios各自平台的资源文件 lib 项目目录 linux macos PC平台资源文件 web web平台资源文件 其他的基本上是一些配置文件 pubspec.yaml 配置文件类似vue中的json 核心文件是main.dart文件 首先我们先清空main.dart文件 引入主题 import ‘package:flutter/material.dart’; 定义入口方法 用来调用组件

    2024年02月15日
    浏览(49)
  • 【第五章 flutter学习之flutter进阶组件-上篇】

    children可以复制多个组成列表 设置纵向列表方向 Flutter动态列表可以通过ListView.builder或ListView.separated来实现。 如下例 Filutter 是一个开源的 JavaScript 库,用于创建和管理可过滤和可排序的数据表。FridView 是 Filutter 库中的一个组件,用于在数据表中显示数据行。FridView 组件具有

    2024年02月14日
    浏览(37)
  • 【第五章 flutter学习之flutter进阶组件-下篇】

    Flutter Scaffold 是一个用于构建基本用户界面的布局组件。它提供了许多属性,使得开发者能够轻松地创建一个完整的屏幕布局。以下是 Flutter Scaffold 的一些主要属性: appBar:定义应用的顶部导航栏。通常,它包含标题、返回按钮和其他导航控件。 body:应用程序的主要内容区

    2024年02月14日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包