QML用PathView实现轮播图


Posted in Python onJune 03, 2020

轮播图是一个常见的功能,在QML中,可以使用PathView来实现一个循环播放的轮播图组件。

默认情况,如果限制了加载个数,切换时第一帧会马上消失,第二帧才进入,这样会有断档的感觉。通过设置PathView中preferredHighlightBegin/End为0.5,这样当前选定的项位于路径的中间,就没有断档的感觉了。效果如下(为了测试,我没有clip,clip之后只有范围内的才可见):

QML用PathView实现轮播图

//CircleView.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
 
//轮播图
Item {
 id: control
 
 property int indicatorWidth: 12
 
 //定时切换间隔
 property alias timerInterval: path_timer.interval
 //切换动画执行时间
 property alias pathDuration: path_view.highlightMoveDuration
 property alias delegate: path_view.delegate
 property alias model: path_view.model
 //页数
 property alias count: path_page.count
 
 PathView{
 id: path_view
 anchors.fill: parent
 
 //此属性保存任何时候在路径上可见的项目数。
 //将pathItemCount设置为undefined将显示路径上的所有项目。
 //因为path代码的问题,设置为2最合适
 pathItemCount: 2
 
 //测试时,把clip去掉就能看到完整的
 //clip: true
 
 //向前移动,即顺序0 1 2 3
 movementDirection: PathView.Positive
 
 //切换的时间
 highlightMoveDuration: 1000
 
 //视图中突出显示(当前项目)的首选范围,默认值PathView.StrictlyEnforceRange
 //配合preferredHighlight的范围0.5 0.5,就能显示在正中,切换更自然
 //highlightRangeMode: PathView.StrictlyEnforceRange
 
 //希望当前选定的项位于路径的中间,则将突出显示范围设置为0.5,0.5
 preferredHighlightBegin: 0.5
 preferredHighlightEnd: 0.5
 path: Path {
  startX: -path_view.width/2
  startY: path_view.height / 2
 
  PathLine {
  x: path_view.pathItemCount * path_view.width-path_view.width / 2
  y: path_view.height / 2
  }
 }
 onModelChanged: {
  if(path_timer.running){
  path_timer.restart();
  }
 }
 
 //测试用
 //model: ["red","green","blue"]
 //delegate: Rectangle{
 // width: path_view.width
 // height: path_view.height
 // color: modelData
 //}
 }
 //定时切换
 Timer{
 id: path_timer
 running: control.visible
 repeat: true
 interval: 3000
 onTriggered: {
  //至少两个才切换
  if(path_view.count>1)
  path_view.currentIndex=(path_view.currentIndex+1)%path_view.count
 }
 }
 //右下角小圆圈
 PageIndicator {
 id: path_page
 anchors{
  right: parent.right
  bottom: parent.bottom
  margins: 30
 }
 count: path_view.count
 currentIndex: path_view.currentIndex
 spacing: control.indicatorWidth
 delegate: Rectangle{
  width: control.indicatorWidth
  height: width
  radius: width/2
  color: "white"
  //非当前页就灰色
  opacity: index===path_page.currentIndex?1:0.6
  Behavior on opacity {
  OpacityAnimator{
   duration: 200
  }
  }
  //点击跳转到该页
  //还有问题,非连续的item,他会快速连续切换到目标index
  //因为不是直接切换,有闪烁的感觉
  MouseArea{
  anchors.fill: parent
  onClicked: {
   path_view.currentIndex=index;
   if(path_timer.running){
   path_timer.restart();
   }
  }
  }
 }
 }
}

//main.qml  

测试了不同的Item个数

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
 
Window {
 visible: true
 width: 700
 height: 500
 title: qsTr("龚建波 1992")
 
 color: "#021B39"
 
 Column{
 anchors.centerIn: parent
 spacing: 10
 CircleView{
  width: 100
  height: 50
  model:["red","green","blue","orange"]
 
  delegate: Rectangle {
  width: 100
  height: 50
  color: modelData
  //Component.onCompleted: console.log(modelData,"completed")
  }
 
  Rectangle{
  anchors.fill: parent
  color: "transparent"
  border.color: "white"
  }
 }
 CircleView{
  width: 100
  height: 50
  model:["red","green","blue"]
 
  delegate: Rectangle {
  width: 100
  height: 50
  color: modelData
  //Component.onCompleted: console.log(modelData,"completed")
  }
 
  Rectangle{
  anchors.fill: parent
  color: "transparent"
  border.color: "white"
  }
 }
 CircleView{
  width: 100
  height: 50
  model:["red","green"]
 
  delegate: Rectangle {
  width: 100
  height: 50
  color: modelData
  //Component.onCompleted: console.log(modelData,"completed")
  }
 
  Rectangle{
  anchors.fill: parent
  color: "transparent"
  border.color: "white"
  }
 }
 CircleView{
  width: 100
  height: 50
  model:["red"]
 
  delegate: Rectangle {
  width: 100
  height: 50
  color: modelData
  //Component.onCompleted: console.log(modelData,"completed")
  }
 
  Rectangle{
  anchors.fill: parent
  color: "transparent"
  border.color: "white"
  }
 }
 CircleView{
  width: 100
  height: 50
 
  delegate: Rectangle {
  width: 100
  height: 50
  color: modelData
  //Component.onCompleted: console.log(modelData,"completed")
  }
 
  Rectangle{
  anchors.fill: parent
  color: "transparent"
  border.color: "white"
  }
 }
 }
}

借鉴:链接

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python 性能优化技巧总结
Nov 01 Python
浅谈python字典多键值及重复键值的使用
Nov 04 Python
python函数中return后的语句一定不会执行吗?
Jul 06 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
Feb 26 Python
Python3删除排序数组中重复项的方法分析
Jan 31 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
Jul 09 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
Apr 21 Python
如何用Python绘制3D柱形图
Sep 16 Python
Python 里最强的地图绘制神器
Mar 01 Python
Python 阶乘详解
Oct 05 Python
python获取字符串中的email
Mar 31 Python
使用python生成大量数据写入es数据库并查询操作(2)
Sep 23 Python
Python基于smtplib协议实现发送邮件
Jun 03 #Python
Pytorch环境搭建与基本语法
Jun 03 #Python
如何学习Python time模块
Jun 03 #Python
使用openCV去除文字中乱入的线条实例
Jun 02 #Python
Python能做什么
Jun 02 #Python
什么是Python中的匿名函数
Jun 02 #Python
学习python需要有编程基础吗
Jun 02 #Python
You might like
php过滤敏感词的示例
2014/03/31 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
php微信开发之百度天气预报
2016/11/18 PHP
用jquery来定位
2007/02/20 Javascript
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
详解React服务端渲染从入门到精通
2019/03/28 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
经典c++面试题四
2015/05/14 面试题
理财投资建议书
2014/03/12 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
创业计划书之农家乐
2019/10/09 职场文书
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript