qt开发(五十一)——qtquick基础

author author     2022-08-16     554

关键词:

QT开发(五十一)——QtQuick基础

一、QtQuick简介

    QT提供了两种独立的方法创建用户界面。

   QtQuick模块为创建流畅、鲜活的用户界面提供了一种标记语言。QtQuick模块适合需要动画元素的界面,以及应用程序主要运行在小屏幕和多点触控的设备上的场景。

   QtWidgets模块针对传统桌面提供了更多的支持,和目标平台做了更多的集成,无论目标平台是MacOSXWindowsKDEGNomeQtWidgets是一个非常高效的基于C++的类库,包含很多常见的用户界面组件,可以非常容易地为这些已存在的组件扩展新的功能。

    QtQuick模块是使用QML语言编写应用程序的标准库。Qt QML模块提供了QML引擎和语言架构,QtQuick模块提供了使用QML语言创建用户界面的所有基础类型。

    QtQuick模块提供了两套接口,QML API提供了使用QML语言创建用户界面的QML类型C++ API提供了使用C++代码扩展QML应用程序接口

    QT4.7开始引入QMLQML(Qt Meta-Object Language,Qt元对象语言)是一种用于描述应用程序用户界面的声明式编程语言。QML使用一些可视组件以及这些组件之间的交互来描述用户界面,是一种高可读性的语言,可以使组件以动态方式进行交互,并且允许组件在用户界面中很容易地实现复用和自定义。QML允许开发者和设计者以类似的方式创建高性能的、具有流畅的动画效果的、极具视觉吸引力的应用程序。QML提供了一个具有高可读性的类似JSON的声明式语法,并提供了必要的 JavaScript语句和动态属性绑定的支持。

二、 Qt Quick工程实例

1、创建Qt Quick应用

技术分享

    选择Qt Quick Application

    工程创建好后,Qt Quick工程包含QML文件、源文件、

 

2、QML文件

Main.qml文件:

import QtQuick 2.6
import QtQuick.Window 2.2
 
Window
{
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    MainForm
    {
        anchors.fill: parent
        mouseArea.onClicked:
        {
            Qt.quit();
        }
    }
}

    QML文档定义了一个QML对象树,由两部分组成:一个import导入部分,一个对象声明部分。

    import导入语句类似于C++中的#include,只有导入了相关模块,才能使用其中的类型和功能。导入的模块QtQuick模块是在创建项目时选择的组件集,包含了创建用户界面所需要的基本类型和功能,QtQuick.Window模块中提供了Window类型,可以为Qt Quick场景创建一个顶层窗口。

    对象声明部分,QML文档中的对象声明定义了要在可视场景中显示的内容。工程创建了两个对象:Window对象和其子对象MainForm。对象(object)由它们的类型(type)指定,以大写字母开头,后面跟随一对大括号,在括号中包含了对象的特性定义,比如对象的属性值或者其子对象。最外层的对象叫根对象,比如Window,在根对象里面定义的对象,叫做根对象的子对象,比如MainForm就是Window的子对象。 在Window中的visible是Window的属性,用来设置窗口是否显示,可以在帮助文档中查看一个类型的所有属性及用法。

    MainForm不是QtQuick模块中的类型,而是自定义的一个用户界面表单(Qt Quick UI Forms),是Qt 5.4后提出的一个概念,类似于Qt C++编程中的UI文件,MainForm.ui.qml文件只能在设计模式下编辑。

import QtQuick 2.6
Rectangle {
    property alias mouseArea: mouseArea
    width: 360
    height: 360
    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }
    Text {
        anchors.centerIn: parent
        text: "Hello World"
    }
}

    在main.qml文件中,MainForm就是MainForm.ui.qml的一个实例,而MainForm内部调用了mouseArea属性的onClicked事件处理器,相当于调用了MainForm.ui.qml中的MouseArea对象的onClicked事件处理器,Qt.quit()表明当在整个矩形中点击鼠标时要执行的命令就是退出程序。

    所有的QML文件是以资源的形式放在.qrc文件中的,QML文件不需要编译,类似于素材。

3、源文件

Main.cpp文件:

#include <QGuiApplication>
#include <QQmlApplicationEngine>
 
int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
 
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
 
    return app.exec();
}

    main函数中定义了一个QQmlApplicationEngine对象,并用其加载了main.qml文件。QQmlApplicationEngine类结合了QQmlEngine和QQmlComponent两个类的功能,提供了一个便捷的方式来加载一个QML文件,但QML文件的所有可视内容必须放在Window对象中才能最终显示出来。

4、pri工程附属文件

Deployment.pri文件:

