百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术流 > 正文

Qt编程进阶(48):QML键盘事件处理(qt中键盘事件的处理方法)

citgpt 2024-07-12 09:51 13 浏览 0 评论

在Qt编程时需要对事件进行处理,如对鼠标事件、键盘事件等的处理。在QML编程中同样需要对鼠标、键盘等事件进行处理。

当一个按键被按下或释放时,会产生一个键盘事件,并将其传递给获得了焦点的QML元素。在QML中,Keys属性提供了基本的键盘事件处理器,所有可视元素都可以通过它来进行按键处理。

Qt编程进阶(48):QML键盘事件处理(qt中键盘事件的处理方法)

本文实例利用键盘事件处理制作一个模拟桌面应用图标选择程序,运行效果如下图所示,按Tab键切换选项,当前选中的图标以彩色放大显示,还可以用←、↑、↓、→方向键移动图标位置。

具体实现步骤如下。

(1) 新建项目

新建QML应用程序,选择项目“Qt Quick Application - Empty”模板,项目名称为“Keyboard”。

(2) 主程序

打开“main.qml”文件,编写代码如下:

import QtQuick 2.12
import QtQuick.Window 2.12
Window {
  width: 450
  height: 240
  visible: true
  title: qsTr("Keyboard")
  Rectangle {
    width: 360
    height:360
    anchors.fill: parent
    Row {//所有图标成一行横向排列
      x : 50; y : 50
      spacing:30
      Rectangle { //第一个矩形元素(“音乐”图标)
        id: music
        width: 100; height: 100
        radius: 6
        color: focus ? "red": "lightgray" //被选中(获得焦点)时显示红色,否则变灰
        scale: focus ? 1 : 0.8 //被选中(获得焦点)时图标变大
        focus: true //初始时选中“音乐”图标
        KeyNavigation.tab: play // (a)
        /*移动图标位置*/ // (b)
        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
        KeyNavigation.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
        KeyNavigation.tab: music//焦点转移到“音乐”图标
        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:"影视"
        }
      }
    }
  }
}

其中,

  • (a) KeyNavigation.tab: play: QML中的KeyNavigation元素是一个附加属性,可以用来实现使用方向键或Tab键来进行元素的导航。它的子属性有backtab、down、left、priority、right、tab和up等,本例用其tab属性设置焦点转移次序,“KeyNavigation.tab: play”表示按下Tab键焦点转移到id为“play”的元素(“游戏”图标)。
  • (b) /*移动图标位置*/:这里使用Keys属性来进行按下方向键后的事件处理,它也是一个附加属性,对QML所有的基本可视元素均有效。Keys属性一般与focus属性配合使用,只有当focus值为true时,它才起作用,由Keys属性获取相应键盘事件的类型,进而决定所要执行的操作。本例中的Keys.onUpPressed表示方向键↑被按下的事件,相应地执行该元素y坐标-10 (上移)操作,其余方向的操作与之类同。

————————————————

觉得有用的话请关注点赞,谢谢您的支持!

对于本系列文章相关示例完整代码有需要的朋友,可关注并在评论区留言!

相关推荐

Linux系统中的sudo命令、APT软件包管理器以及Java开发工具包JDK

sudo命令详解:sudo命令允许用户以root权限执行命令,类似于Windows系统中的“以管理员身份运行”。这在需要系统级权限操作时非常有用。更多信息请参考:https://do...

js中arguments详解

一、简介了解arguments这个对象之前先来认识一下javascript的一些功能:其实Javascript并没有重载函数的功能,但是Arguments对象能够模拟重载。Javascrip中每个函数...

firewall-cmd 常用命令

目录firewalldzone说明firewallzone内容说明firewall-cmd常用参数firewall-cmd常用命令常用命令 回到顶部firewalldzone...

epel-release 是什么

EPEL-release(ExtraPackagesforEnterpriseLinux)是一个软件仓库,它为企业级Linux发行版(如CentOS、RHEL等)提供额外的软件包。以下是关于E...

FullGC详解  什么是 JVM 的 GC
FullGC详解 什么是 JVM 的 GC

前言:背景:一、什么是JVM的GC?JVM(JavaVirtualMachine)。JVM是Java程序的虚拟机,是一种实现Java语言的解释器。 它提供了一种独立于操作系统的运行环境,使得Java程序在任...

2024-10-26 08:50 citgpt

使用Spire.Doc组件利用模板导出Word文档
  • 使用Spire.Doc组件利用模板导出Word文档
  • 使用Spire.Doc组件利用模板导出Word文档
  • 使用Spire.Doc组件利用模板导出Word文档
  • 使用Spire.Doc组件利用模板导出Word文档
跨域(CrossOrigin)

1.介绍  1)跨域问题:跨域问题是在网络中,当一个网络的运行脚本(通常时JavaScript)试图访问另一个网络的资源时,如果这两个网络的端口、协议和域名不一致时就会出现跨域问题。    通俗讲...

微服务架构和分布式架构的区别

1、含义不同微服务架构:微服务架构风格是一种将一个单一应用程序开发为一组小型服务的方法,每个服务运行在自己的进程中,服务间通信采用轻量级通信机制(通常用HTTP资源API)。这些服务围绕业务能力构建并...

深入理解与应用CSS clip-path 属性
深入理解与应用CSS clip-path 属性

clip-pathclip-path是什么clip-path 是一个CSS属性,允许开发者创建一个剪切区域,从而决定元素的哪些部分可见,哪些部分会被隐藏。通过定义这个剪切路径(clippingpath),您可以创造出非矩形的裁剪...

2024-10-25 11:51 citgpt

HCNP Routing&Switching之OSPF LSA类型(二)
  • HCNP Routing&Switching之OSPF LSA类型(二)
  • HCNP Routing&Switching之OSPF LSA类型(二)
  • HCNP Routing&Switching之OSPF LSA类型(二)
  • HCNP Routing&Switching之OSPF LSA类型(二)
Redis和Memcached的区别详解
Redis和Memcached的区别详解

Redis的作者SalvatoreSanfilippo曾经对这两种基于内存的数据存储系统进行过比较:1.Redis支持服务器端的数据操作:Redis相比Memcached来说,拥有更多的数据结构和并支持更丰...

2024-10-25 11:51 citgpt

Request.ServerVariables 大全

Request.ServerVariables("Url")返回服务器地址Request.ServerVariables("Path_Info")客户端提供的路...

python操作Kafka

目录一、python操作kafka1.python使用kafka生产者2.python使用kafka消费者3.使用docker中的kafka二、python操作kafka细...

Runtime.getRuntime().exec详解

Runtime.getRuntime().exec详解概述Runtime.getRuntime().exec用于调用外部可执行程序或系统命令,并重定向外部程序的标准输入、标准输出和标准错误到缓冲池。...

promise.all详解 promise.all是干什么的
promise.all详解 promise.all是干什么的

promise.all详解promise.all中所有的请求成功了,走.then(),在.then()中能得到一个数组,数组中是每个请求resolve抛出的结果。promise.all中只要有一个失败了,走.catch(),在.catch(...

2024-10-24 16:21 citgpt

取消回复欢迎 发表评论: