QML编程：实现一个数字软件盘的功能(一)

最新推荐文章于 2024-09-18 16:53:25 发布
最新推荐文章于 2024-09-18 16:53:25 发布
阅读量1.4k 收藏 3
点赞数 1
文章标签： QML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiezuowangdao/article/details/80444365
版权

　　本文描述如何通过QML编程实现一个满足自己需求的数字软件盘的功能,
功能需求：
　　1.可以查看临时数值设置，
　　2.可以通过滑动slider实现快速设置
　　3.原值记录功能
首先根据功能需求设计小键盘的风格，可分为临时数值显示区和输入区
画面脚本源码如下：

import QtQuick 2.4
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.0
import QtQuick.Controls.Material 2.2

import Custom.Controls 2.0

CategoryPageBackGround {
    id: categoryPageBackGround
    width: 800
    height: 160
    property alias clear: clear
    property alias cancel: cancel
    property alias enter: enter
    property alias customButton5: customButton5
    property alias customButton3: customButton3
    property alias customButton13: customButton13
    property alias customButton12: customButton12
    property alias customButton7: customButton7
    property alias customButton1: customButton1
    property alias customButton9: customButton9
    property alias customButton6: customButton6
    property alias customButton4: customButton4
    property alias customButton2: customButton2
    property alias customButton: customButton
    property alias customButton8: customButton8
    property alias customButton16: customButton16
    property alias customButton15: customButton15
    property alias customerSlider: customerSlider
    property alias customSpinBox: customSpinBox

    RowLayout {
        x: 8
        y: 11
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: 35

        ColumnLayout {

            CustomSpinBox {
                id: customSpinBox
                editable: false
                enabled: false
                value: customerSlider.value
                stepSize: Math.pow(10, -decimals)
                to: customerSlider.to
                from: customerSlider.from
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.preferredHeight: 24
                Layout.preferredWidth: 208
                indicatorsVisible: false
            }

            CustomerSlider {
                id: customerSlider
                from: -20
                orientation: Qt.Horizontal
                stepSize: customSpinBox.stepSize
                focusPolicy: Qt.NoFocus
                to: 100
                value: 0
                handleRadius: 12
                Layout.fillHeight: true
                Layout.fillWidth: true
                Layout.columnSpan: 2
                Layout.preferredHeight: 48
                Layout.preferredWidth: 208
            }
        }

        Rectangle {
            id: rectangle
            color: "#3c3c3c"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.rowSpan: 3
            Layout.preferredHeight: 143
            Layout.preferredWidth: 2
        }

        GridLayout {
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.rowSpan: 3
            rows: 2
            columns: 6

            CustomButton {
                id: customButton8
                focusPolicy: Qt.NoFocus
                text: "1"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton
                focusPolicy: Qt.NoFocus
                text: "2"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton2
                focusPolicy: Qt.NoFocus
                text: "3"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton4
                focusPolicy: Qt.NoFocus
                text: "4"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton6
                focusPolicy: Qt.NoFocus
                text: "5"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: enter
                focusPolicy: Qt.NoFocus
                text: "Enter"
                Layout.fillHeight: true
                Layout.fillWidth: true
                Layout.rowSpan: 2
                Layout.preferredHeight: 97
                Layout.preferredWidth: 64
            }

            CustomButton {
                id: customButton9
                focusPolicy: Qt.NoFocus
                text: "6"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton1
                focusPolicy: Qt.NoFocus
                text: "7"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton3
                focusPolicy: Qt.NoFocus
                text: "8"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton5
                focusPolicy: Qt.NoFocus
                text: "9"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton7
                focusPolicy: Qt.NoFocus
                text: "0"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton12
                focusPolicy: Qt.NoFocus
                text: "."
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton13
                focusPolicy: Qt.NoFocus
                text: "-"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: clear
                focusPolicy: Qt.NoFocus
                text: "C"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: cancel
                focusPolicy: Qt.NoFocus
                text: "Cancel"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton15
                focusPolicy: Qt.NoFocus
                text: "<<"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }
            CustomButton {
                id: customButton16
                focusPolicy: Qt.NoFocus
                text: ">>"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }
        }
    }
}

设计效果如下：
这里写图片描述

逻辑代码的实现如下：

