Qt 做一个类似微信滑动聊天界面的demo
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/lihuidashen/p/11588939.html
由于编译器不可以上传视频,想要视频效果,可以访问以下链接。
https://mp.weixin.qq.com/s/gS9DYF18z966kp1m-QNnbA
软件架构
编译结果
现在开始讲一下源码吧
首先可以参考一下,会有一些收获的。
Qt 纯属娱乐-绘制一个模拟时钟
Qt 纯属娱乐-模拟一个导航定位系统
看到上拉下拉出现的缓慢旋转的小圈圈了吗,其实使用的一个图片,不过看着还是有动态的效果,bingo.
Rectangle
QML的Rectangle组件,顾名思义就是描绘一个矩形,一个可视化的对象。外加设置属性来达到我们想要的效果。常用的有矩形的颜色,边框颜色,圆角等设置。
Rectangle {
id: loadTip
width: parent.width
height: -root.contentY
color: Qt.lighter("green")
z: -
clip: true Text {
anchors.top: loadImage.bottom
anchors.horizontalCenter: parent.horizontalCenter
text: qsTr("loading")
font.pointSize:
color: Qt.lighter("white")
} Image {
id: loadImage
source: "qrc:/images/loading.ico"
anchors.centerIn: parent
}
}
ParallelAnimation
组合动画有两种,这个只是其中一种而已,ParallelAnimation自己并不会产生动画,而是把其它的动画放进来。另外呢,在ParallelAnimation里面的动画也都是同时执行的。当然,别的方法也能实现,但是在大部分时候ParallelAnimation的方法是比其它方式更好的。
SequentialAnimation
SequentialAnimation和ParallelAnimation这两个类型允许多个动画定义在一起。定义在SequentialAnimation中的动画,一个接一个运行。定义在ParallelAnimation在同一时间一起运行
PropertyAnimation
PropertyAnimation提供了一种对属性值的更改进行动画处理的方法。它可以通过多种方式用于定义动画
RotationAnimation
RotationAnimation是一种特殊的PropertyAnimation,它可以控制动画期间的旋转方向。默认情况下,它会沿数值变化的方向旋转。从0到240的旋转将顺时针旋转240度,而从240到0的旋转将逆时针旋转240度。可以设置direction属性以指定旋转发生的方向。
NumberAnimation
NumberAnimation是一种特殊的PropertyAnimation,它定义在数值更改时要应用的动画。
ParallelAnimation {
id: dropDownAnimation
NumberAnimation {
target: root
property: "contentY"
to: -;
duration:
} SequentialAnimation {
RotationAnimation {
target: loadImage
from:
to:
duration: loadDuration
}
NumberAnimation {
target: root
property: "contentY"
to:
duration:
}
} onStopped: {root.load(); isDropDown = false; }
}
对于上拉更新,下拉加载,删除一系列的动作,代码如下
onIsPullOnChanged: {
if(root.isPullOn)
pullOnAnimation.restart();
}
onContentYChanged: {
if( (root.height - Math.abs(contentY - contentHeight)) < 1.5
&& (root.height - Math.abs(contentY - contentHeight) ) > -1.5)
root.bottomContentY = contentY;
}
onIsDropDownChanged: {
if(isDropDown && !dropDownAnimation.running && (-contentY > 100.0))
dropDownAnimation.restart();
}
onFlickingChanged: {
if(!isDropDown && (-contentY > 100.0))
isDropDown = true; if(!isPullOn && ((height - Math.abs(contentY - contentHeight)) > 65.0)) {
isPullOn = true;
}
}
总结
qt 真是个好东西,这个还有很多功能可以增加,比如置顶某人,编辑备注,设置为未读状态,这些都是很好的锻炼自己的例子,抛砖引玉一番。
推荐阅读
(点击标题可跳转阅读)
Qt 学习笔记-强势入门
Qt 学习笔记-Qt中添加背景图片的方法
Qt 学习笔记-处理鼠标响应事件
Qt 纯属娱乐-绘制一个模拟时钟
Qt 学习笔记-中秋节,QPainter画一颗小心心送给你
Qt 纯属娱乐-模拟一个导航定位系统
Qt 做一个类似微信滑动聊天界面的demo的更多相关文章
- 使用plupload做一个类似qq邮箱附件上传的效果
公司项目中使用的框架是springmvc+hibernate+spring,目前需要做一个类似qq邮箱附件上传的功能,暂时只是上传小类型的附件 处理过程和解决方案都需要添加附件,处理过程和解决方案都可 ...
- UnityEditorWindow做一个TimeLine的滑动块
UnityEditorWindow做一个TimeLine的滑动块 最近在做一个基于TimeLine的动画编辑器,在制作TineLine滑动条时遇到问题,网上查了好久,试了好多GUI组件都不满意.最后在 ...
- 如何用 js 实现一个类似微信红包的随机算法
如何用 js 实现一个类似微信红包的随机算法 js, 微信红包, 随机算法 "use strict"; /** * * @author xgqfrms * @license MIT ...
- iOS tableViewCell 在cell赋值、网络加载照片位置偏移大小错乱,做一个类似qq列表的tableview 更新3
更新3: 问题 加载慢!(一时间给的处理负载过大,要分散)在下载图片,判断状态后 对每个cell对图片灰置图片处理保存,影响了主线程的操作 :上拉加载时,无法上下滑动tableview 无法点击cel ...
- 一个模仿微信群聊的H5页面
开始 上半年小米Max发布的时候,做了一个在朋友圈传播的模仿微信的群聊界面H5页面:一群公司的大咖在群里聊小米Max,用户可以向大咖们提问,以此了解产品. 页面的主体是群聊对话,同时在对话中包含了很多 ...
- 小程序做一个能够左右滑动切换的多tab页面
主要原理:使用 <swiper> 和 <scroll-view> 组件 代码片段: https://developers.weixin.qq.com/s/mLx4FWmF757 ...
- [js高手之路]html5 canvas动画教程 - 自己动手做一个类似windows的画图软件
这个绘图工具,我还没有做完,不过已经实现了总架构,以及常见的简易图形绘制功能: 1,可以绘制直线,圆,矩形,正多边形[已完成] 2,填充颜色和描边颜色的选择[已完成] 3,描边和填充功能的选择[已完成 ...
- windows下创建做一个类似与linux 的SFTP
在项目中经常需要做通过ftp上传文件到ftp上,如果服务器是windows版的服务器又该如何做呢,下面就给大家介绍一个软件:freeSSHd 软件地址 http://www.freesshd.c ...
- 做一个类似JQuery获取DOM对象的$()
在dom操作时,有时根据id获取单个对象.有时根据className获取多个对象.平常可能我们用两个函数来实现这两个功能.不过我将它们整合了一下,目前使用情况良好,函数如下: view source ...
随机推荐
- Python程序包的构建和发布过程
关于我 一个有思想的程序猿,终身学习实践者,目前在一个创业团队任team lead,技术栈涉及Android.Python.Java和Go,这个也是我们团队的主要技术栈. Github:https:/ ...
- HBase 系列(八)——HBase 协处理器
一.简述 在使用 HBase 时,如果你的数据量达到了数十亿行或数百万列,此时能否在查询中返回大量数据将受制于网络的带宽,即便网络状况允许,但是客户端的计算处理也未必能够满足要求.在这种情况下,协处理 ...
- java IO流 之 FIle类基础
package IO; import java.io.File;import java.io.IOException; public class FileIO { /** * 构建及获取文件名信息 * ...
- 实战SpringCloud响应式微服务系列教程(第四章)
接上一篇: 实战SpringCloud响应式微服务系列教程(第一章) 实战SpringCloud响应式微服务系列教程(第二章) 实战SpringCloud响应式微服务系列教程(第三章) 1.1.4 引 ...
- MSIL实用指南-生成break和continue
break和continue本质都是标签的跳转
- Python Web Flask源码解读(三)——模板渲染过程
关于我 一个有思想的程序猿,终身学习实践者,目前在一个创业团队任team lead,技术栈涉及Android.Python.Java和Go,这个也是我们团队的主要技术栈. Github:https:/ ...
- Android Studio安卓学习笔记(二)Android项目结构
上一篇代码,我们学习了Android的功能以及如何用Android Studio开发第一个安卓程序.下面就要介绍Android项目结构.为日后学习打基础. 一:Android项目结构 打开MyFris ...
- MySQL如何选择合适的索引
先来看一个栗子 EXPLAIN select * from employees where name > 'a'; 如果用name索引查找数据需要遍历name字段联合索引树,然后根据遍历出来的主 ...
- Windows 7 sometimes breaks FTP connections on Java 7 if firewall is enabled.
Solution: 用管理员身份,在cmd命令行输入: netsh advfirewall set global StatefulFTP disable 会关闭防火墙,从而解决问题.
- BZOJ-3343教主的魔法+分块(大块排序二分)
传送门:https://www.luogu.org/problemnew/show/P2801 参考:http://hzwer.com/2784.html 感觉思路无比清晰:) ps:我在洛谷A的, ...