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实现给微信公众号发送消息的方法
Jun 30 Python
Python+Django搭建自己的blog网站
Mar 13 Python
Python基础教程之利用期物处理并发
Mar 29 Python
Python实现修改IE注册表功能示例
May 10 Python
Django之模型层多表操作的实现
Jan 08 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
Jul 19 Python
解决pandas展示数据输出时列名不能对齐的问题
Nov 18 Python
Python定义函数时参数有默认值问题解决
Dec 19 Python
解决Pytorch 加载训练好的模型 遇到的error问题
Jan 10 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
Mar 11 Python
python保存大型 .mat 数据文件报错超出 IO 限制的操作
May 10 Python
python四种出行路线规划的实现
Jun 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
一个取得文件扩展名的函数
2006/10/09 PHP
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
node.js通过url读取文件
2020/10/16 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
Python实现的矩阵类实例
2017/08/22 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
pyqt5实现登录界面的模板
2020/05/30 Python
pytorch torch.nn.AdaptiveAvgPool2d()自适应平均池化函数详解
2020/01/03 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
四个太阳教学反思
2014/02/01 职场文书
2014年母亲节寄语
2014/05/07 职场文书
植树节口号
2014/06/21 职场文书
出租车拒载检讨书
2015/01/28 职场文书
材料员岗位职责范本
2015/04/11 职场文书
运动会100米加油稿
2015/07/21 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
Python机器学习之决策树和随机森林
2021/07/15 Javascript