qml实现动态轮播图

一、效果展示

在这里插入图片描述

二、源码分享

 DynamicCarousel.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.ShapesItem {id:selfsignal clearError(string numberStr)PathView{id:pathViewanchors.fill: parentfocus: trueclip: truemodel:listModeldelegate:listDelegatepath: listPathpreferredHighlightBegin: 0.5preferredHighlightEnd: 0.5pathItemCount: 3MouseArea{anchors.fill: parenthoverEnabled: truecursorShape: Qt.PointingHandCursoronEntered: {timerCircle.stop()}onExited: {timerCircle.start()}}}ListModel{id:listModelListElement{number:"000";note:"伺服电机故障";solution:"请联系管理员"}ListElement{number:"111";note:"卡件";solution:"清除线体后重新启动"}ListElement{number:"222";note:"等待处理";solution:"请联系管理员"}ListElement{number:"333";note:"等待处理";solution:"请联系管理员"}ListElement{number:"444";note:"等待处理";solution:"请联系管理员"}ListElement{number:"555";note:"等待处理";solution:"请联系管理员"}}Component{id:listDelegateRectangle{width: pathView.widthheight: pathView.height*1.2color: "#f013227a"radius: 15border.width: 2z:PathView.z?PathView.z:0scale: PathView.scale?PathView.scale:1.0required property string numberrequired property string noterequired property string solutionRowLayout{anchors.fill: parentanchors.margins: 5ColumnLayout{Layout.fillWidth: trueLayout.fillHeight: trueText {id: textErrorNumberLayout.fillWidth: trueLayout.fillHeight: truetext: numberfont.pointSize: 16verticalAlignment: Qt.AlignVCenterhorizontalAlignment: Qt.AlignHCentercolor: "#ffffffff"}Text {Layout.fillWidth: trueLayout.fillHeight: trueid: textErrorNotetext: notefont.pointSize: 12verticalAlignment: Qt.AlignVCenterhorizontalAlignment: Qt.AlignHCentercolor: "#ffffffff"}Text {Layout.fillWidth: trueLayout.fillHeight: trueid: textErrorSolutiontext: solutionfont.pointSize: 12verticalAlignment: Qt.AlignVCenterhorizontalAlignment: Qt.AlignHCentercolor: "#ffffffff"}}Button{id:btnClearErrorLayout.preferredWidth: parent.width/5Layout.preferredHeight: parent.width/5hoverEnabled: falsescale: down?0.8:1.0background: Rectangle{radius: 10border.width: 0color: "#00000000"Image {anchors.fill: parentsource:"qrc:/image/resources/images/qml/clearError.svg"}}onClicked: {clearError(textErrorNumber.text)listModel.remove(pathView.currentIndex)}}}}}Path{id:listPathstartX: 0startY:pathView.height/2PathAttribute{name:"z";value:0}PathAttribute{name:"scale";value:0.5}PathLine{x:pathView.width/2y:pathView.height/2}PathAttribute{name:"z";value:2}PathAttribute{name:"scale";value:0.8}PathLine{x:pathView.widthy:pathView.height/2}PathAttribute{name:"z";value:0}PathAttribute{name:"scale";value:0.5}}Timer{id:timerCirclerunning: truerepeat: trueinterval: 3000onTriggered: {pathView.incrementCurrentIndex()}}//ListElement{number:"1121";note:"等待处理";solution:"请联系管理员"}function addError(numberStr,noteStr,solutionStr){var data = {number: numberStr,note:noteStr,solution:solutionStr};listModel.append(data)}
}

三、使用方法

DynamicCarousel{anchors.fill: parentanchors.margins: 5anchors.horizontalCenter: parent.horizontalCenter}

四、实现原理

通过PathView实现,通过路径和缩放来实现动态效果。

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

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

相关文章

[Docker] Mac M1系列芯片上完美运行Docker

docker pull qinchz/dm8-arm64 container_name: dm8ports:- "5236:5236"mem_limit: 1gmemswap_limit: 1gvolumes:- /data/dm8:/home/dmdba/data 数据库实例参数已修改,接近oracle使用习惯 #字符集 utf-8 CHARSET1 #VARCHAR 类型对象的长度以字符为单位 …

软件测试|Windows系统配置pytest+allure环境教程

前言 allure可以输出非常精美的测试报告,也可以和pytest进行完美结合,不仅可以渲染页面,还可以控制用例的执行。本文我们将介绍Windows系统中如何配置allure环境。 第一步:配置Java环境 因为allure的运行依赖于Java环境&#x…

WEB 3D技术 three.js 光照与阴影

本文 我们来说 灯光与阴影 之前 我们有接触到光照类的知识 但是阴影应该都是第一次接触 那么 我们先来看光 首先是 AmbientLight 环境光 你在官网中搜索 AmbientLight 官方是就写明了 环境光是不会产生阴影的 因为 它没有反向 然后是 DirectionalLight 平行光 它是可以投射阴…

OpenAI ChatGPT-4开发笔记2024-04:Chat之Tool之2:multiple functions

从程序员到ai Expert 1 定义参数和函数2 第一轮chatgpt3 第一轮结果和function定义全部加入prompt再喂给chatgpt4 大结局7 参考资料 上一篇解决了调用一个函数的问题。这一篇扩展为调用3个。n个自行脑补。 1 定义参数和函数 #1.设定目标 import json import openai#1.定义para…

Python 快速合并PDF表格转换输出CSV文件

