微信公众号开发

QML小程序:按键元素

本文主要是介绍QML小程序:按键元素,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

按键盘上,下,左,右键,移动矩形框
按键盘+,-键,缩放矩形框
演示如下:
在这里插入图片描述
main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

//按键盘上,下,左,右键,移动矩形框
//按键盘+,-键,缩放矩形框

//窗口
Window {
    visible: true   //窗口可见
    width: 640  //窗口宽度
    height: 480 //窗口高度
    title: qsTr("Key")  //窗口标题

    //深色背景区域
    DarkRectangle {

        //绿色矩形框
        GreenRectangle {
            id: greenRect   //绿色矩形框id
            x:8; y:8    //绿色矩形框位置
        }
        focus: true //绿色矩形框焦点
        Keys.onLeftPressed: greenRect.x -= 8    //按左键,左移8个像素
        Keys.onRightPressed: greenRect.x += 8   //按右键,右移8个像素
        Keys.onUpPressed: greenRect.y -= 8  //按上键,上移8个像素
        Keys.onDownPressed: greenRect.y += 8    //按下键,下移8个像素
        Keys.onPressed: {
            switch(event.key){
            case Qt.Key_Plus:   //按+键,放大8个像素
                greenRect.scale += 0.2
                break;
            case Qt.Key_Minus:  //按-键,缩小8个像素
                greenRect.scale -= 0.2
                break;
            }
        }
    }
}

DarkRectangle.qml

import QtQuick 2.0

//组件,黑色矩形

//矩形框元素
Rectangle {
    width: 280   //矩形框宽度
    height: 240  //矩形框高度
    color: "black"    //矩形框颜色
    border.color: Qt.lighter(color) //矩形框边框颜色
}

GreenRectangle.qml

import QtQuick 2.0

//组件,绿色矩形框

//矩形框元素
Rectangle {
    width: 58   //矩形框宽度
    height: 38  //矩形框高度
    color: "green"  //矩形框颜色
    property alias text: label.text //文本别名,导出到外部使用

    //文本
    Text {
        id: label   //文本id
        anchors.centerIn: parent    //文本居中
        text: ""    //文本内容
    }
}
这篇关于QML小程序:按键元素的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!