网页安全站点设置,网站做cdn服务流量,临夏州建设网站,工信部会抽查网站么QT应用篇 一、QT上位机串口编程 二、QML用Image组件实现Progress Bar 的效果 三、QML自定义显示SpinBox的加减按键图片及显示值效果 文章目录 QT应用篇前言一、qml需求二、使用组件1.Image组件2.Image中fillMode的使用例子 总结 前言
记录自己学习QML的一些小技巧方便日后查找…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来实现想要的功能
