首页 > 代码库 > Qt Quick 简单教程

Qt Quick 简单教程

2024-10-02 10:55:02 214人阅读

上一篇《Qt Quick 之 Hello World 图文具体解释》我们已经分别在电脑和 Android 手机上执行了第一个 Qt Quick 演示样例—— HelloQtQuickApp 。这篇呢，我们就来介绍 Qt Quick 编程的一些基本概念，为创建复杂的 Qt Quick 应用奠定基础。

版权全部 foruok 。如需转载请注明来自博客 http://blog.csdn.net/foruok 。

首先看一下《Qt Quick 之 Hello World 图文具体解释》中的 main.qml 文件：

技术分享

如今我们结合 main.qml 文件来解说。

import 语句

main.qml 文件第一行代码：import QtQuick 2.0 。

这行代码引入了 QtQuick 模块， import 语句的作用与 C++ 中的 #include 相似。与 Java 中的 import 效果一样。不再啰嗦了。

Qt Quick 基本元素

Qt Quick 作为 QML 的标准库，提供了非常多基本元素和控件来帮助我们构建 Qt Quick 应用。

假设拿 C++ 来比拟， QML 就相当于 C++ 语言本身，而 Qt Quick 相当于 STL 。

好吧。你可能认为有点驴头不正确马嘴，没关系，有这么点儿意思就成。

Rectangle

main.qml 的第三行代码，定义了一个 Rectangle 类型的对象作为 QML 文档的根对象。

关于对象在 qml 文件里的描写叙述。《Qt on Android：QML 语言基础》一文中已经解说。这里不再赘述。以下咱们看看 Rectangle 究竟是什么。

Rectangle 用来绘制一个填充矩形。能够带边框，也能够不带，能够使用纯色填充。也能够使用渐变色填充，甚至还能够不填充而仅仅提供边框……

Rectangle 有非常多属性。

width 用来指定宽， height 用来指定高。我们已经见识过了。

color 属性能够指定填充颜色，而 gradient 属性则用来设置渐变色供填充使用，假设你同一时候指定了 color 和 gradient 。那么 gradient 生效；假设你设置 color 属性为 transparent ，那么就能够达到仅仅绘制边框不填充的效果。

border.width 指定边框的宽度， border.color 指定边框颜色。

Rectangle 还能够绘制圆角矩形，你仅仅要设置 radius 属性即可了。

以下我们来看一个简单的演示样例：

Rectangle {
    width: 320;
    height: 480;
    color: "blue";
    border.color: "#808080";
    border.width: 2;
    radius: 12;
}

你能够改动 HelloQtQuickApp 的 main.qml 文件来查看效果，也能够建立一个新的project。

上面的 Rectangle 对象。我们

颜色

关于颜色值， QML 中能够使用颜色名字，如 blue / red / green / transparent 等，也能够使用 "#RRGGBB" 或者 "#AARRGGBB" 来指定，还能够使用 Qt.rgba() / Qt.lighter() 等等方法来构造。

详情请參考 Qt SDK 中 "QML Basic Type: color" 页面。

color 类型有 r 、 g 、 b 、 a 四个属性。分别表示一个颜色值的 red 、 green 、 blue 、 alpha 四个成分。

你能够这样使用它们：

Text {
    color: "red"

    // prints "1 0 0 1"
    Component.onCompleted: console.log(color.r, color.g, color.b, color.a)
}

渐变色

QML 中渐变色的类型是 Gradient ，渐变色通过两个或多个颜色值来指定。 QML 会自己主动在你指定的颜色之间插值，进行无缝填充。

Gradient 使用 GradientStop 来指定一个颜色值和它的位置（取值在 0.0 与 1.0 之间）。

好吧，无码不欢。快快看一个演示样例：

Rectangle {
    width: 100; 
    height: 100;
    gradient: Gradient {
        GradientStop { position: 0.0; color: "#202020"; }
        GradientStop { position: 0.33; color: "blue"; }
        GradientStop { position: 1.0; color: "#FFFFFF"; }
    }
}

