本文主要是介绍QT应用篇 二、QML用Image组件实现Progress Bar 的效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
QT应用篇
一、QT上位机串口编程
二、QML用Image组件实现Progress Bar 的效果
三、QML自定义显示SpinBox的加减按键图片及显示值效果
文章目录
- QT应用篇
- 前言
- 一、qml需求
- 二、使用组件
- 1.Image组件
- 2.Image中fillMode的使用
- 例子
- 总结
前言
记录自己学习QML的一些小技巧方便日后查找
QT的 qml 使用图片来达到类似进度条Progress Bar 的效果
一、qml需求
需要实现显示某一数据值类似数据中的条形图的增减效果
二、使用组件
1.Image组件
代码如下：
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Shapes 1.12
import QtMultimedia 5.12
...
...
...
//数据为0时的图片
Image {x:0 y:0height: 60width: 144 //g_outflow_pressureclip: truehorizontalAlignment : Image.AlignLeftfillMode: Image.Tilesource: resourcesPath + "suction_empty.png"}
//数据不为零时显示的图片
Image {x:0y:0height: 60width: 16 * Math.round(spinBox.value * 9 / outFlowSpinBox.value ) //spinBox.value 为实际负压值 outFlowSpinBox.value 为设置负压clip: truehorizontalAlignment : Image.AlignLeftfillMode: Image.Tilesource: resourcesPath + "suction_full.png"}
//两张图片进行叠加
2.Image中fillMode的使用
代码如下 ：
Image.Stretch：图片拉伸自适应；（默认的）
Image.PreserveAspectFit：按比例缩放，不裁剪
Image.PreserveAspectCrop：均匀缩放，必要时裁剪
Image.Tile：像贴瓷砖一样
Image.TileVertically：水平拉伸，垂直平铺
Image.TileHorizontally：垂直拉伸，水平平铺
Image.Pad：原始图像不做处理
原始代码
Image {x:0y:0height: 60width: 16 * Math.round(spinBox.value * 9 / outFlowSpinBox.value ) clip: truehorizontalAlignment : Image.AlignLeftfillMode: 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来实现想要的功能
这篇关于QT应用篇 二、QML用Image组件实现Progress Bar 的效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
