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 Quick组件,一个QML文件需要引入QtQuick。引入语法类似如下:

import QtQuick 2.0

现在Qt Quick提供的类型和功能可以被用在这个QML文件里了~

Defining an Object Hierarchy —— 定义一个对象的层次结构

QML文件中的对象声明定义了对象在视景中的显示样式。Qt Quick提供了用于构建所有用户界面的基本构建块,例如显示图像或者文本、或是处理用户输入的对象等。

一个简单对象声明可以是一个中心带有文本的彩色的矩形框:

Rectangle {
    width: 200
    height: 100
    color: "red"  

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }
}

这里定义了一个对象层次:根对象为Rectangle,它拥有一个孩子Text对象。Text对象的父对象被自动设置为这个Rectangle,类似地,Text对象被添加到这个Rectangle对象的子对象属性中。该工作由QML完成。

Putting it All Together

上面例子中的Rectangle和Text类型都是由引入的QtQuick提供的。将引入语句和对象声明放在一起,我们就得到了一个完整的QML文件:

import QtQuick 2.0

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }
}

如果我们可以保存这个文件为"HelloWorld.qml",然后加载并显示它。

Loading and Displaying the QML Document

为了显示这个QML文档定义的图形界面,可以使用qmlscene工具加载它。qmlscene工具安装在Qt的安装目录中。假设Qt的二进制文件被安装在系统可执行路径,你可以使用以下的命令显示这个QML文档:

qmlscene HelloWorld.qml

你将看到文本"Hello, World"在一个红色矩形的中心。

Handling User Input

一个使用QML定义用户界面的很大优点是,它允许用户界面设计师利用简单的JavaScript表达式来决定应用程序该如何对事件作出响应。在QML中,我们将这些事件作为signals;而这些信号则被signal handlers进行处理。

举例来说,考虑下面这个例子:

import QtQuick 2.0

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }

    MouseArea {
        anchors.fill: parent
        onClicked: parent.color = "blue"
    }
}

这个例子可以被保存为"ClickableHelloWorld.qml"并在qmlscene中运行。无论用户点击这个窗口的什么地方,这个矩形都将由红色变成蓝色。注意这个MouseArea类型在触摸事件发生时也会发出clicked信号,因此这段代码可以同样工作在移动设备上。

用户的键盘输入也能被类似的处理通过一段简单的表达式:

import QtQuick 2.0

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }

    focus: true
    Keys.onPressed: {
        if (event.key == Qt.Key_Return) {
            color = "blue";
            event.accepted = true;
        }
    }
}

通过接受焦点,无论何时返回键按下,矩形框的颜色都将被改变成蓝色。

Property Bindings

对象和它们的属性来源于QML文件对图形界面定义的定义。QML语言允许属性通过多种方式互相绑定。从而创造高动态性的用户界面。

在下面的例子中,每个子Rectangle的几何属性都被绑定到父Rectangle上。如果父Rectangle的几何形状改变,由于属性绑定,每个孩子的几何形状也都会自动更新。

Animations

属性也可以通过动画动态更新。QtQuick提供了多种动画类型,可以用来动态地改变一个属性的值。在下面的例子中,我们设置了一个动态的属性,并且在Text区域中进行显示

import QtQuick 2.0

Rectangle {
    color: "lightgray"
    width: 200
    height: 200

    property int animatedValue: 0
    SequentialAnimation on animatedValue {
        loops: Animation.Infinite
        PropertyAnimation { to: 150; duration: 1000 }
        PropertyAnimation { to: 0; duration: 1000 }
    }

    Text {
        anchors.centerIn: parent
        text: animatedValue
    }
}

所显示的值将在0到150之间周期地变化。

Defining Custom QML Types for Re-use

在QML中最重要的概念之一就是类型的复用。一个应用程序可能含有多个相同的可视类型(例如,多个按钮),同时QML允许这类事物被定义为可复用的、定制的类型,以减小代码重复性并提高可读性。

例如,想象下开发者在Button.qml文件中定义了一个新的按钮类型:

// Button.qml
import QtQuick 2.0

Rectangle {
    width: 100; height: 100
    color: "red"

    MouseArea {
        anchors.fill: parent
        onClicked: console.log("Button clicked!")
    }
}

这个类型可能在应用程序中被复用多次,像下面这样:

// application.qml
import QtQuick 2.0

Column {
    Button { width: 50; height: 50 }
    Button { x: 50; width: 100; height: 50; color: "blue" }
    Button { width: 50; height: 50; radius: 8 }
}

在这种方式下,模块化的用户界面类型就可以在应用程序中被组装和复用了。

参考QML Object Attributes来获取关于如何开发你自己的可复用组件的更多信息。

Where to Go from Here

现在你已经看到了QML的响应机制,是时候开始你的下一步了。以下页面将在你与QML的旅程中引导下你。

QML Applications

Qt官方教程翻译——First Steps with QML,布布扣,bubuko.com

时间: 2024-10-19 06:48:12

Qt官方教程翻译——First Steps with QML的相关文章

Qt官方教程翻译——QML Applications

附网址:http://qt-project.org/doc/qt-5/qmlapplications.html QML Applications QML是一种声明式语言,它提供了一组接口用来描述视觉组件以及他们的互动和相关性.它是一个高度可读的语言,并且被设计成使组件以一个动态的方式相互连接.同时它使组件很容易被复用以及创建定制的用户界面.使用QtQuick模块,设计者和开发者可以很容易使用QML建立流体动画的用户界面,并将这些界面连接到后端的C++库上面. What is QML? 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官方教程翻译——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模块提供了对"摇一摇"的支持). 这篇文档介绍了如何处理基本的用户输入:要了解更多关于运

Qt官方教程翻译——Qt QML

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

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官方教程翻译——The QML Reference

附网址:http://qt-project.org/doc/qt-5/qmlreference.html The QML Reference QML是用来创建高度动态应用程序的声明式语言.在QML中,应用程序通过类似UI组件这样的模块搭建起来,通过设置这些模块的属性可以定义应用程序的行为.当与JavaScript结合起来时,应用程序的行为将变得脚本化.另外,QML大量使用Qt,它允许QML直接访问类型和其他Qt特性. 这个参考手册描述了QML语言的特性.手册中很多QML类型来源于Qt QML或Q

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类型,以及