Gradient 仅仅能用来创建垂直方向的渐变，只是其他方向的，能够通过给 Rectangle 指定 rotation 属性来实现。以下是演示样例：

Rectangle {
    width: 100; 
    height: 100;
    rotation: 90;
    gradient: Gradient {
        GradientStop { position: 0.0; color: "#202020"; }
        GradientStop { position: 1.0; color: "#A0A0A0"; }
    }
}

刚刚我们使用了 rotation 属性。事实上它来自 Rectangle 的父类 Item 。

Item

Item 是 Qt Quick 中全部可视元素的基类，尽管它自己什么也不绘制，可是它定义了绘制图元所须要的大部分通用属性，比方 x 、 y 、 width 、 height 、锚定（ anchoring ）和按键处理。

Item 的属性特别多。除了前面提到的。还有 scale / smooth / anchors / antialiasing / enabled / visible / state / states / children 等等，详情參考 Qt 帮助文档。

你能够使用 Item 来分组其他的可视图元。

如：

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;
    Item {
        id: gradientGroup;
        Rectangle {
            x: 20;
            y: 20;
            width: 120;
            height: 120;
            gradient: Gradient {
                GradientStop { position: 0.0; color: "#202020"; }
                GradientStop { position: 1.0; color: "#A0A0A0"; }
            }
        }

        Rectangle {
            x: 160;
            y: 20;
            width: 120;
            height: 120;
            rotation: 90;
            gradient: Gradient {
                GradientStop { position: 0.0; color: "#202020"; }
                GradientStop { position: 1.0; color: "#A0A0A0"; }
            }
        }
    }

    Component.onCompleted: {
        console.log("visible children: " ,gradientGroup.visibleChildren.length);
        console.log("visible children: " ,gradientGroup.children.length);
        for(var i = 0; i < gradientGroup.children.length; i++){
            console.log("child " , i, " x = ", gradientGroup.children[i].x);
        }
    }
}

分组后能够通过 Item 的 children 或 visibleChildren 属性来訪问孩子元素。如上面的代码所看到的。

另外你可能注意到了， x 、 y 、 width 、 height 四个属性结合起来，能够完毕 Qt Quick 应用的界面布局，只是这样的採用绝对坐标的方式来布局，不太easy适应多种多样的移动设备分辨率。而假设你看了《》，可能会注意到演示样例代码中多次出现的 anchors 属性，它 Item 的属性，是 Qt Quick 引入的一种新的布局方式。

使用 anchors 进行界面布局

anchors 提供了一种方式，让你能够通过指定一个元素与其他元素的关系来确定元素在界面中的位置。

你能够想象一下，每一个 item 都有 7 条不可见的锚线：左（left）、水平中心（horizontalCenter）、上（top）、下（bottom）、右（right）、垂直中心（verticalCenter）、基线（baseline）。看下图就明白了：

技术分享

在上图中，没有标注基线。基线是用于定位文本的，你能够想象一行文字端坐基线的情景。

对于没有文本的图元，baseline 和 top 一致。

使用 anchors 布局时，除了对齐锚线。还能够在指定上（topMargin）、下（bottomMargin）、左（leftMargin）、右（rightMargin）四个边的留白。看个图就明白了：

技术分享

好了，基础知识介绍完毕。能够看一些样例了。

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;

    Rectangle {
        id: rect1;
        anchors.left: parent.left;
        anchors.leftMargin: 20;
        anchors.top: parent.top;
        anchors.topMargin: 20;
        width: 120;
        height: 120;
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#202020"; }
            GradientStop { position: 1.0; color: "#A0A0A0"; }
        }
    }

    Rectangle {
        anchors.left: rect1.right;
        anchors.leftMargin: 20;
        anchors.top: rect1.top;
        width: 120;
        height: 120;
        rotation: 90;
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#202020"; }
            GradientStop { position: 1.0; color: "#A0A0A0"; }
        }
    }
}

