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和GO语言实现的消息摘要算法示例
Mar 10 Python
python创建进程fork用法
Jun 04 Python
python实现人脸识别代码
Nov 08 Python
python 二维数组90度旋转的方法
Jan 28 Python
Python实现的序列化和反序列化二叉树算法示例
Mar 02 Python
python点击鼠标获取坐标(Graphics)
Aug 10 Python
Python实现链表反转的方法分析【迭代法与递归法】
Feb 22 Python
python print 格式化输出,动态指定长度的实现
Apr 12 Python
python构造IP报文实例
May 05 Python
python中怎么表示空值
Jun 19 Python
django表单中的按钮获取数据的实例分析
Jul 31 Python
Python3中的tuple函数知识点讲解
Jan 03 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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
php 中的closure用法详解
2017/06/12 PHP
[原创]图片分页查看
2006/08/28 Javascript
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
Python基础教程之异常详解
2019/01/10 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
夏季奶茶店创业计划书
2014/01/16 职场文书
摄影展策划方案
2014/06/02 职场文书
销售业务员岗位职责
2015/02/13 职场文书
工作经历证明范本
2015/06/15 职场文书
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL