QML笔记整理——QtQuick核心特征

最新推荐文章于 2025-04-20 11:06:59 发布

原创最新推荐文章于 2025-04-20 11:06:59 发布 · 799 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#读书笔记 #QML #Qt

Qt点滴专栏收录该内容

8 篇文章

订阅专栏

本文介绍了QML的基础概念，包括QML文件结构、组件定义、模块管理等，并讲解了网络透明性和渐进加载机制，帮助开发者快速掌握QML应用开发技巧。

1、QML文件

1）简单的QML代码包含了QML元素，它是以.qml为后缀名的文件或者文本，其编码方式为UTF-8。一个QML文件总是以至少一个import语句开始。Nothing is imported by default，其并没有包含什么代码，仅仅只是为了在运行时解释器寻找元素的定义

2）一个QML文件要定义唯一的顶层QML组件

3）Self-contained：A）在执行之前并没有预处理机制；B）在运行时解释执行

示例：创建一个简单的HelloWorld的QML程序，需要将程序放入QML文件里，比如存放到HelloWorld.qml文件

import QtQuick 2.0//Import existing QML types to be used in this

                  //application, such as Rectangle and Text

Rectangle {

    id: page

    width: 100

    height: 62

    color: "lightgray"

    Text {

        id: helloText

        text: "Hello world!"

        font.pointSize: 24;

        font.bold: true

        y: 30;

        anchors.horizontalCenter: page.horizontalCenter

2、QML组件

1）如前所述，QML文档定义了一个单一的，顶级QML组件。元素对象是根据对应的某个C++的原型而创建的-i.e. component是在在运行时创建的。例如，一个“button”component会用不同的按键字符串被初始化多次

2）组件是有QML基本元素构成的。所以，创建自己的组件是非常容易的。在创建组件的时候，起名字要以大写字母开始，如MyButton.qml

3）一个组件可以声明为内联组件。使用关键字Component声明，可以使用parent的属性或者是导入列表中的元素。该组件可以多次在一个QML文件中根据需要被使用（从逻辑上来说，这个组件也只属于这个QML文件）

3、QML模块

1）多个QML组件可以组合到一个QML模块中。最简单的方法就是创建一个子文件夹，然后把所有的控件放置进去。这些控件可以使用import语句导入到QML的文档中，如：import “path_to_mymodule”。导入路径是和导入控件的QML文件之间的相对路径。

2）也可以使用命令的导入。

3）用于区分不同的模块，也可以使代码更具有可读性

4）QML组件也可以在工程外的文件定义，这种情况下会用到URI（

在电脑术语中，统一资源标识符（Uniform Resource Identifier，或URI)是一个用于标识某一互联网资源名称的字符串。该种标识允许用户对网络中（一般指万维网）的资源通过特定的协议进行交互操作。URI由包括确定语法和相关协议的方案所定义）：import com.nokia.SomeStuff 1.0。通过导入，就可以访问到放在系统其他地方的com/nokia/SomStuff/下的控件了。这个路径可以通过下面的方法设置：A）在C++中，使用QmlEngine::addImportPath()；B）在执行qml.exe的时候使用选项-L指定路径

5）另外的导入方法：import "http://myserver.com/.../..." 1.0。这种情况下，一个叫qmldir的文件描述了目录的内容：

# <Comment>

4、网络透明

1）简单的说，就是QML代码中使用的其他内容都用URLs表示，对于本地的或者网络上的内容都适用，支持相对或绝对路径。如：

// Test1.qml containing a reference to an absolute URL

Image { source: "http://www.example.com/images/logo.png" }

// Test2.qml with a relative URL

Image { source: "images/logo.png" }

2）相对的URLs会自动转换成绝对路径（Absolute URLs always stay as they are）

例1：Test2.qml是从下面网址加载的

http://www.example.com/mystuff/Test2.qml

那么image的路径就自动被解析为http://www.example.com/mystuff/images/logo.png