Qt官方教程翻译——Use Case - Responding To User Input in QML

附网址:http://qt-project.org/doc/qt-5/qtquick-usecase-userinput.html

Supported Types of User Input—— 用户输入的支持类型

Qt Quick模块提供了支持常用用户输入的支持类型(types),包括鼠标和触摸事件,文本输入和按键按下事件。其他模块也分别提供了针对其他用户输入的响应类型(例如,Qt Sensors模块提供了对“摇一摇”的支持)。

这篇文档介绍了如何处理基本的用户输入;要了解更多关于运动手势(motion-gesture)的支持,请参考Qt Sensors文档。要了解更多关于音视频输入,请参考Qt Multimedia文档。

Mouse and Touch Events —— 鼠标和触摸事件

MouseArea类型使得鼠标和触摸事件在QML应用程序中能够被处理。MouseArea可以被包含在一个Image或Rectangle以及一个Text对象来实现一个简单的按钮。

import QtQuick 2.0

Item {
    id: root

    width: 320
    height: 480

    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }

    Rectangle {
        id: rectangle
        x: 40
        y: 20
        width: 120
        height: 120
        color: "red"

        MouseArea {
            anchors.fill: parent
            onClicked: rectangle.width += 10
        }
    }
}

·

要进一步了解复杂手势的用例,请参考MultiPointTouchArea类型及PinchArea类型。

注意有些类型用来对它们内置的一些输入进行处理。例如,Flickable默认对鼠标拖动、滚轮滚动、触摸拖动和滑动做出响应。

Keyboard and Button Events —— 键盘和按钮事件

来自键盘或者鼠标的按键被按下,都可以被Keys附加属性进行处理。所有Item的派生类都含有这个附加属性,我们需要设置Item::focus属性来决定该类型是否接受按键事件。举一个简单的按键处理的栗子,你可以在一个单独的Item中设置它的焦点为true,然后做所有你按键后想要做的事情。

import QtQuick 2.0

Item {
    id: root

    width: 320
    height: 480

    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }

    Rectangle {
        id: rectangle
        x: 40
        y: 20
        width: 120
        height: 120
        color: "red"

        focus: true
        Keys.onUpPressed: rectangle.y -= 10
        Keys.onDownPressed: rectangle.y += 10
        Keys.onLeftPressed: rectangle.x += 10  // 原文中就是左键向右跑,不是我写错了噢。译者注
        Keys.onRightPressed: rectangle.x -= 10
    }
}

·

对于文本输入Qt Quick提供了好几种内置类型。特别的是,TextInput和TextEdit类型分别允许单行输入和多行编辑。

这里是使一个TextInput工作的代码:

import QtQuick 2.0

TextInput {
    focus: true
    text: "Initial Text"
}

Qt官方教程翻译——Use Case - Responding To User Input in QML,布布扣,bubuko.com

时间: 2024-08-08 15:19:11

Qt官方教程翻译——Use Case - Responding To User Input in QML的相关文章

Qt官方教程翻译——Use Case - Visual Elements In QML

附网址:http://qt-project.org/doc/qt-5/qtquick-usecase-visual.html Use Case - Visual Elements In QML -- 用例 - QML中的可视化元素 The Rectangle Type -- 矩形 对于最基本的视觉元素,Qt Quick提供了Rectangle类型来绘制矩形.这些矩形可以使用纯色或渐变色来填充.Rectangle类型也可以绘制矩形的边界(borders). 要绘制矩形无法绘制的自定义形状,可以参考

Qt官方教程翻译——QML Applications

附网址:http://qt-project.org/doc/qt-5/qmlapplications.html QML Applications QML是一种声明式语言,它提供了一组接口用来描述视觉组件以及他们的互动和相关性.它是一个高度可读的语言,并且被设计成使组件以一个动态的方式相互连接.同时它使组件很容易被复用以及创建定制的用户界面.使用QtQuick模块,设计者和开发者可以很容易使用QML建立流体动画的用户界面,并将这些界面连接到后端的C++库上面. What is QML? QML是一

Qt官方教程翻译——Qt QML

Pull 解析器简介 Pull 解析器的运行方式与 SAX 解析器相似.它提供了类似的事件,如: 开始元素和结束元素事件,使用xmlPullParser.next() 可以进入下一个元素并触发相应事件.跟 SAX 不同的 是, Pull 解析器产生的事件是一个数字,而非方法,因此可以使用一个 switch 对事件进行处理.当元素开始解析时,调用 parser.nextText() 方法可以获取下一个 Text 类型节点的值. Pull解析器的源码及文档下载网址:http://www.xmlpul

QML官方教程翻译——Use Case - Integrating JavaScript in QML

附网址:http://qt-project.org/doc/qt-5/qtquick-usecase-integratingjs.html Use Case - Integrating JavaScript in QML -- 在QML中集成JavaScript代码 JavaScript代码可以很容易被集成到QML中以提供UI逻辑,必要的控制,或是其他益处. Using JavaScript Expressions for Property Values -- 使用JavaScript表达式表示

Qt官方教程翻译——First Steps with QML

附网址:http://qt-project.org/doc/qt-5/qmlfirststeps.html Creating a QML Document 一个QML文件定义了对象的层次结构:具有高度可读的,结构化的布局.每个QML文件由两部分组成:一个引入(import)部分,以及一个对象声明(declaration)部分.用户界面中最常用的的类型(types)和功能由引入QtQuick提供. Importing and Using the QtQuick Module 为了使用Qt Quic

Qt官方教程翻译——Glossary Of QML Terms

附网址:http://qt-project.org/doc/qt-5/qml-glossary.html Glossary Of QML Terms -- QML各术语词汇表 Common Terms -- 通用术语 术语 定义 QML 编写QML应用程序所使用的语言,由Qt QML组件实现语言架构和引擎. Qt Quick QML语言的标准类型与功能库,由Qt Quick组件提供,并通过"importQtQuick 2.0"来使用. Type 在QML中,一个type有可能是一种Ba

Qt官方教程翻译——QML Coding Conventions

附网址:http://qt-project.org/doc/qt-5/qml-codingconventions.html QML Coding Conventions 这个文档包含了QML的编码规范,我们将这个规范应用在全部文档和例程当中并推荐大家遵守. QML Object Declarations 在我们的文档和例子中,QML object attributes总是像下面这样的结构: id property declarations signal declarations JavaScri

Qt官方教程翻译——Using Qt Quick Designer

附网址:http://qt-project.org/doc/qtcreator-3.1/creator-using-qt-quick-designer.html Using Qt Quick Designer 你可以在Qt Quick Designer可视化编辑器或者代码编辑器中编辑.qml文件. 在工程中双击一个.qml文件可以在代码编辑器中打开它,然后选择设计模式在可视化编辑器中打开它. 使用可视化编辑窗格来管理你的工程: 导航面板(1):以树结构形式显示当前QML文件中的各个项目. 库面板

Qt官方教程翻译——Qt Quick

附网址:http://qt-project.org/doc/qt-5/qtquick-index.html Qt Quick Qt Quick组件是编写QML应用程序的标准库.Qt QML组件提供了QML的引擎和语言基础,Qt Quick组件则提供了QML创建用户图形界面的所有基本类型.它提供了一个可视化的画布,以及创造可视化组件.接收用户输入.创造数据模型和视图.延迟实例化对象等多种类型(types). Qt Quick组件还提供了一个QML API为QML语言创建用户界面提供QML类型,以及