上面的代码执行后与之前使用 Item 分组的演示样例代码（绝对坐标布局）效果一样。这里的第二个矩形的左边从第一个矩形的右边開始、顶部向第一个矩形的顶部对齐。

而对第一个矩形的引用，是通过的 id 属性来完毕的，请參看《Qt on Android：QML 语言基础》。

Item 的 anchors 属性，除了上面介绍的，另一些，如 centerIn 表示将一个 item 居中放置到另一个 item 内。 fill 表示充满某个 item ……很多其他请參考 Item 类的文档。这里再举个使用 centerIn 和 fill 的演示样例：

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;

    Rectangle {
        color: "blue";
        anchors.fill: parent;
        border.width: 6;
        border.color: "#888888";

        Rectangle {
            anchors.centerIn: parent;
            width: 120;
            height: 120;
            radius: 8;
            border.width: 2;
            border.color: "black";
            antialiasing: true;
            color: "red";
        }
    }
}

Z 序与透明度

Item 除了 x 、 y 属性。事实上另一个 z 属性，用来指定图元在场景中的 Z 序。

z 属性的类型是 real 。数值越小，图元就越垫底（远离我们），数值越大，图元就越靠近我们。

Item 的属性 opacity 能够指定一个图元的透明度。取值在 0.0 到 1.0 之间。

结合 Z 序和透明度，有时能够达到不错的效果。

以下是一个简单的演示样例：

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;

    Rectangle {
        x: 20;
        y: 20;
        width: 150;
        height: 100;
        color: "#606080";
        z: 0.5;
    }

    Rectangle {
        width: 100;
        height: 100;
        anchors.centerIn: parent;
        color: "#a0c080";
        z: 1;
        opacity: 0.6;
    }
}

除了视觉效果，有时我们也须要安排图元在场景中的 Z 序。比方一个图片浏览器，可能在载入图片时要显示一个 loading 图标，这个图标要显示在图片之上。此时就能够设置 loading 图元的 Z 序大于图片元素的 Z 序。

按键处理

前面提到 Item 能够处理案件，全部从 Item 继承的元素都能够处理按键，比方 Rectangle ，比方 Button 。这点我们在《Qt on Android：QML 语言基础》一文中介绍附加属性时已经提到。

Item 通过附加属性 Keys 来处理按键。Keys 对象是 Qt Quick 提供的，专门供 Item 处理按键事件的对象。它定义了非常多针对特定按键的信号，比方 onReturnPressed ，还定义了更为普通的 onPressed 和 onReleased 信号，一般地，你能够使用这两个信号来处理按键（请对比 Qt C++ 中的 keyPressEvent 和 keyReleaseEvent 来理解）。

它们有一个名字是 event 的 KeyEvent 參数，包括了按键的具体信息。假设一个按键被处理， event.accepted 应该被设置为 true 以免它被继续传递。

这里举一个简单的样例，检測到 Escape 和 Back 键时退出应用，检測到数字键，就通过 Text 来显示相应的数字。代码例如以下：

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;
    color: "#c0c0c0";
    focus: true;
    Keys.enabled: true;
    Keys.onEscapePressed: Qt.quit();
    Keys.onBackPressed: Qt.quit();
    Keys.onPressed: {
        switch(event.key){
        case Qt.Key_0:
        case Qt.Key_1:
        case Qt.Key_2:
        case Qt.Key_3:
        case Qt.Key_4:
        case Qt.Key_5:
        case Qt.Key_6:
        case Qt.Key_7:
        case Qt.Key_8:
        case Qt.Key_9:
            keyView.text = event.key - Qt.Key_0;
            break;
        }
    }

    Text {
        id: keyView;
        font.bold: true;
        font.pixelSize: 24;
        text: qsTr("text");
        anchors.centerIn: parent;
    }
}