import QtQuick 2.4
import Custom.Controls 2.0
InputFlowForm {
    property string inputText;
    property bool dot: false;
    property string lastText;
    enter.onClicked: {
        //enter
        if(inputText!=""){
            lastText=inputText;
            inputText="";
            dot=false;
        }
        var obj=CustomSinglentonControls.manager["CurrentObject"];
        obj.value=customSpinBox.value
    }
    cancel.onClicked: {
        //cancel
        inputText="";
        dot=false;
        customSpinBox.value=Number.fromLocaleString(customButton5.locale,lastText);
    }
    customButton5.onClicked: {
        //Number 9
        inputText+=customButton5.text;
        customSpinBox.value=Number.fromLocaleString(customButton5.locale,inputText);
    }
    customButton3.onClicked: {
        //Number 8
        inputText+=customButton3.text;
        customSpinBox.value=Number.fromLocaleString(customButton3.locale,inputText);
    }
    clear.onClicked: {
        //clear
        inputText="";
        dot=false;
        customSpinBox.value=Number.fromLocaleString(clear.locale,inputText);
    }

    customButton13.onClicked: {
        // -
        if(inputText===""){
            console.log("value: ",customSpinBox.value);
            inputText="-0";
            customSpinBox.value=Number.fromLocaleString(customButton13.locale,inputText);
        }
    }
    customButton12.onClicked: {
        // .
        if(dot===false){
            inputText+=customButton12.text;
            dot=true;
        }
    }
    customButton7.onClicked: {
        //Number 0
        inputText+=customButton7.text;
        customSpinBox.value=Number.fromLocaleString(customButton7.locale,inputText);
    }
    customButton1.onClicked: {
        //Number 7
        inputText+=customButton1.text;
        customSpinBox.value=Number.fromLocaleString(customButton1.locale,inputText);
    }
    customButton9.onClicked: {
        //Number 6
        inputText+=customButton9.text;
        customSpinBox.value=Number.fromLocaleString(customButton9.locale,inputText);
    }
    customButton6.onClicked: {
        //Number 5
        inputText+=customButton6.text;
        customSpinBox.value=Number.fromLocaleString(customButton6.locale,inputText);
    }
    customButton4.onClicked: {
        //Number 4
        inputText+=customButton4.text;
        customSpinBox.value=Number.fromLocaleString(customButton4.locale,inputText);
    }
    customButton2.onClicked: {
        //Number 3
        inputText+=customButton2.text;
        customSpinBox.value=Number.fromLocaleString(customButton2.locale,inputText);
    }
    customButton.onClicked: {
        //Number 2
        inputText+=customButton.text;
        customSpinBox.value=Number.fromLocaleString(customButton.locale,inputText);
    }
    customButton8.onClicked: {
        //Number 1
        inputText+=customButton8.text;
        customSpinBox.value=Number.fromLocaleString(customButton8.locale,inputText);
    }

    customButton16.onClicked: {
       // >>
       customerSlider.increase();
       inputText=Number(customerSlider.value).toLocaleString(locale,'f',customSpinBox.decimals)
    }
    customButton15.onClicked: {
        // <<
        customerSlider.decrease();
        inputText=Number(customerSlider.value).toLocaleString(locale,'f',customSpinBox.decimals)
    }
    customerSlider.onValueChanged: {
        if(customerSlider.value!=customSpinBox.value){
            customSpinBox.value=customerSlider.value;
        }
    }
    customSpinBox.onValueChanged: {
        if(customerSlider.value!=customSpinBox.value){
            customerSlider.value=customSpinBox.value;
        }
    }
}

最终的显示效果如下：
这里写图片描述

