无锡网站建设公司排名,整站优化关键词排名,wordpress 分类目录 404,南京装修公司Qt quick基础1#xff08;包含基本元素Text Image Rectangle的使用#xff09; 目录 Qt quick基础1#xff08;包含基本元素Text Image Rectangle的使用#xff09;前言qt中有直接设计ui的拖拽式的widget#xff0c;为什么还需要Qtquick?QML语言Qt 版本创建一个Qt quick项…Qt quick基础1包含基本元素Text Image Rectangle的使用 目录 Qt quick基础1包含基本元素Text Image Rectangle的使用前言qt中有直接设计ui的拖拽式的widget为什么还需要Qtquick?QML语言Qt 版本创建一个Qt quick项目Qt quick的Helloworld利用Image元素加入图片利用Rectangle元素作buttonQt Assistant使用小结 前言
最近需要看Qt的代码虽然之前也接触过Qt但是当时是使用可推拽式的ui设计虽然体验很好但是需要看的代码使用的是Qt quick正好顺便学习一下记录在此以便之后忘记作回顾之用。
qt中有直接设计ui的拖拽式的widget为什么还需要Qtquick?
Qt中设计UI的拖拽式的Widget例如使用Qt Designer创建的窗口和控件等这些Widget提供了一个方便且易于学习的方式来构建传统的图形用户界面GUI并且是使用C编写的。
然而随着移动端和现代化应用程序的兴起GUI开发也面临着新的挑战。为了适应不同的屏幕尺寸和设备环境并实现更快、更流畅的交互效果Qt引入了Qt Quick框架。
Qt Quick是一种基于QML语言的声明式UI设计语言它使用JavaScript来处理用户输入和逻辑控制以及OpenGL进行渲染。Qt Quick提供了一种快速、灵活、高性能和可重用的方式来构建现代化应用程序的用户界面。与传统的Widget相比Qt Quick具有以下优点
高度可定制性Qt Quick提供了各种内置的UI组件和布局同时也支持自定义UI组件的创建使得UI设计师和开发者能够更加灵活地实现他们的设计需求。高性能Qt Quick使用OpenGL进行渲染能够在多种平台上实现高性能的UI渲染。跨平台支持Qt Quick支持在多种平台上构建现代UI包括桌面、移动和嵌入式系统。易于学习和使用QML是一种声明式UI设计语言与其他的UI设计语言相比具有更低的学习曲线。
因此尽管Qt中可以使用Widget来构建传统GUI但Qt Quick提供了一个现代、高效且易于学习和使用的方式来构建现代化应用程序的用户界面。
QML语言
QML是一种声明性语言用于描述应用程序的用户界面。它将用户界面分解为更小的元素这些元素可以组合成组件。QML描述了这些用户界面元素的外观和行为。这个用户界面描述可以用JavaScript代码进行充实以提供简单但也更复杂的逻辑。从这个角度来看它遵循HTML-JavaScript模式但QML从一开始就被设计为描述用户界面而不是文本-文档。
Qt 版本
截至2022年5月3日qt已经推出了6.6版本但我使用的Qt5.15和Qt6.2两个版本这两个版本都是LTS版本也就是长期支持版本。在我看来可能版本的不同会造成某些麻烦如果你去看2012、2015年甚至2019年的Qt教程可能其中有些内容已经不适用于现在的Qt版本了当然这些教程大部分仍是适用的。
版本win11Qt5.15/6.2或许选择6.46.5也是相当可以的因为在创建Qt quick项目时要求最低版本是6.2
创建一个Qt quick项目
打开Qt Creator的欢迎界面在下面找到教程你会在里面找到Qt quick创建的一个教程 打开之后你会发现这个教程很详细地在教你如何创建项目并给出了一些实例可能第一次看还不能直接有能力消化教程上的东西好吧是我菜但至少学会了如何创建一个空的Qt quick项目 Qt quick的Helloworld
创建完一个空项目之后你就可以直接运行了运行后发现是个空白的有着“hello world”标题的窗口 我们可以在里面添加元素使其能够显示“hello world”的文字 Text{text:h2Hello worldh2 //这里使用了html标签来更改字体的大小x:100;y:100 //设置位置从左上角计算color: darkgreen //设置颜色}这里添加的是一个Text元素顾名思义就是显示文本的元素。上面这段代码要放在Window这段代码之内运行得到如下图所示的结果。 利用Image元素加入图片 上面讲述了Text元素接下来我们来尝试一下Image元素它是用来插入和设置图片的可以加载本地资源中的图片也可以加载url地址的资源图片下面就以网络图片为例 Image{x:12;y:250source: https://ts1.cn.mm.bing.net/th/id/R-C.c1ef7c28ec0c3a03671bf8c5b84824a9?rikgtgH8z39ogolSAriuhttp%3a%2f%2fimg.touxiangwu.com%2fuploads%2fallimg%2f230101%2f1_010120010R534.jpgehk%2bP%2fA9Bc1Xw28uBxAFWEP0qGpscER%2bd8hq%2flkynX4qUw%3drislpidImgRawr0//可以加载网页图片}上面图片是我在网上随便找的Image元素的用法当然远不止此这里仅仅是做个展示。运行得到下面的结果
利用Rectangle元素作button
Rectangle是一个长方形区域里面可以嵌套各种各样的元素以达到各种效果。 Rectangle{id:button //调用这个矩形区域的唯一标识符在程序中不允许重复x:500;y:300width:116;height:26color: lightsteelblueborder.color: slategrey //设置边界颜色Text { //嵌套Text元素anchors.centerIn: parent //此处的parent即为Rectangletext: qsTr(start) //文本}MouseArea{ //鼠标区域元素anchors.fill: parent //鼠标区域即为整个RectangleonClicked: {status.text Button clicked //当被按下时status的文本变为“button clicked”,staus这段代码还没涉及}}}上述又出现了一个新的元素MouseArea这个元素即是鼠标区域用来响应鼠标的各种事件。 Text{id:status //idx:500;y:350width: 116;height:26text: waiting...horizontalAlignment: Text.AlignHCenter}
这段代码和上述的代码所形成的效果是上段的Rectangle被按下后下段文本由“Waiting”变为“Button Clicked”效果如下 上面代码中有一个“Onclicked”这是一个信号处理器当一个属性更改值时会发出一个信号来告知这个更改要获取这个信号只需要创建一个信号处理器(signal handler),它使用“onChanged”语法来命名。例如,Rectangle元素拥有 width和color 属性下面的代码中我们在一个Rectangle对象中定义了两个信号处理器onWidthChanged和onColorChanged,无论何时属性被修改了,都会自动调用它们。
截至现在如果运行项目的话应该是这个样子的。 Qt Assistant使用
Qt在安装时都会有Assistant助手它可以很方便的帮我们定位所要查找和使用的各种东西。 例如我需要查找map相关的操作就可以直接搜索“map”并找到对应模块查看 当然我也是刚刚学习其实还不太会使用属于是边学边写博客。更多的Qml元素也可以在这里面找到。
如我需要查找map相关的操作就可以直接搜索“map”并找到对应模块查看 当然我也是刚刚学习其实还不太会使用属于是边学边写博客。更多的Qml元素也可以在这里面找到。
小结
本文简单讲述Qt quick的项目创建以及几个简单的元素使用能够实现加载图片按钮、文本的显示与更改并提及了Qt 助手的使用。
如果您觉得我写的不错麻烦给我一个免费的赞如果内容中有错误也欢迎向我反馈。