演示样例中用到了 onPressed / onEscapePressed / onBackPressed 三个附加信号处理器，当中 onPressed 信号的參数是 event ，包括了按键信息，程序中使用 switch 语句与 Qt 对象的枚举值比較来过滤我们关注的按键。

Item 还有非常多的属性。不再一一演示使用方法。请移步 Qt 帮助进一步了解。

你肯定注意到了。上面的演示样例使用了 Text 这个对象，接下来我们就介绍它。

Text

Text 元素能够显示纯文本或者富文本（使用 HTML 标记修饰的文本）。它有 font / text / color / elide / textFormat / wrapMode / horizontalAlignment / verticalAlignment 等等属性，你能够通过这些属性来决定 Text 元素怎样显示文本。

当不指定 textFormat 属性时， Text 元素默认使用 Text.AutoText ，它会自己主动检測文本是纯文本还是富文本，假设你明白知道要显示的是富文本，能够显式指定 textFormat 属性。

以下是一个简单演示样例。显示蓝色的问题，在单词分界处断行：

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;
    Text {
        width: 150;
        height: 100;
        wrapMode: Text.WordWrap;
        font.bold: true;
        font.pixelSize: 24;
        font.underline: true;
        text: "Hello Blue Text";
        anchors.centerIn: parent;
        color: "blue";
    }
}

以下的样例仅仅把 "Text" 字样以蓝色显示：

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;
    Text {
        width: 150;
        height: 100;
        wrapMode: Text.WordWrap;
        font.bold: true;
        font.pixelSize: 24;
        font.underline: true;
        text: "Hello Blue <font color=\"blue\">Text</font>";
        anchors.centerIn: parent;
    }
}

Text 元素的 style 属性提供了几种文字风格，Text.Outline 、 Text.Raised 、 Text.Sunken ，能够使文字有点儿特别的效果。而 styleColor 属性能够和 style 配合使用（假设没有指定 style ，则 styleColor 不生效），比方 style 为 Text.Outline 时，styleColor 就是文字轮廓的颜色。

看个简单的演示样例：

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;
    Text {
        id: normal;
        anchors.left: parent.left;
        anchors.leftMargin: 20;
        anchors.top: parent.top;
        anchors.topMargin: 20;
        font.pointSize: 24;
        text: "Normal Text";
    }
    Text {
        id: raised;
        anchors.left: normal.left;
        anchors.top: normal.bottom;
        anchors.topMargin: 4;
        font.pointSize: 24;
        text: "Raised Text";
        style: Text.Raised;
        styleColor: "#AAAAAA" ;
    }
    Text {
        id: outline;
        anchors.left: normal.left;
        anchors.top: raised.bottom;
        anchors.topMargin: 4;
        font.pointSize: 24;
        text: "Outline Text";
        style: Text.Outline;
        styleColor: "red";
    }
    Text {
        anchors.left: normal.left;
        anchors.top: outline.bottom;
        anchors.topMargin: 4;
        font.pointSize: 24;
        text: "Sunken Text";
        style: Text.Sunken;
        styleColor: "#A00000";
    }
}

这个演示样例除了用到 Text 元素，还使用 anchors 来完毕界面布局。

Text 就介绍到这里。以下看 Button 。

Button

button可能是 GUI 应用中最经常使用的控件了。 QML 中的 Button 和 QPushButton 相似。用户点击button会触发一个 clicked() 信号，在 QML 文档中能够为 clicked() 指定信号处理器。响应用户操作。

要使用 Button 。须要引入 import QtQuick.Controls 1.1 。

先看一个简单的演示样例，点击button，退出应用。

代码例如以下：

import QtQuick 2.0
import QtQuick.Controls 1.1

Rectangle {
    width: 300;
    height: 200;
    Button {
        anchors.centerIn: parent;
        text: "Quit";
        onClicked: Qt.quit();
    }
}

