QML开发——键盘响应事件

效果动图

关键注意转移属性值元素的写法

KeyNavigation.tab: play //按下tab键后转到属性值为play的元素上来

源码

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.VirtualKeyboard 2.4

Window {
    id: window
    visible: true
    width: 640
    height: 400
    title: qsTr("Keyboard")
    Rectangle{
        MouseArea{
            id: mouseArea
            anchors.fill: parent
        }
        Row{    //水平布局
            x: 50
            y: 50
            Rectangle{
                id: music
                width: 100
                height: 100
                radius: 6
                color: focus ? "red" : "lightgray"  //没有被选中时显示为灰色;没有被选中时显示灰色
                scale: focus ? 1 : 0.8  //被选中时图标变大;没有被选中时图标正常大小
                focus: true //初始时为选中状态
                KeyNavigation.tab: play //按下tab键后转到属性值为play的元素上来
                Keys.onUpPressed: music.y -= 10  //上移
                Keys.onDownPressed: music.y += 10   //下移
                Keys.onLeftPressed: music.x -= 10   //左移
                Keys.onRightPressed: music.x += 10  //右移
                Text {
                    anchors.centerIn: parent
                    color: parent.focus ? "black" : "gray"  //被选中时文字显示为黑色;没有被选中时显示为灰色
                    font.pointSize: 20
                    text: "音乐"
                }
            }
            Rectangle{
                id: play
                width: 100
                height: 100
                radius: 6
                color: focus ? "green" : "lightgray"  //没有被选中时显示为灰色;没有被选中时显示灰色
                scale: focus ? 1 : 0.8  //被选中时图标变大;没有被选中时图标正常大小
                focus: true //初始时为选中状态
                KeyNavigation.tab: movie //按下tab键后转到属性值为movie的元素上来
                Keys.onUpPressed: play.y -= 10  //上移
                Keys.onDownPressed: play.y += 10   //下移
                Keys.onLeftPressed: play.x -= 10   //左移
                Keys.onRightPressed: play.x += 10  //右移
                Text {
                    anchors.centerIn: parent
                    color: parent.focus ? "black" : "gray"  //被选中时文字显示为黑色;没有被选中时显示为灰色
                    font.pointSize: 20
                    text: "游戏"
                }
            }
            Rectangle{
                id: movie
                width: 100
                height: 100
                radius: 6
                color: focus ? "blue" : "lightgray"  //没有被选中时显示为灰色;没有被选中时显示灰色
                scale: focus ? 1 : 0.8  //被选中时图标变大;没有被选中时图标正常大小
                focus: true //初始时为选中状态
                KeyNavigation.tab: music //按下tab键后转到属性值为movie的元素上来
                Keys.onUpPressed: movie.y -= 10  //上移
                Keys.onDownPressed: movie.y += 10   //下移
                Keys.onLeftPressed: movie.x -= 10   //左移
                Keys.onRightPressed: movie.x += 10  //右移
                Text {
                    anchors.centerIn: parent
                    color: parent.focus ? "black" : "gray"  //被选中时文字显示为黑色;没有被选中时显示为灰色
                    font.pointSize: 20
                    text: "影视"
                }
            }
        }
    }

    InputPanel {
        id: inputPanel
        z: 99
        x: 0
        y: window.height
        width: window.width

        states: State {
            name: "visible"
            when: inputPanel.active
            PropertyChanges {
                target: inputPanel
                y: window.height - inputPanel.height
            }
        }
        transitions: Transition {
            from: ""
            to: "visible"
            reversible: true
            ParallelAnimation {
                NumberAnimation {
                    properties: "y"
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
            }
        }
    }
}

 

来源：CSDN

作者：沉迷单车的追风少年

链接：https://blog.csdn.net/qq_41895747/article/details/104599279