QT应用篇 三、QML自定义显示SpinBox的加减按键图片及显示值效果

2023-12-28 12:56:08

QT应用篇

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



前言

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

QT的 qml 使用SpinBox来自定义图片来达到花里胡哨的效果


一、qml需求

上位机需要用到SpinBox并需要一些特别的效果及位置的调整

例如:

在这里插入图片描述

二、使用组件

1.SpinBox组件

原始代码如下:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Shapes 1.12
import QtMultimedia 5.12
...
...
...
         SpinBox {
            id: spinBox
            x: -164
            y: 393
            from: 0
            to:outFlowSpinBox.value
            stepSize: 2

           
        }

原始代码效果:
在这里插入图片描述

2.SpinBox中QML的使用

SpinBox允许用户通过单击向上或向下指示按钮,或通过按键盘上的向上或向下来选择一个整数值。另外,SpinBox也可以是可编辑的,这样用户就可以在输入字段中输入文本值。默认情况下,SpinBox提供[0-99]范围内的整数值,步数stepSize为1。

属性:

down.pressed : bool,只读属性,返回true,表示向下指示按钮被点击了.
down.indicator : Item,向下指示按钮指标器,可以重写它自定义样式
down.hovered : bool,只读属性,返回true,表示鼠标徘徊在向下指示按钮的上方
editable : bool,输入字段是否可以编辑,默认为false
from : int,此属性保存范围的起始值。默认值为0。
inputMethodHints : flags,用来提示QML键盘应该输入的类型的值
stepSize : int,步长
textFromValue : 由整数值切换为显示文本时的函数,函数可以有一个或两个参数,第一个参数是要转换的值,第二个可选参数是用于转换的区域设置,可以重写它,让我们显示自定义数值文本
to : int,此属性保存范围的结束值。默认值为99。
up.pressed : bool,只读属性,返回true,表示向上指示按钮被点击了.
up.indicator : Item,向上指示按钮指标器,可以重写它自定义样式
up.hovered : bool,只读属性,返回true,表示鼠标徘徊在向上指示按钮的上方
validator : Validator,输入字段编辑的验证器,必须editable为true,并且SpinBox默认是用IntValidator来接受整数的输入,我们也可以改为DoubleValidator,这样就可以写浮点数了
value : int,当前值,默认值为0。
valueFromText : function,由当前显示的内容切换为整数值的函数,函数可以有一个或两个参数,第一个参数是要转换的text,第二个可选参数是用于转换的区域设置,可以重写它,来获取显示的自定义文本对应的数值


代码示例:(仅显示组件关键代码)

Rectangle {
                x: 101
                y: 85
                width: 86
                height: 109
                color: "#00e7eff4"
                radius: 4

                TextBase {
                    x: -90
                    y: -91
                    color: "#1e2a64"
                    text: {
                        if (SpinBox1.value < 10 )
                        {
                            return qsTr("0") + SpinBox1.value
                        }
                        else
                        {
                            return SpinBox1.value
                        }

                    }
                    font.bold: true
                    anchors.fill: parent
                    font.pixelSize: 75
                }
            }
			SpinBox {
                id: SpinBox1
                x: -11
                y: 6
                down.indicator: Rectangle {
                    x: 39
                    y: 125
                    width: 50
                    height: 43
                    color: "#00000000"
                    Image {
                        x: 0
                        y: 0
                        width: 35
                        height: 43
                        source: {
                            if (SpinBox1.down.pressed == true)
                            {
                                return resourcesPath + "minus_pressed.png"
                            }
                            else
                            {
                                return resourcesPath + "minus.png"
                            }

                        }
                    }
                }
                up.indicator: Rectangle {
                    x: 213
                    y: 125
                    width: 50
                    height: 43
                    color: "#00000000"
                    Image {
                        x: 0
                        y: 0
                        width: 35
                        height: 43
                        source: {
                            if (SpinBox1.up.pressed == true)
                            {
                                return resourcesPath + "plus_pressed.png"
                            }
                            else
                            {
                                return resourcesPath + "plus.png"
                            }

                        }
                    }
                }
                enabled:  true
                   
                }
                to: 10
                anchors.fill: parent
                editable: true
                from: 1
                background: Rectangle {
                    color: "#0007263a"
                    anchors.fill: parent
                }
                stepSize: 1
                contentItem: TextBase {
                    x: 0
                    y: 0
                    visible: false
                    anchors.fill: parent
                }
                value: 5
            }

实际效果:
在这里插入图片描述

总结

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

文章来源:https://blog.csdn.net/qq_41930631/article/details/135262779
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。