你能够执行它看看效果。

如今我们再来看 Button 都有哪些属性。

text 属性指定button文字，见过了。

checkable 属性设置 Button 是否可选。

假设 Button 可选 checked 属性则保存 Button 选中状态。事实上我一直没用过这个属性……

iconName 属性指定图标的名字，假设平台的图标主题中存在该名字相应的资源， Button 就能够载入并显示它。iconSource 则通过 URL 的方式来指定 icon 的位置。iconName 属性的优先级高于 iconSource 。

isDefault 属性指定button是否为默认button。假设是默认的，用户按 Enter 键就会触发button的 clicked() 信号。

pressed 属性保存了button的按下状态。

menu 属性。同意你给button设置一个菜单（此时button可能会出现一个小小的下拉箭头），用户点击button时会弹出菜单。默认是 null 。

action 属性。同意设定button的 action 。action 能够定义button的 checked ， text 。tooltip 等属性。

默认是 null 。

activeFocusOnPress ，指定当用户按下button时是否获取焦点，默认是 false 。

style 属性用来定制button的风格，与它配套的有一个 ButtonStyle 类，同意你定制button的背景。

事实上 Button 比較简单好用。我不准备再啰嗦下去了，咱再看下 style 的使用就结束对 Button 的介绍。

ButtonStyle

要使用 ButtonStyle 须要引入 QtQuick.Controls.Styles 1.1 。

ButtonStyle 类有 background 、 control 、 label 三个属性。

我们通过重写 background 来定制一个button。 control 属性指向应用 ButtonStyle 的button对象，你能够用它訪问button的各种状态。 label 属性代表button的文本，假设你看它不顺眼，也能够替换它。

background 实际是一个 Component 对象。 Component（组件）的概念我们回头讲。

这里我们简单的使用 Rectangle 来定制button的背景。

看以下的演示样例：

import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1

Rectangle {
    width: 300;
    height: 200;
    Button {
        text: "Quit";
        anchors.centerIn: parent;
        style: ButtonStyle {
            background: Rectangle {
                implicitWidth: 70;
                implicitHeight: 25;
                border.width: control.pressed ? 2 : 1;
                border.color: (control.hovered || control.pressed) ? "green" : "#888888";
            }
        }
    }
}

我通过给 style 对象指定一个 ButtonStyle 对象来定制 Button 的风格。这个就地实现的 ButtonStyle 对象。重写了 background 属性。通过 Rectangle 对象来定义button背景。

我定义了背景的建议宽度和高度。依据button的 pressed 属性（ control 是实际button的引用）来设置背景矩形的边框粗细，而边框颜色则随着button的 hovered 和 pressed 属性来变化。

终于的效果是这样的：当鼠标悬停在button上时，边框颜色为绿色。当鼠标按下时，边框变粗且颜色为绿色。

对于 ButtonStyle ，假设有多个button同一时候用到，上面的方式就有点繁琐了，能够像以下这样使用：

import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1

Rectangle {
    width: 300;
    height: 200;

    Component{
        id: btnStyle;
        ButtonStyle {
            background: Rectangle {
                implicitWidth: 70;
                implicitHeight: 25;
                color: "#DDDDDD";
                border.width: control.pressed ? 2 : 1;
                border.color: (control.hovered || control.pressed) ?
 "green" : "#888888";
            }
        }
    }

    Button {
        id: openButton;
        text: "Open";
        anchors.left: parent.left;
        anchors.leftMargin: 10;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 10;
        style: btnStyle;
    }

    Button {
        text: "Quit";
        anchors.left: openButton.right;
        anchors.leftMargin: 6;
        anchors.bottom: openButton.bottom;
        style: btnStyle;
    }
}

这次我们定义了一个组件，设置其 id 属性的值为 btnStyle ，在 Button 中设定 style 属性时直接使用 btnStyle 。

好啦， ButtonStyle 就介绍到这里。以下该介绍 Image 了。

