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小程序：按键元素的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！