王彧泽
关注
【QML】实现一个炫酷小键盘
ShrekLi
04-17 1486
个人声明：    由于之前发现有人将博客转载到私人博客上，并没有标记博文转载出处，所以在此将个人声明放置在最文章的最开头，希望转载的博主能够通知我一生，尊重一下别人的成果。以下内容，纯属个人观点，不喜勿喷。未经本人同意，不得私自转载。博客中出现的代码仅供学习参考，不得有其他用途。若文中存在纰漏，或读者有更好的建议，欢迎留言探讨。也可邮箱联系：yxyx_0212@163.com    前段时间，在知乎上看到了一篇关于Qt实现小键盘的博文，觉得挺有趣的，便照着玩了一下，其效果如图1所示。 图1 小键盘效果
qml 虚拟键盘
cyerogy的专栏
11-02 732
数字键盘 普通键盘 样式代码 VirtualKeyboard.qml import QtQuick 2.11 import "../keyboard/ops.js" as KeyboardConfig Rectangle { id: vk z:200 color: "#E7E8EC" property string keyboardMode: "number"// number,normal property int keyboardButtonWid..
Qt 数字虚拟键盘实现
03-27
Qt 数字虚拟键盘实现
QML编写的虚拟键盘
07-21
跟早期的版本类似，但是添加了很多功能，添加了大小写切换，清空，定位插入删除，可以选择删除
【QML 基础】QML ——描述性脚本语言，用于用户界面的编写
最新发布
Hou_lang_LJ的博客
09-18 548
🐧① QML 的基础知识；🖊
QML构件-数字键盘 代码工程
06-14
QML构件——数字键盘 文字链接 http://t.csdnimg.cn/Vy0KI
QML构件——数字键盘
everglow__的博客
06-14 464
在移动端，特别是触屏机器上，需要使用到数字键盘来进行输入，一种方法是可以引入qt自带的键盘模块，但是效果并不是特别理想（主要是界面的控制）。——————————————————————————————————华丽的分割线。自己使用qml简单写了一个使用起来也还比较方便。如图对外接口就是内部的show接口，传入的参数是inputText控件。核心代码都已展示，后续再上传完整工程代码，需要的朋友可自行下载。对内接口都在下方，都留了注释。下面就是构件的详细设计步骤。
QML自制数字软键盘，向TextInput或者TextField键入数字，并可实现左移右移以及删除等操作
yaletracy的博客
02-28 2831
先用QML布局好数字键盘以及TextInput。 在实现键入的过程中主要使用了TextInput类型的cursorPosition属性以及两个方法：void insert(int position, string text)和 void remove(int start, int end)。cursorPosition含义是光标位于TextInput中第几个数字之后闪烁，两个方法含义很明确。...
自己写的一个qml数字键盘
木牛的博客
05-03 602
main.qml import QtQuick 2.10 import QtQuick.Window 2.10 import QtQuick.Controls 2.3 //import QtQuick.VirtualKeyboard 2.3 Window { id: window visible: true width: 640 height: 480 title: qsTr("Hello World") property int indexSelec
qml 自定义数字键盘_自定义虚拟数字键盘可在移动浏览器中使用
cuk5239的博客
07-22 1047
qml 自定义数字键盘 数字键盘 (Numeric Keyboard) A custom virtual numeric keyboard works in mobile browsers. It contains a virtual input box which would invoke the numeric keyboard instead of system keyboard, the ...
qml 软键盘 虚拟键盘
04-27
qml程序在C++代码里面调用setAutoSipEnabled 不起作用 C++屏蔽focus事件 qml里实现了光标绘制
Qt制作数字软件盘
03-07
使用qt4开发的数字软键盘，有数字，正负号，返回，确认，删除，小数点的功能。具体的开发文档，请看我的博客Qt实战开发-数字然键盘。
基于QML的虚拟键盘
09-02
基于QML的虚拟键盘，很辛苦才找到，奉献给大家。
QML虚拟键盘
03-16
QT5.5.1做的，未带键盘背景图片，需要自己找，userEdit和psEdit是我这边的TextInput输入部件定义的id，如有错误或者建议欢迎指正，感谢
qt虚拟键盘（26键和数字键）
07-08
用qt5写的虚拟键盘，具有数字键盘和全键盘两个尺寸，全键盘是26键，数字键盘是9键。按切换键可以切换键盘。
MetroSwift:基于 QT 的数字仪表盘
07-04
【标题】"MetroSwift:基于QT的数字仪表盘"是一个使用C++编程语言，并借助Qt框架开发的项目。Qt是一个跨平台的应用程序开发框架，它允许开发者创建具有丰富图形用户界面（GUI）的应用程序，包括各种类型的仪表盘、...
使用QT5.14制作的仪表盘小工具
01-30
本项目是基于QT5.14的一个实例，它展示了一个功能丰富的仪表盘小工具，可以作为开发自己的GUI应用时的参考。 在QT中，我们通常使用QWidgets或者QML来构建用户界面。在这个仪表盘小工具中，开发者可能使用了QPainter...
Qt写的在ARM板上运行的数字建盘
03-16
在本项目中，"Qt写的在ARM板上运行的数字建盘"意味着开发者使用Qt框架创建了一个数字输入控件，这个控件可以在基于ARM架构的硬件平台上运行。 **ARM架构** ARM（Advanced RISC Machines）是一种广泛使用的微处理器...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值