QML事件处理--按键处理

Qt 帮助:Keyboard Focus in QML

QML项目获取焦点的属性:focus: true

QML项目在Qt传统的键盘焦点模型上天剑了基于作用域的扩展。

1. 按键处理概述

用户按下或释放一个按键,处理步骤:

1) Qt获取键盘动作并产生一个键盘事件

2)  如果包含QDeclaretiveView的Qt不见具有焦点,那么键盘事件会传递给它,否则将进行常规的按键处理

3)  场景将键盘事件交付给具体活动焦点的QML项目。如果没有项目具有活动焦点,键盘事件会被忽略,然后按常规的按键处理

4) 如果具有活动焦点的QML项目接收了该键盘事件,那么传播将停止

Text {
            text: activeFocus ? "I have active focus!" : "I do not have active focus!"
        }

5) 如果到达了根项目,该事件会被忽略而继续常规的Qt按键处理

所有基于Item的可见元素都可以通过Keys附加属性来进行按键处理,Keys附加属性提供了基本的处理器。

import QtQuick 2.4

Rectangle {
    width: 100
    height: 100
    focus: true

    Keys.onPressed: {
        if(event.key == Qt.Key_A)<span style="white-space:pre">	</span>//event.key捕获按下的按键,另外还有accept、isAutoRepeat、modifiers和text
            console.log("Key A was pressed")
        event.accpted = true<span style="white-space:pre">	</span>//防止事件向上层传播
    }
}
Qt帮助:Keys

KeyNavigation元素--附件属性,可以用来实现用方向键或者Tab键来进行项目的导航

属性:backtab、down、left、priority、right、tab、up等

import QtQuick 2.4

Grid {
    width: 100; height:200
    columns: 2

    Rectangle{
        id: topLeft
        width: 50; height: 50
        color: focus ? "red" : "lightgray"
        focus: true
        KeyNavigation.right: topRight
        KeyNavigation.down: bottomLeft
    }
    Rectangle{
        id: topRight
        width: 50; height: 50
        color: focus ? "red" : "lightgray"
        focus: true
        KeyNavigation.left: topLeft
        KeyNavigation.down: bottomRight
    }
    Rectangle{
        id: bottomLeft
        width: 50; height: 50
        color: focus ? "red" : "lightgray"
        focus: true
        KeyNavigation.right: bottomRight
        KeyNavigation.up: topLeft
    }
    Rectangle{
        id: bottomRight
        width: 50; height: 50
        color: focus ? "red" : "lightgray"
        focus: true
        KeyNavigation.left: bottomLeft
        KeyNavigation.up: topRight
    }
}
2. 查询活动焦点项目

Item::activeFocus属性:插口一个项目是否具有焦点

Text {
            text: activeFocus ? "I have active focus!" : "I do not have active focus!"
}
3. 获取焦点和焦点作用域

项目设置 focus: true  获取焦点

import QtQuick 2.4

Rectangle{
    id: widget
    width: 500; height: 500
    radius: 10; smooth: true
    color: "lightsteelblue"
    Text {id: label; anchors.centerIn: parent}
    focus: true
    Keys.onPressed: {
        if(event.key == Qt.Key_A)
            label.text = "Key A was pressed"
        if(event.key == Qt.Key_B)
            label.text = "Key B was pressed"
        if(event.key == Qt.Key_C)
            label.text = "Key C was pressed"
    }
}
注意:当上面代码作为一个可重用或者可被导入的组件时,简单的使用focus属性无效。
可以用QML焦点作用域(focus scope)解决,通过FocusScope元素创建。

MyWidget.qml

import QtQuick 2.0

FocusScope {
    //FocusScope需要绑定到子项目的可视属性上
    property alias color: rectangle.color
    x:rectangle.x; y:rectangle.y
    width: rectangle.width; height: rectangle.height

    Rectangle{
        id: rectangle
        anchors.centerIn: parent
        color: "lightsteelblue"; width: 175; height:25; radius: 10; smooth:true
        Text {id: label; anchors.centerIn: parent}
        focus: true
        Keys.onPressed: {
            if(event.key == Qt.Key_A)
                label.text = "Key A was pressed"
            if(event.key == Qt.Key_B)
                label.text = "Key B was pressed"
            if(event.key == Qt.Key_C)
                label.text = "Key C was pressed"
        }
    }
}
重用Mywiget

import QtQuick 2.4

Rectangle{
    id: widget
    width: 240; height: 150
    color:"white";

    Column {
        anchors.centerIn: parent; spacing: 15
        MyWidget {
            focus: true
            color: "lightblue"
        }
        MyWidget {
            color: "palegreen"
        }
    }
}
注意:FocusScope元素不是可视化元素,需要将它的子项目的属性暴露给它的父项目。布局和定位元素可以使用这些可见和样式属性来创建布局。此例没有将Rectangle的属性直接绑定到FocusScope上,那么Column元素就无法正确地显示两个部件。







  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值