unix:!android
{
    isEmpty(target.path)
    {
        qnx
        {
            target.path = /tmp/$${TARGET}/bin
        }
        else
        {
            target.path = /opt/$${TARGET}/bin
        }
        export(target.path)
    }
    INSTALLS += target
}
 
export(INSTALLS)

5、创建QML文件

    要在工程中创建QML文件,创建QML文件的QML模板可以选择Qt Quick 1Qt Quick 2QtQuickUI File三种,Qt Quick 1会导入QtQuick 1.1模块,适用于Qt 4版本;QtQuick 2导入QtQuick 2.0模块,适用于Qt 5版本;QtQuick UI文件生成后会默认使用设计器。

技术分享

    QML文件不需要进行编译,可以直接运行。Qt提供了两个运行QML文件的工具qmlviewerqmlscene,前者是Qt 4时代的产物,主要用来显示导入了QtQuick 1.1模块的QML文件,而qmlscene用来显示导入了QtQuick 2.0后版本的QML文件。选择“工具→外部→QtQuick→Qt Quick 2Preview”菜单项即可在qmlscene中显示现在打开的QML文档的内容。

三、扩展QML程序

1、添加文本显示

import QtQuick 2.0
 
Rectangle {
    width: 100
    height: 62
    Text
    {
        text: "hello World"
    }
}

    Text对象用来显示一块文本,其text属性用来指定要显示的文本内容

2、锚布局

    QML中每一个组件都有一组无形的锚,分别在上、下、左、右、中心等处,可以定义组件自身和其他组件的相对位置。centerIn指Text组件在parent组件的中心,parent指Text的父组件Rectangle。

import QtQuick 2.0
 
Rectangle {
    width: 100
    height: 62
    Text
    {
        anchors.centerIn: parent
        text: "hello World"
    }
}

3、鼠标互动

import QtQuick 2.0
 
Rectangle {
    width: 100
    height: 62
    Text
    {
        anchors.centerIn: parent
        text: "hello World"
    }
    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {
            Qt.quit()
        }
    }
}

    MouseArea子对象是鼠标区域,是一个不可见的组件,通过MouseArea对象可以实现鼠标互动。anchors.fill是进行填充,将鼠标区域覆盖整个Rectangle窗口。onClicked是Qt C++中的信号处理函数,即信号处理器,其语法是on<Signal>,onClickedClicked单击信号的处理,当在窗口上单击鼠标后会执行Qt.quit()全局函数,执行结果就是退出程序。

4、id属性和属性别名

    id属性是一个对象的名字,来唯一确定一个对象,在其他对象中可以通过id引用该对象。

import QtQuick 2.0
 
Rectangle {
    width: 100
    height: 62
    property  alias mArea:mouseArea
    Text
    {
        anchors.centerIn: parent
        text: "hello World"
    }
    MouseArea
    {
        id:mouseArea
        anchors.fill: parent
    }
}

    MouseArea对象,设置其idmouseArea,在Rectangle中可以通过mouseArea来访问MouseArea对象。在其他QML文件访问Rectangle内的子对象,需要在Rectangle中自定义属性,并且该属性需要是子对象的属性别名,例如声明的mArea属性,alias表明mAreamouseArea的别名。

mArea.onClicked:
{
    Qt.quit()
}




本文出自 “生命不息,奋斗不止” 博客,谢绝转载!

qt开发(五十)——qt串口编程基础

QT开发(五十)——QT串口编程基础一、QtSerialPort简介1、串口通信基础    目前使用最广泛的串口为DB9接口,适用于较近距离的通信。一般小于10米。DB9接口有9个针脚。    串口通信的主要参数如下:&... 查看详情

qt开发(四十一)——xml文件解析基础

QT开发(四十一)——XML文件解析基础一、XML文档简介    XML(Extensible MarkupLanguage,可扩展标记语言),是一种通用的文本格式,被广泛运用于数据交换和数据存储,而不是显示数据。XML的标签没有被预定义,用... 查看详情

qt开发(五十二)———qml语言

QT开发(五十二)———QML语言    QML是一种声明语言,用于描述程序界面。QML将用户界面分解成一块块小的元素,每一元素都由很多组件构成。QML定义了用户界面元素的外观和行为;更复杂的逻辑则可以结合JavaScr... 查看详情

学习五十一

...S配置选项NFS介绍NFS是NetworkFileSystem的缩写NFS最早由Sun公司开发,分2,3,4三个版本,2和3由Sun起草开发,4.0开始Netapp公司参与并主导开发,最新为4.1版本NFS数据传输基于RPC协议,RPC为RemoteProcedureCall的简写。NFS应用场景是:A,B,C三台... 查看详情

qt开发(五十)——qt串口编程基础

