Delegate动画案例(P30 5.6delegate动画)

一、ListElement,ListModel,ListView

1. ListElement

ListElement 是 QML 中用于定义列表项的元素。它可以包含多个属性,每个属性对应列表项中的一个数据字段。通过在 ListModel 中使用 ListElement,可以定义一个列表的数据模型。

2. ListModel

ListModel 是 QML 中用于管理列表数据的模型。它可以包含多个 ListElement 元素,每个 ListElement 代表一个列表项。ListModel 提供了一些方法和属性来操作和访问列表数据,比如添加、删除、修改和获取列表项等。

3. ListView

ListView 是 QML 中用于显示列表数据的视图组件。它可以将 ListModel 中的数据以列表的形式展示出来,并提供了滚动、分页等功能。ListView 可以根据需要自定义列表项的外观,并支持动态更新列表数据。

4. 三者的区别和联系?

ListElement 是用于定义列表项的元素,而 ListModel 是用于管理列表数据的模型。

ListElement 是 ListModel 中的一个子元素,通过多个 ListElement 可以定义多个列表项。

ListView 使用 ListModel 作为数据源,将 ListModel 中的数据以列表的形式展示出来。

二、案例

如下图所示,点击红色方块会逐渐消失,点击底部绿色按钮会新增红色方块。

三、实现代码

main.qml

