1.qml-创建第一个程序

1710 0 0

作者:NQian

1.qt quick和qml

在Qt 5中，Qt Quick被描述为QML类库,Qt Quick是QML的一个数据类型和功能的标准库，包含了可视化类型、交互类型、动画、模型和视图、粒子特效和渲染特效等。在QML应用程序中，可以通过一个简单的import语句来使用该模块提供的所有功能。而且Qt 5发布了新的QtQuick 2.x版本, 通过 OpenGL（ES）2.0 抽象层，对绘图刷新方面大大提升性能。所以如果要开发更炫酷的 UI 与高级应用，建议使用 Qt Quick。

QML和Qt Quick的关系就类似于C++跟Qt的关系,一个是语言,一个是库

参考学习链接:https://cwc1987.gitbooks.io/qmlbook-in-chinese/content/meet_qt_5/qt_building_blocks.html

2.qt安装

以qt5.14.0为例,安装选项默认即可。

如果需要配置安卓环境,则去参考https://blog.csdn.net/weixin_44697562/article/details/108809826

3.创建第一个qt quick app

选择quick工程时,可以看到有下图4种选项:

Empty : 创建一个空的Qt Quick 2 的软件工程
Scroll : 使用 ScrollView 类型来实现一个可滚动列表视图 (需要 Qt 5.9 或者更高版本)。
Stack : 使用 StackView 类型去实现一组基于堆的导航模型页面 (需要 Qt 5.7 或者更高版本)。
Swipe : 使用 SwipeView 类型去实现一组基于滑动的导航模型页面 (需要 Qt 5.7 或者更高版本)。

然后我们选择Empty工程,一直点到最后,最终项目如下所示:

然后我们点击设计按钮后,则可以进入"qt quick designer",类似于"Qt Designer",在"qt quick designer"中,可以通过拖拽方式给qml文件添加元素.如下图所示:

当我们拖拽完后,进入编辑区,就可以看到我们拖拽的元素,以及设置的属性:

编译运行:

4.分析main.cpp

首先来看main.cpp,是如何通过qml文件生成界面的.代码如下所示:

#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    // 设置高分辨率,否则可能出现布局字体控件尺寸上的偏差,必须在构造QGuiApplication之前设置此属性

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url); //  通过engine(qml引擎)去加载qml文件

    return app.exec();
}

main函数很简单,首先是创建app和engine,然后通过connect()函数让QQmlApplicationEngine::objectCreated信号连接到一个匿名槽函数中.

objectCreated信号如下所示:

void QQmlApplicationEngine::objectCreated(QObject *object, const QUrl &url);
// 当加载qml文件后,会发出该信号,如果加载成功,那么object参数指向加载对象的指针,否则object参数为空,而url参数则等于qml文件路径.

然后通过engine.load()去加载qml文件,此时如果加载成功,那么就进入app.exec()主事件循环.否则调用" QCoreApplication::exit(-1);"退出.

5. qml基础知识

首先我们先了解下QML中基本知识.

属性初始化语句除了分行书写外,还可以都写在一行,以";"隔开,比如:

x: 100; y: 132; width: 200;

或者:

Text {
        font { pixelSize: 14; bold: true; }
}

QML注释,和C++中一样,可以 // ,也可以 /**/ .
QML属性命名以小驼峰命名,首字母都是小写,比如implicitWidth.
属性基本类型(Basic Types)分为3种:

第一种: 引擎默认支持的基本类型，int,real,double,bool,string, var(泛型属性类型，可以引用任何数据类型)等,而且这些类型默认支持,不需要使用import语句,比如var(可以引用任何数据类型):

PS : 在元素中自定义属性时,都需要加上property来进行修饰.

第二种: 由 QtQuick模块提供的基本类型,比如date,point,size,color等,如下图所示:

第三种: 由C++导入到QML中的基本类型(后面学习)

