首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在flutter中更新列子onDragComplete

在Flutter中,要实现拖拽操作并更新UI,可以使用GestureDetector和Draggable组件。下面是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

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

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

class DraggableWidget extends StatefulWidget {
  @override
  _DraggableWidgetState createState() => _DraggableWidgetState();
}

class _DraggableWidgetState extends State<DraggableWidget> {
  Color _color = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (details) {
        setState(() {
          // 更新位置
          RenderBox box = context.findRenderObject() as RenderBox;
          Offset offset = box.localToGlobal(details.localPosition);
          print(offset);
        });
      },
      child: Container(
        width: 100,
        height: 100,
        color: _color,
        child: Center(
          child: Text(
            'Drag Me',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

在上面的代码中,我们创建了一个DraggableWidget组件,它是一个可拖拽的小部件。通过GestureDetector的onPanUpdate回调函数,我们可以获取到拖拽的位置信息,并在setState中更新位置。

这个示例中的DraggableWidget是一个简单的矩形容器,你可以根据自己的需求进行修改和扩展。在实际应用中,你可以根据拖拽的位置信息来更新UI,例如改变颜色、改变大小等。

推荐的腾讯云相关产品:腾讯云移动开发平台(https://cloud.tencent.com/product/mpp)

请注意,以上答案仅供参考,具体实现方式可能因个人需求和项目要求而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 何在PostgreSQL更新大表

    本文来源:www.codacy.com/blog/how-to… 在Postgres更新大型表并不像看起来那样简单。如果您的表包含数亿行,您将发现很难及时进行简单的操作,例如添加列或更改列类型。...在这篇博客文章,我将尝试概述一些策略,以在管理大型数据集的同时最大程度地减少表不可用性。 一般准则 当您更新的值时,Postgres将在磁盘写入一个新行,弃用旧行,然后继续更新所有索引。...除此之外,需要更新大表时还应了解的事项列表: 从头开始创建新表比更新每一行要快。顺序写比稀疏更新快,并且最后不会出现死行。 表约束和索引严重延迟了每次写入。...更新行时,不会重写存储在TOAST的数据 从Postgres 9.2开始,在某些数据类型之间进行转换不需要重写整个表。例如:从VARCHAR(32)转换为VARCHAR(64)。...如果可以安全地删除现有表,并且有足够的磁盘空间,则执行更新的最简单方法是将数据插入到新表,然后对其进行重命名。

    4.7K10

    Flutter 系列 如何在Flutter嵌入H5页面

    比如,一个电商应用,网页端的购物车结算功能可能需要调用原生应用的支付接口来完成支付操作。 二、应用场景 混合开发 在移动应用开发,WebView 常被用于混合开发模式。...开发人员可以利用前端技术( HTML、CSS 和 JavaScript)开发部分功能界面,然后通过 WebView 嵌入到原生应用,这样可以提高开发效率,同时降低开发成本。...例如,一些企业级应用可能会采用混合开发模式,以便快速迭代和更新部分功能模块。 内容展示 用于展示动态的、需要频繁更新的内容。...由于网页内容可以随时在服务器端进行更新,而不需要更新整个应用,所以对于那些需要及时推送新信息的应用场景非常适用。 比如金融类应用展示实时的股票行情信息,或者社交应用展示动态的广告内容。...2. flutter Webview 插件 flutter_webview 是 Flutter 的插件,用于在应用显示网页内容。

    9910

    何在Mac上的软件更新隐藏MacOS Catalina更新提示

    有好多小伙伴不愿意升级到MacOS Catalina,但是电脑上有系统更新的红点,那么怎么去除呢,下面教大家如何在Mac上的软件更新隐藏MacOS Catalina,Mac取消系统更新的红点。...1.退出系统偏好设置 2.在Mac上启动终端应用程序,该应用程序位于/ Applications / Utilities /文件夹 3.在“终端”命令行输入以下命令: sudo softwareupdate...随着MacOS Catalina不再占据主要的“软件更新”屏幕,您将继续收到有关安全更新,Safari更新,iTunes更新以及当前正在运行的MacOS版本的任何其他软件版本的传入软件更新的通知。...如何在软件更新再次使MacOS Catalina升级可用 取消隐藏MacOS Catalina并使MacOS 10.15更新再次可用,您可以执行以下两项操作之一。...要使MacOS Catalina升级再次出现在“软件更新,请返回命令行并使用以下命令行语法清除并重置被忽略的软件更新列表: sudo softwareupdate --reset-ignored 再次使用管理员密码进行身份验证

    5.3K20

    【DB笔试面试511】如何在Oracle写操作系统文件,写日志?

    题目部分 如何在Oracle写操作系统文件,写日志? 答案部分 可以利用UTL_FILE包,但是,在此之前,要注意设置好UTL_FILE_DIR初始化参数。...image.png 其它常见问题如下表所示: 问题 答案 Oracle哪个包可以获取环境变量的值? 可以通过DBMS_SYSTEM.GET_ENV来获取环境变量的当前生效值。...在CLIENT_INFO列存放程序的客户端信息;MODULE列存放主程序名,包的名称;ACTION列存放程序包的过程名。该包不仅提供了设置这些列值的过程,还提供了返回这些列值的过程。...如何在存储过程暂停指定时间? DBMS_LOCK包的SLEEP过程。例如:“DBMS_LOCK.SLEEP(5);”表示暂停5秒。 DBMS_OUTPUT提示缓冲区不够,怎么增加?...如何在Oracle写操作系统文件,写日志? 可以利用UTL_FILE包,但是,在此之前,要注意设置好UTL_FILE_DIR初始化参数。

    28.8K30

    何在知行之桥EDI系统配置更新证书

    在EDI系统与交易伙伴实现数据传输时为保证数据的安全性,需要使用一对数字证书对数据进行签名和加密,但是在申请或购买证书时会给证书一个有限期,证书到期时,您需要重新申请或购买新的证书进行更新,那么在知行之桥如何配置和更新证书呢...本文将介绍如何在知行之桥系统配置和更新自己的证书,以及交易伙伴的证书。...当自己的证书即将到期前,您需要重新申请或购买新的证书对,并将新的公钥证书提供给您的交易伙伴约一个时间进行同步更换,即您在知行之桥上更新自己的新的私钥证书,交易伙伴在他们的EDI系统同步更新您的新的公钥证书...更新自己的TLS证书: 只需要在您配置自己TLS证书的位置更换为新的SSL私钥证书即可,具体配置位置参考:如何将文件接收地址AS2 URL的HTTP修改为HTTPS?...更新交易伙伴的TLS证书 在知行之桥的MFT端口配置交易伙伴的TLS公钥证书,比如您使用的是AS2传输协议,在创建的AS2端口的“设置”页面的“交易伙伴证书”下配置更新其新的TLS证书即可: 更多EDI

    66470
    领券