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实现将DOC文档转换为PDF的方法
Jul 25 Python
Python利用ElementTree模块处理XML的方法详解
Aug 31 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
Apr 28 Python
解决csv.writer写入文件有多余的空行问题
Jul 06 Python
python 实现数字字符串左侧补零的方法
Dec 04 Python
Python这样操作能存储100多万行的xlsx文件
Apr 16 Python
python保存字典和读取字典的实例代码
Jul 07 Python
Python如何使用k-means方法将列表中相似的句子归类
Aug 08 Python
在Python中获取操作系统的进程信息
Aug 27 Python
Django中的FBV和CBV用法详解
Sep 15 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
Jun 18 Python
python绘图模块之利用turtle画图
Feb 12 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
Javascript valueOf 使用方法
2008/12/28 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
Python 初始化多维数组代码
2008/09/06 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
python实现的生成word文档功能示例
2019/08/23 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
python request 模块详细介绍
2020/11/10 Python
一个入门级python爬虫教程详解
2021/01/27 Python
小学科学教学反思
2014/01/26 职场文书
驾驶员培训方案
2014/05/01 职场文书
本科毕业生自荐信
2014/05/26 职场文书
班子四风对照检查材料
2014/08/21 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
创业计划书之养殖业
2019/10/11 职场文书
golang 实现Location跳转方式
2021/05/02 Golang