Image

Image 能够显示一个图片，仅仅要是 Qt 支持的，比方 JPG 、 PNG 、 BMP 、 GIF 、 SVG 等都能够显示。

它仅仅能显示静态图片，对于 GIF 等格式，仅仅会把第一帧显示出来。假设你要显示动画，能够使用 AnimateSprite 或者 AnimateImage 。

Image 的 width 和 height 属性用来设定图元的大小，假设你没有设置它们。那么 Image 会使用图片本身的尺寸。假设你设置了 width 和 height ，那么图片就可能会拉伸来适应这个尺寸。

此时 fillMode 属性能够设置图片的填充模式，它支持 Image.Stretch（拉伸）、 Image.PreserveAspectFit（等比缩放）、 Image.PreserveAspectCrop（等比缩放，最大化填充 Image ，必要时裁剪图片）、 Image.Tile（在水平和垂直两个方向平铺。就像贴瓷砖那样）、 Image.TileVertically（垂直平铺）、 Image.TileHorizontally（水平平铺）、 Image.Pad（保持图片原样不作变换）等模式。

Image 默认会堵塞式的载入图片，假设要显示的图片非常小，没什么问题。假设分辨率非常高，麻烦就来了。

此时你能够设置 asynchronous 属性为 true 来开启异步载入模式。这样的模式下 Image 使用一个线程来载入图片，而你能够在界面上显示一个等待图标之类的小玩意儿来告诉用户它须要等会儿。然后当 status（枚举值）的值为 Image.Ready 时再隐藏载入等候界面。

比較强悍的是， Image 支持从网络载入图片。它的 source 属性类型是 url 。能够接受 Qt 支持的随意一种网络协议，比方 http 、 ftp 等。

而当 Image 识别到你提供的 source 是网络资源时。会自己主动启用异步载入模式。此时呢，Image 的 progress（取值范围 0.0 至 1.0 ）。status（枚举值）都会适时更新。你能够依据它们推断何时结束你的载入等候提示界面。

算，先到这儿，看看怎么用吧。以下是最简的演示样例：

import QtQuick 2.0

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

source 替换为一个实际存在的图片路径就能够看到效果。

显示网络图片

以下是一个略微复杂点儿的演示样例。显示网络上的图片，在下载和载入前显示一个转圈圈的 Loading 图标。图片载入成功后隐藏 Loading 图标。假设载入出错，则显示一个简单的错误消息。看代码：

import QtQuick 2.0
import QtQuick.Controls 1.1

Rectangle {
    width: 480;
    height: 320;
    color: "#121212";

    BusyIndicator {
        id: busy;
        running: true;
        anchors.centerIn: parent;
        z: 2;
    }

    Label {
        id: stateLabel;
        visible: false;
        anchors.centerIn: parent;
        z: 3;
    }

    Image {
        id: imageViewer;
        asynchronous: true;
        cache: false;
        anchors.fill: parent;
        fillMode: Image.PreserveAspectFit;
        onStatusChanged: {
            if (imageViewer.status === Image.Loading) {
                busy.running = true;
                stateLabel.visible = false;
            }
            else if(imageViewer.status === Image.Ready){
                busy.running = false;
            }
            else if(imageViewer.status === Image.Error){
                busy.running = false;
                stateLabel.visible = true;
                stateLabel.text = "ERROR";
            }
        }
    }

    Component.onCompleted: {
        imageViewer.source = "http://image.cuncunle.com/Images/EditorImages/2013/01/01/19/20130001194920468.JPG";
    }
}

图片资源是我从网络上搜索到的，仅仅用于演示程序，如有版权问题请提示我改动。

Image 对象，设置了 asynchronous 属性为 true，只是对于网络资源 Image 默认异步载入。这个属性不起作用，仅仅有你想异步载入本地资源时才须要设置它。 cache 属性设置为 false ，告诉 Image 不用缓存图片。 fillMode 属性我设置了等比缩放模式。