qml中log打印,需要放在方法中(比如定时器触发方法、点击事件方法等)执行,不能直接放在元素内.比如通过定时器每隔200ms打印一次log(定时器后面详细讲):

Timer{
        id:                             _timer
        interval:                       200
        running:                        true
        repeat:                         true
        onTriggered: {
            console.log("log:", numA, numB, numA + numB)    //打印 log: 10 20 30
            console.assert(numA == 11, "numA!=11");    // 断言,如果第一个参数为false,那么将会打印"numA！=11",并打印文件位置和行号

            console.time("firstPart");
            // 这里处理执行代码
            console.timeEnd("firstPart"); // 打印time到timeEnd之间执行的时间

            console.count("f called");    // 打印函数被调用次数
        }
}

QML列表属性定义(C++中数组、List之类的)的方法是 : 包含在[]方扩号里,由逗号隔开.比如:

 property var myArray : [ 10, 20, 30 ];

 Timer{
            id:                             _timer
            interval:                       200
            running:                        true
            repeat:                         true
            onTriggered: {
                console.log("log:", myArray[0], myArray[1], myArray[2]);    // 打印数组值
            }
 }

qml槽(接受信号的方法),名字以on<Signal>形式.比如Button按钮,它的父类为AbstractButton,所以Signals有:

那么我们要写Button的clicked()槽函数,就可以写成onClicked:

Window {
    id: window
    width: 640
    height: 480
    Button {
        id: button
        text: qsTr("退出")
        anchors.fill: parent   // 设置button占据父类整个窗口
        anchors.margins:   10  // 设置外边距为10px
        onClicked: {
            console.log("按钮被点击了!")
            Qt.quit()        // 退出窗口
        }
    }
}

6.分析main.qml

main.qml代码如下所示:

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 400
    height: 380
    title: qsTr("Hello World")

    Text {
        id: element
        x: 100
        y: 132
        width: 200
        height: 86
        color: "#b21111"
        text: qsTr("诺谦 hello qt quick")
        font.family: "Tahoma"
        font.wordSpacing: 0.1
        style: Text.Normal
        font.weight: Font.Normal
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        lineHeight: 1
        font.pixelSize: 19
    }
}

分为了两部分,import语句和qml对象树

6.1 import

import等价于C++中#include类型,一般用来导⼊⼀个指定的模块版本,然后为qml对象树进行关键字的引用.

例如import QtQuick 2.12,表示使用2.12版本的QtQuick模块，且版本是向下兼容的,该模块包含了Qt中所有视觉项的基本类型(date,point,size,color等),并且定义了所有在视觉项中常见的属性(x和y位置、宽度和高度、锚定、color、font等),如下所示:

例如import QtQuick.Window 2.12,表示使用2.12版本的QtQuick Window模块，该模块的包含了Window模块,在C++中则对应的是QQuickWindow,帮助手册如下所示:

6.2 QML对象树

和html类似,每个QML文件都有一个根元素,一个父元素可以有多个子元素,子元素可以通过parent关键字访问父元素
每个元素下面都拥有属性(类似C++中的成员变量),按照name:value方式赋值,比如 width: 400,设置元素宽度
属性初始化还可以依赖其它多个或一个属性, 当它依赖的属性改变时，它的值也会更新,比如下面(只要width值被改变,那么height就马上更新):

Window {
    visible: true
    width: 200
    height: width * 2
}

每个元素都可以给自己定义一个id值,用来修饰该元素是干嘛的,比如上面的"id: element ",并且同一个文件里每个id必须唯一,且不能被更改,id值只能包含字母,数字和下划线,并且首字母必须小写或下画线,然后就可以在其他对象或者脚本(javascript)通过该id来引用该对象(类似于C++指针)。后面会讲。

介绍讲述完毕,下章就来学习: 2.qml-Window元素使用

内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/lifexy/p/14395134.html

标签： C++ CPP C++语言开发

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！

1.qml-创建第一个程序