单位的刷脸考勤机后台系统做得比较差,只能导出每个部门的出勤统计表pdf,格式如下: 近期领导要看所有部门的考勤数据,于是动手快速写了个合并pdf并输出csv文件的脚本。 安装模块 pypdf2,pdfplumber,前者用…

docker打包介绍

最近在做一个开源项目,遇到开发者问各种问题,发现都是系统和软件版本的差异引起的。于是了解了一下docker的使用,发现docker真是个好东东,基本解决了各种版本差异的问题,真正做到了一键部署使用。 先熟悉一下docker里…

使用Django框架自带的Form表单完成简单的用户登录注册

如果不知道怎么配置Django环境以及如何连接数据库请点击我的上一篇博客: 使用pycharm初始化Django框架并连接Sql Server 文章目录 1.Django默认生成的数据表2.用户登录2.1创建登录页面2.2视图处理登录请求2.3配置访问路径 3.用户注册3.1创建用户表单3.2创建注册模版…

Java中的网络编程

文章目录 网络基础知识IP 地址端口协议 Java 中网络编程InetAddress(静态类)UDP 通信原理UDP 发送数据步骤UDP 接收数据步骤UDP 发送接收案例 TCP 通信原理TCP 发送数据步骤TCP 接收数据步骤TCP 发送接收案例 网络基础知识 概述:在网络通信协…

限流式保护器在户外汽车充装的应用

摘 要:国家标准GB51348-2019中规定储备仓库、电动车充电等场所的末端回路应设置限流式电气防火保护器。电气防火限流式保护器可以有效克服传统断路器、空气开关和监控设备存在的短路电流大、切断短路电流时间长、短路时产生的电弧火花大,以及使用寿命短等…

鱼哥赠书活动第⑥期:《内网渗透实战攻略》看完这本书教你玩转内网渗透测试成为实战高手!!!!

鱼哥赠书活动第⑥期:《内网渗透实战攻略》 如何阅读本书:本书章节介绍:本书大致目录:适合阅读对象:赠书抽奖规则:往期赠书福利: 当今,网络系统面临着越来越严峻的安全挑战。在众多的安全挑战中&…

14:00面试,14:07就出来了,问的问题有点变态。。。

前言 刚从小厂出来,没想到在另一家公司我又寄了。 在这家公司上班,每天都要加班,但看在钱给的比较多的份上,也就不太计较了。但万万没想到一纸通知,所有人不准加班了,不仅加班费没有了,薪资还…

EndNote20 下载与安装详细教程

扫描文末二维码,关注微信公众号:ThsPool 后台回复 a004 ,免费领取 EndNote20下载安装包 EndNote是一款备受欢迎的文献管理软件,被数百万研究人员、学生和图书管理员广泛使用。它提供便捷的方式来扩展各种语言的参考书目&#xff0…

并发程序设计--D11D12进程间通信

概念:就是进程和进程之间交换信息。 常用通信方式 无名管道(pipe) 有名管道 (fifo) 信号(signal) 共享内存映射(mmap) 套接字(socket) 过时的IPC通信方式 System…

ChatGPT扩展系列之网易数帆ChatBI

在当今数字化快速发展的时代,数据已经成为业务经营与管理决策的核心驱要素。无论是跨国大企业还是新兴创业公司,正确、迅速地洞察数据已经变得至关重要。然而,传统的BI工具往往对用户有一定的技术门槛,需要熟练的操作技能和复杂的查询语句,这使得大部分的企业员工难以深入…

【Flutter 开发实战】Dart 基础篇:从了解背景开始

想要学会用 Flutter 开发 App,就不可避免的要学习另一门很有意思的编程语言 —— Dart。很多小伙伴可能在学习 Flutter 之前可能都没听说过这门编程语言,我也是一样,还以为 Dart 是为了 Flutter 而诞生的;然而,当我们去…

计算机网络(2)

计算机网络(2) 小程一言专栏链接: [link](http://t.csdnimg.cn/ZUTXU) 计算机网络和因特网(2)分组交换网中的时延、丢包和吞吐量时延丢包吞吐量总结 协议层次及其服务模型模型类型OSI模型分析TCP/IP模型分析 追溯历史 小程一言 我…

2024年 快速搭建自己AI Gemini API 搭建完整

先看下效果 体验效果 Gemini 前言 12月7日消息,谷歌12月6日宣布推出其认为规模最大、功能最强大的人工智能模型Gemini。Gemini将包括三种不同的套件:Gemini Ultra,Gemini Pro和Gemini Nano。 谷歌表示,该公司备受期待的人工智能…

YB2412L 18V 2A 500KHz 同步降压稳压器

YB2412L 18V 2A 500KHz 同步降压稳压器 概述: YB2412L是一种高频、同步、整流、降压、开关模式转换器 移动组。它提供了一个非常紧凑的解决方案,以实现一个2A连续输出电流在一个广泛的输入供应 范围,具有良好的负荷和线路调节。 YB2412L需…

【FPGA/verilog -入门学习17】vivado 实现串口自发自收程序

1,需求 PC使用串口助手给FPGA板发送9600 波特率的数据,FPGA板接收到数据后,回复同样的数据给PC 2,需求分析 按模块可以划分为: rx接收模块,将输入的8位并行rx 数据转换成[7:0]rx_data 信号,当…

设计模式之外观模式【结构型模式】

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档> 学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您: 想系统/深入学习某…