onStatusChanged 是信号处理器，Image 的 status 属性变化时会发射 statusChanged() 信号。之前在《QML 语言基础》中介绍信号处理器时我们知道。信号处理器遵循 on{Signal} 语法。所以我们这里的名字是 onStatusChanged 。在信号处理器的代码块中。我通过 Image 对象的 id 訪问它的 status 属性。依据不同的状态来更新界面。

可能你会奇怪，在 Qt 帮助中， Image 类的參考手冊里没有明白提到 statusChanged 信号。事实上呢，还有非常多的信号。 Qt 的文档里都没有提到，呜呜。怎么办呢？教你个诀窍，去 SDK 头文件里找，比方 Image 的头文件是 Qt5.2.0\5.2.0\mingw48_32\include\QtQuick\5.2.0\QtQuick\private\qquickimage_p.h ，阅读这个头文件你会看到 QML 中的 Image 相应的 Qt C++ 中的 QQuickImage 类，而 QQuickImage 的父类是 QQuickImageBase ，QQuickImageBase 的类声明在文件 Qt5.2.0\5.2.0\mingw48_32\include\QtQuick\5.2.0\QtQuick\private\qquickimagebase_p.h 中。找到这里就找到 status 属性的真身了，看以下的代码：

Q_PROPERTY(Status status READ status NOTIFY statusChanged)

Q_PROPERTY 宏用来定义 QObject 及其派生类的属性。这样定义的属性能够在 QML 中訪问。上面的语句定义了仅仅读的 status 属性而且指明当属性变化时发送 statusChanged 信号。噢耶，K.O. ！

如今来看执行效果图吧（我偷了个懒。都是直接改动 HelloQtQuickApp 的 main.qml 文件来看各种演示样例的效果）。下图是载入过程：

技术分享

我设置了作为 QML 文档根元素的 Rectangle 对象的填充颜色为 "#121212"，所以背景是接近黑色的。下图是图片载入后的效果：

技术分享

怎么样，还不错吧，等比缩放模式生效了。

Qt Quick 是如此方便。以至于我不得不爱它！

你看嘛，就不到 50 行代码就能够实现一个基于网络的图片浏览器……

说说这个演示样例中出现的新内容：BusyIndicator 。

BusyIndicator

BusyIndicator 用来显示一个等待图元，在进行一些耗时操作时你能够使用它来缓解用户的焦躁情绪。

BusyIndicator 的 running 属性是个布尔值，为 true 时显示。 style 属性同意你定制 BusyIndicator 。默认的效果就是前面图示的那种，一个转圈圈的动画。

至于 BusyIndicator 的使用，以下是显示网络图片演示样例的代码。再温习下：

    BusyIndicator {
        id: busy;
        running: true;
        anchors.centerIn: parent;
        z: 2;
    }

尽管 BusyIndicator 仅仅有 running 和 style 两个属性，但它的祖先们有非常多属性。上面用到的 anchors 和 z ，都是从 Item 继承来的属性，能够直接使用。

好嘛，总算到一阶段。能够和简单教程说再见了。

版权全部 foruok ，如需转载请注明来自博客 http://blog.csdn.net/foruok 。

回想一下前几篇：

Qt Quick 简单介绍
QML 语言基础
Qt Quick 之 Hello World 图文具体解释

假设你有耐心看到这里。我想你肯定能够依据已经介绍的内容来完毕一些比較复杂的 Qt Quick 应用了。恭喜你！

Qt Quick 简单教程

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > Qt Quick 简单教程

Qt Quick 简单教程

import 语句

Qt Quick 基本元素

Rectangle

颜色

渐变色

Item

使用 anchors 进行界面布局

Z 序 与 透明度

按键处理

Text

Button

ButtonStyle

Image

显示网络图片

BusyIndicator

看完仍有疑问？有类似问题直接问程序猿

Z 序与透明度