...统、机器人等工业中依旧用得很多。使用QtSerialPort模块,开发者可以大大缩短开发串口相关的应用程的周期。QtSerialPort提供了基本的功能,包括配置、I/O操作、获取和设置RS-232引脚的信号。QtSerialPort模块暂不支持以下特性:A、... 查看详情

qtquick控件基础视图

1、spliteview2、stackviewApplicationWindow{visible: truewidth: 640height: 480MouseArea{anchors.fill: parentacceptedButtons: Qt.LeftButton|Qt.RightButton|Qt.MiddleButtononClicked 查看详情

大数据必学java基础(五十一):什么是算法和数据结构

文章目录什么是算法和数据结构一、算法1、可以解决具体问题 2、有设计解决的具体的流程3、有评价这个算法的具体的指标二、数据结构三、紧密结构(顺序结构),跳转结构(链式结构)1、相同数据类型2... 查看详情

qtquick基础用法(代码片段)

QtQuick基础用法1.简介1.1QtWidgets与QML/QtQuick2.QML与QtQuick2.1QtQuick1.xVSQtQuick2.x3.信号(Signal)与槽(Slot)4.QML与C++混合编程4.1原理和方法4.2QML访问C++类(QML=>C++)4.2.1信号和槽4.2.2把类注册到QML中4.2.3C&#... 查看详情

《c#零基础入门之百识百例》(五十一)面向对象概述--一维多项式求值

C#零基础入门面向对象--面向对象概述--一维多项式求值前言一,面向对象三大特征1.1封装1.2继承1.3多态二,面向对象设计原则三,实例练习--一维多项式求值3.1题目描述3.2问题分析3.3参考代码前言本文属于C#零基础入门之百识百... 查看详情

qt开发(五十三)———qml基本元素

QT开发(五十三)———QML基本元素一、基本可视化项可视元素具有几何坐标,会在屏幕上占据一块显示区域。Item            基本的项元素,所有可视化项都继承ItemRectangle   ... 查看详情

qt开发(五十四)———qml组件

QT开发(五十四)———QML组件    QML组件是由基本元素组合成的一个复杂的可重用的组合元素。QML提供了多种方法来创建组件。    基于文件的组件将QML元素放置在一个单独的文件中,然后给文件一... 查看详情

qtquick系列教程之开发环境的搭建

简介Qt与QtCreator简介Qt是一个跨平台应用程序和UI开发框架。使用Qt您只需一次性开发应用程序,无须重新编写源代码,便可跨不同桌面和嵌入式操作系统部署这些应用程序。QtCreator是全新的跨平台QtIDE,可单独使用,也可与Qt库和... 查看详情

qtquick基础qml学习2(代码片段)

...;线上代码(编码是vs创建QML)//GreenRectangle.qmlimportQtQuick2.3//QtQuick版本Rectanglewidth:200height:100color:"red"Textanchors.centerIn:parent//将text放在控件正中心,这里并是程序界面正中心哦text:"Hello,World!"//RedRectangle.qmlimportQ... 查看详情

零基础学java—递归(五十一)(代码片段)

【零基础学Java】—递归(五十一)一、递归递归:指在当前方法内调用自己的这种现象🔵递归的分类:直接递归:方法自身调用自己间接递归:间接递归可以A方法调用B方法,B方法调用C方法,... 查看详情

qtquick

Qt是一个跨平台的图形用户界面的框架。Qtquick是Qt提供的一种高级用户界面工具包。   在Android等移动设备上,Qtquick应用默认使用OpenGLES,渲染效率很高。QtCreator是针对Qt的集成开发环境。qmlscene是用来测试QML应用的,不要用于... 查看详情

webpack原理篇(五十一):webpack启动过程分析(代码片段)

...笔记开始:从webpack命令行说起通过npmscripts运行webpack开发环境:npmrundev生产环境:npmrunbuild通过webpack直接运行webpackentry.jsbundle.js查找webpack入口文件在命令行运行以上命令后,npm会让命令行工具进入node_modules\\.b 查看详情

qt开发(二十一)——qt布局管理器

QT开发(二十一)——QT布局管理器一、布局管理器简介    QT中使用绝对定位的布局方式无法自适应窗口的变化。    QT中提供了对界面组件进行布局管理的类,用于对界面组件进行管理,能够自动排... 查看详情

qt开发编译问题备忘

编译《Qt及QtQuick开发实战精解》的代码,编译出错,提示:Cannotfindfile:E:学习资料QT《Qt及QtQuick开发实战精解》代码src33-3myPlayermyPlayer.pro.16:10:29:进程"C:QtQt5.5.05.5mingw492_32inqmake.exe"退出,退出代码2。Errorwhilebuilding/deplo 查看详情