import QtQuickRectangle{width: 480; height: 300gradient: Gradient{GradientStop{ position: 0.0; color: "#dbddde"}GradientStop{ position: 1.0; color: "#5fc9f8"}}/*---------------------------按钮----------------------------*/Rectangle{property int count: theModel.count //这里用等号,就相当于只绑定了一次,保证count的值一直是追加的状态anchors.bottom: parent.bottom //锚定到窗口底部anchors.left: parent.left //锚定到窗口左边anchors.right: parent.right //锚定到窗口右边anchors.margins: 20 //间隙为20height: 40color: "#53f769"border.color: Qt.lighter(color, 1.1) //添加边框的颜色,比按钮的颜色稍浅一点Text {anchors.centerIn: parent //按钮的文字放在按钮的正中间text: "Add Item" //按钮的文字设为 "Add Item"}MouseArea{anchors.fill: parent //按钮触发区域填充满整个父体onClicked: {theModel.append({"num":++parent.count}) //因为count的值非固定,所以要++console.log("num"+parent.count)}}}/*---------------------------View----------------------------*/GridView{anchors.fill: parentanchors.margins: 20anchors.bottomMargin: 80 //给底部的按钮留出足够的空间,避免重合clip: true //平滑显示开启cellWidth: 45; cellHeight: 45model: theModeldelegate: numberDelegate}/*---------------------------Model----------------------------*/ListModel{id: theModelListElement{ num: 0 }ListElement{ num: 1 }ListElement{ num: 2 }ListElement{ num: 3 }}/*---------------------------Delegate----------------------------*/Component{id: numberDelegateRectangle{id: wrappergradient: Gradient{GradientStop{ position: 0.0; color: "#f8306a"}GradientStop{ position: 1.0; color: "#fb5b40"}}required property int indexrequired property int numwidth: 40; height: 40Text {anchors.centerIn: parenttext: wrapper.numfont.pixelSize: 12}GridView.onAdd: addAnimation.start()GridView.onRemove: removeAnimation.start()NumberAnimation{id: addAnimationtarget: wrapperproperty: "scale"from: 0; to: 1duration: 250easing.type: Easing.InOutQuad}SequentialAnimation{id: removeAnimationPropertyAction{target: wrapperproperty: "GridView.delayRemove"value: true}NumberAnimation{target: wrapperproperty: "scale"to: 0duration: 250easing.type: Easing.InOutQuad}PropertyAction{target: wrapperproperty: "GridView.delayRemove"value: false}}MouseArea{anchors.fill: parentonClicked: {theModel.remove(index)}}}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/710323.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法D29 | 回溯算法5|491.递增子序列 46.全排列 47.全排列 II

491.递增子序列 本题和大家刚做过的 90.子集II 非常像,但又很不一样,很容易掉坑里。 代码随想录 视频讲解:回溯算法精讲,树层去重与树枝去重 | LeetCode:491.递增子序列_哔哩哔哩_bilibili 一个是去重,一…

在WPF MVVM 框架下实现DataGrid内容的增删查改

在WPF应用程序开发中,使用DataGrid控件来展示和编辑数据是一种常见的做法。Prism是一个模块化的WPF应用程序框架,它支持MVVM模式,使得实现数据操作和界面展示的分离变得更加容易。本文将指导您如何在使用Prism框架的WPF应用程序中实现DataGri…

【leetcode】链表分割

大家好,我是苏貝,本篇博客带大家刷题,如果你觉得我写的还不错的话,可以给我一个赞👍吗,感谢❤️ 目录 方法1. 不用哨兵位方法2. 用哨兵位 点击查看题目 思路: 将链表分为2个链表list1和list2,…

忙碌生活下的技术适应力:应对新应用学习带来的困扰与挑战

在当今信息时代,各类应用程序(APP)渗透到我们生活的方方面面,无论是工作效率提升,还是日常生活便利,都离不开它们的支持。然而,对于在快节奏工作中疲于奔命的现代人来说,当因为生活所…

GO语言学习笔记(与Java的比较学习)(七)

结构与方法 结构体定义 结构体定义的一般方式如下: type identifier struct {field1 type1field2 type2... } type T struct {a, b int} 也是合法的语法,它更适用于简单的结构体。 结构体里的字段都有 名字,像 field1、field2 等&#…

linux服务器连接数

一、要查看 Linux 服务器的最大连接数 我们需要关注两个值:文件描述符限制(file descriptor limit)和内核参数 "net.core.somaxconn"。 1. 查看文件描述符限制(file descriptor limit) 文件描述符限制决定了…

System Verilog学习笔记(十)——任务和函数

System Verilog学习笔记(十)——任务和函数 函数(function)和任务(task)可以提高代码的复用性和整洁度。他们的目的在于将大型的过程块切分为更小的片段,而便于阅读和代码维护。 区别 functi…

物联网边缘计算云边协同

文章目录 一、物联网云边协同1.IoT云边协同设计2.物联网平台设计3.物联网平台实现 二、部署环境1.节点配置2.版本信息 三、IoT云边协同部署1.部署Kubernetes集群2.部署KubeEdge3.部署ThingsBoard集群4.部署Node-RED边缘网关4.1.边缘网关功能4.2.部署EMQX4.2.部署Node-RED 5.配置…

(正规api接口代发布权限)短视频账号矩阵系统实现开发--技术全自动化saas营销链路生态

短视频账号矩阵系统实现开发--技术全自动化saas营销链路生态源头开发(本篇禁止抄袭复刻) 一、短视频矩阵系统开发者架构 云罗短视频矩阵系统saas化系统,开发层将在CAP原则基础上使用分布式架构,对此网站的整体架构采用了基于B/S三层架构模式…

React 模态框的设计(五)主体设计

弹窗的主体设计没什么特别,就是把细分化后的各个功能封装在一个个的小组件内,然后再整合。这样逻辑就分开了,不乱。 弹窗容器 这个容器是弹窗主体的根组件(不含遮罩),要能根据主题的变化能做出相应的改变。还要记录渲染后的主体…

java016学习记录

Java Web 使用 Java 开发语言完成 Web 后端的项目开发 基于 Web 的应用:网站、APP、小程序 Java 不是做前端的,做后端 Tomcat、Servlet Tomcat 的作用让 Java Web 程序可以正常运行,被浏览器访问 浏览器默认不能访问电脑上的资源&#…

Django Web架构:全面掌握Django模型字段(下)

Django Web架构 全面掌握Django模型字段(下) - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article…

C++之vector

1、vector概念 功能:vector的功能和数组非常相似,可以看成是一个升级版的数组。 vector和普通数组的区别: (1)数组是静态的,长度不可改变,而vector可以动态扩展,增加长度。…

协议和序列化反序列化

“协议”和序列化反序列化 “协议”的概念: “协议”本身是一种约定俗成的东西,由通讯双方必须共同遵从的一组约定,因此我们一定要将这种约定用计算机语言表达出来,此时双方计算机才能识别约定的相关内容 我们把这个规矩叫做“…

机器学习|决策树

左图的点是一种线性不可分的情况,无法拿一条直线去将进行分开。 每一个节点都代表一个决策,从而导致节点的分流。 最终的目标肯定是要达到分类。 但取得目标的过程是有所谓的好坏。 而这个好坏用熵/信息增益来衡量。 熵是一种用于反映系统混乱程度的物理…

思科网络设备监控

思科是 IT 行业的先驱之一,提供从交换机到刀片服务器的各种设备,以满足中小企业和企业的各种 IT 管理需求。管理充满思科的 IT 车间涉及许多管理挑战,例如监控可用性和性能、管理配置更改、存档防火墙日志、排除带宽问题等等,这需…

Makefile从入门到项目编译实战(学习笔记)

1.make和makefile介绍 1. make make 是一个应用程序,位于 /usr/bin/make 目录下,make 有如下的功能: (1)解析源程序之间的依赖关系 (2)根据依赖关系自动维护编译工作 (3&#xff09…

Jmeter插件PerfMon Metrics Collector安装使用及报错解决

Jmeter作为一个轻量级的性能测试工具,开源、小巧、灵活的特性使其越来越受到测试人员喜爱。在实际的项目中,特别是跨地区项目,排除合作方指定要求使用Loadrunner作为性能测试工具外,Jmeter会是首选。 本篇文章,就着重…

Python 全栈系列226 GlobalBuffer

说明 为了简化开发程序,特别是需要依赖全局数据的程序,例如:分布式任务需要知道当前可处理的任务;定时程序需要依据某个约束性全局变量。一个附带的好处是会大量减少对数据库产生的请求。 GlobalBuffer的代价并不高:…

基于C++的http通信记录,使用httplib,Windows环境,vscode,mingw

使用了 httplib库,链接,使用该库只需要包含头文件即可,另外在Windows环境下,使用mingw构建项目,需要在编译时链接网络编程库,task.json如下: {"version": "2.0.0","t…