QT应用篇 二、QML用Image组件实现Progress Bar 的效果

QT应用篇

一、QT上位机串口编程
二、QML用Image组件实现Progress Bar 的效果
三、QML自定义显示SpinBox的加减按键图片及显示值效果


文章目录


前言

记录自己学习QML的一些小技巧方便日后查找

QT的 qml 使用图片来达到类似进度条Progress Bar 的效果


一、qml需求

需要实现显示某一数据值类似数据中的条形图的增减效果

二、使用组件

1.Image组件

代码如下:

c 复制代码
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Shapes 1.12
import QtMultimedia 5.12
...
...
...
//数据为0时的图片
Image {
	      x:0 
	      y:0
	      height: 60
	      width:  144  //g_outflow_pressure
	      clip: true
	      horizontalAlignment : Image.AlignLeft
	      fillMode: Image.Tile
	      source: resourcesPath + "suction_empty.png"
      }
//数据不为零时显示的图片      
Image {
        x:0
        y:0
        height: 60
        width:  16 * Math.round(spinBox.value * 9 / outFlowSpinBox.value )  //spinBox.value 为实际负压值 outFlowSpinBox.value 为设置负压
        clip: true
        horizontalAlignment : Image.AlignLeft
        fillMode: Image.Tile
        source: resourcesPath + "suction_full.png"
      }
//两张图片进行叠加

2.Image中fillMode的使用

代码如下 :

cpp 复制代码
Image.Stretch:图片拉伸自适应;(默认的)
Image.PreserveAspectFit:按比例缩放,不裁剪
Image.PreserveAspectCrop:均匀缩放,必要时裁剪
Image.Tile:像贴瓷砖一样
Image.TileVertically:水平拉伸,垂直平铺
Image.TileHorizontally:垂直拉伸,水平平铺
Image.Pad:原始图像不做处理

原始代码

cpp 复制代码
Image {
	    x:0
	    y:0
	    height: 60
	    width:  16 * Math.round(spinBox.value * 9 / outFlowSpinBox.value )  
	    clip: true
	    horizontalAlignment : Image.AlignLeft
	    fillMode: Image.Tile //实现效果关键代码
	    source: resourcesPath + "suction_full.png"
	  }

例子

主要展示四个效果

Image.Stretch

Image.PreserveAspectFit

Image.PreserveAspectCrop:

Image.Tile

① Image.Stretch:图片拉伸自适应;(默认的)

实现效果:


②Image.PreserveAspectFit:按比例缩放,不裁剪

实现的效果:


③Image.PreserveAspectCrop:均匀缩放,必要时裁剪

实现的效果:


④Image.Tile:贴瓷砖

实现的效果


总结

通过使用Image组件的fillMode来实现想要的功能

相关推荐
Dear.爬虫3 分钟前
Golang中逃逸现象, 变量“何时栈?何时堆?”
开发语言·后端·golang
编码浪子43 分钟前
趣味学RUST基础篇(构建一个命令行程序2重构)
开发语言·重构·rust
echoarts1 小时前
MATLAB R2025a安装配置及使用教程(超详细保姆级教程)
开发语言·其他·matlab
阿方.9182 小时前
《数据结构全解析:栈(数组实现)》
java·开发语言·数据结构
Dovis(誓平步青云)2 小时前
《探索C++11:现代语法的内存管理优化“性能指针”(下篇)》
开发语言·jvm·c++
charlie1145141912 小时前
前端三件套简单学习:HTML篇1
开发语言·前端·学习·html
kebeiovo2 小时前
项目必备流程图,类图,E-R图实例速通
开发语言·r语言·流程图
软件开发-NETKF88882 小时前
JSP到Tomcat特详细教程
java·开发语言·tomcat·jsp·项目运行
ftswsfb3 小时前
现代C++:现代C++?
开发语言·c++
乌萨奇也要立志学C++3 小时前
【C++详解】C++ 智能指针:使用场景、实现原理与内存泄漏防治
开发语言·c++