![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Qt Quick 基础笔记
比卡丘不皮
一个热爱学习与热爱分享的有志青年
展开
-
QML 界面切换
有关qml部分基础部分就写到这里了,非常的简单,后面不在记录基础的qml程序了,后期根据项目,在给大家讲解一些例子。首先是最简单的方式,静态界面,就是加载全部数据,只是不显示,然后按键显示。效果图如下:点击按钮:LoginPageimport QtQuick 2.0import QtQuick.Controls 2.3Rectangle { width: 400 height: 300 color: "#051f58" ...原创 2021-07-20 13:57:41 · 2255 阅读 · 0 评论 -
Qt Quick C++与QML混合编程
声明:本例子是Qt Quick核心编程中的一个小例子,有关混合编程的方式。有关详细编程,请查看对应书籍。话不多说看效果图:首先我们创建的是一个QtquickApp,工程名字为colorMaker项目,然后我们添加ColorMaker类:colorMaker.h#ifndef COLORMAKER_H#define COLORMAKER_H#include <QObject>#include <QColor>#include <QDa...原创 2021-07-19 15:40:50 · 1152 阅读 · 0 评论 -
Qt Quick TabView简单使用
本例子是Qt Quick核心编程中的一个小例子,话不多说上代码:import QtQuick 2.12import QtQuick.Window 2.12import QtQuick.Controls 1.2import QtQuick.Controls.Styles 1.2Window { width: 360; height: 240; color: "lightgray"; Component{ id:tabContent; .原创 2021-07-15 11:04:50 · 521 阅读 · 0 评论 -
Qt Quick 进度条的使用
本例子为QtQuick核心编程中的一个小例子,本例子讲述了基本使用ProgressBar的使用:代码:import QtQuick 2.12import QtQuick.Window 2.12import QtQuick.Controls 1.2import QtQuick.Controls.Styles 1.2Window { visible: true width: 640 height: 480 color: "#a0a0a0" ti...原创 2021-07-08 11:48:45 · 357 阅读 · 0 评论 -
Qt Quick 中 Combobox 的使用
本例子为QtQuick核心编程中的一个小例子,本例子讲述了基本使用combobox的使用:import QtQuick 2.2import QtQuick.Window 2.12import QtQuick.Controls 1.2import QtQuick.Controls.Styles 1.2Window { width: 480; height: 360; color: "#a0a0a0"; Grid{ anchors.fill: ..原创 2021-07-07 13:19:13 · 374 阅读 · 0 评论 -
Qt Quick 点选框的使用,与自定义单选框
本例子为QtQuick核心编程中的一个小例子,点击对应单选框,显示对应数据,按钮下去得到对应数据,QML有时候就是这样枯燥与无聊。对应代码:import QtQuick 2.0import QtQuick.Window 2.12import QtQuick.Controls 1.2import QtQuick.Controls.Styles 1.2Window{ width: 320; height: 240; color: "#C0C0C0"; v..原创 2021-07-01 11:34:06 · 417 阅读 · 0 评论 -
Qt Quick 动态加载组件
本例子为QtQuick核心编程中的一个小例子,点击按钮,会出现对应的颜色方块,点击对应颜色方块,字体改变对应颜色,然后通过添加按键,回车空格,来改变字体颜色,采用load加载:ColorPicker.qmlimport QtQuick 2.0Rectangle { id:colorPicker; width: 50; height: 30; signal colorPicked(color clc); function configu...原创 2021-06-29 10:15:05 · 391 阅读 · 0 评论 -
Qt Quick load基本使用2
本例子为QtQuick核心编程中的一个小例子,点击对应颜色方块,字体改变对应颜色,然后通过添加按键,回车空格,来改变字体颜色,采用load加载:import QtQuick 2.2import QtQuick.Window 2.12Window{ visible: true width: 320 height: 240 color: "#C0C0C0"; title: qsTr("loader_focus") Text { ...原创 2021-06-24 14:52:57 · 401 阅读 · 0 评论 -
Qt Quick load基本使用
本例子为QtQuick核心编程中的一个小例子,点击对应颜色方块,字体改变对应颜色,采用load加载数据:import QtQuick 2.2import QtQuick.Window 2.12Window{ visible: true width: 320 height: 240 color: "#C0C0C0"; Text { id: coloredText; anchors.horizontalCenter: ...原创 2021-06-23 11:52:18 · 745 阅读 · 0 评论 -
Qt Quick 字体颜色改变
本例子为QtQuick核心编程中的一个小例子,点击对应颜色方块,字体改变对应颜色:ColorPicker.qmlimport QtQuick 2.0Rectangle { id:colorPicker; width: 50; height: 30; signal colorPicked(color clc); function configureBorder() { colorPicker.border.width = ...原创 2021-06-22 15:05:23 · 415 阅读 · 0 评论 -
Qt Quick 定时器的使用
话不多说,本例子为QtQuick核心编程中的一个小例子,使用的是QTimer。下面来看看效果吧:原创 2021-06-21 10:37:34 · 342 阅读 · 0 评论 -
Qt Quick key简单记录
向上图一样,我们可以使用键盘上,来移动字体,安空格键可以为复选框添加选择。代码:import QtQuick 2.12import QtQuick.Window 2.12import QtQuick.Controls 2.0Window { visible: true width: 640; height: 480; title: qsTr("Hello World") Rectangle{ width: 320; ..原创 2021-06-18 11:56:14 · 207 阅读 · 0 评论 -
Qt Quick 简单的相册制作
简单的相册制作声明:本例子是qt quick 核心编程中的一个小例子,详细的可以看对应的书籍。使用基本控件:BusyIndicator 用来等待一个图元,就是我们常见的等待加载的状态 Text 可以显示纯文本或者富文本 Image 加载图片 Button 按钮 FileDialog 文件对话框话不多说,先看效果图吧。点击open,选择你的图片:点...原创 2021-04-07 21:32:58 · 417 阅读 · 0 评论 -
QML 之 button 修改字体颜色,ButtonStyle的使用方式
在QML 中,我们使用Button 这个控件的话,没有设计的话就会出现如下:那我们想改变样式的话,就要使用style:ButtonStyle,我们点击帮助文档,看到例子只写了background。我们就模仿写出来它的lable。写出来效果:对应代码:Button{ id:button1; width: 80; height: 80; anchors.left: rect2.right; .原创 2021-04-07 16:54:47 · 7414 阅读 · 0 评论 -
多媒体(Multimedia)
本章算是最后一章的qml基础记录了,也算是多多了解这个运行过程,感谢自己坚持下来的东西,以后要是使用qml的时候在记录吧,时间原因也有限,我不打算这样下去了,要做好东西,也要看看自己的一些实力吧。 多媒体(Multimedia) 在QtMultimedia模块中的multimedia元素可以播放和记录媒体资源,例如声音,视频,或者图片。解码和编码的操作由特定的后台完成。例如在Linux上的gstreamer框架,Windows上的DirectShow,和OS X上的Qu...原创 2020-11-20 14:35:10 · 1227 阅读 · 0 评论 -
着色器效果(Shader Effect)
着色器允许我们利用SceneGraph的接口直接调用在强大的GPU上运行的OpenGL来创建渲染效果。着色器使用ShaderEffect与ShaderEffectSource元素来实现。着色器本身的算法使用OpenGL Shading Language(OpenGL着色语言) 来实现。着色器元素(Shader Elements) 为了对着色器编程,Qt Quick提供了两个元素。ShaderEffectSource与ShaderEffect。ShaderEffect将会使用自定...原创 2020-11-19 15:55:58 · 1442 阅读 · 0 评论 -
QmlBook in chinese 编程之十六 ---(粒子模拟(Particle Simulations))
粒子模拟(Particle Simulations) 粒子模拟是计算机图形技术的可视化图形效果。典型的效果有:落叶,火焰,爆炸,流星,云等等。 它不同于其它图形渲染,粒子是基于模糊来渲染。它的结果在基于像素下是不可预测的。粒子系统的参数描述了随机模拟的边界。传统的渲染技术实现粒子渲染效果很困难。有一个好消息是你可以使用QML元素与粒子系统交互。同时参数也可以看做是属性,这些参数可以使用传统的动画技术来实现动态效果。简单的模拟(Simple Simulation)绑定所有元素到...原创 2020-11-18 10:47:28 · 652 阅读 · 0 评论 -
QmlBook in chinese 编程之十五 ---(画布元素)
画布元素: Qt5中引进了画布元素(canvas element) ,允许脚本绘制。画布元素(canvaselement) 提供了一个依赖于分辨率的位图画布,你可以使用JavaScript脚本来绘制图形,制作游戏或者其它的动态图像。画布元素(canvas element) 是基于HTML5的画布元素来完成的。 画布元素(canvas element) 的基本思想是使用一个2D对象来渲染路径。这个2D对象包括了必要的绘图函数,画布元素(canvas element) 充当绘制画布。...原创 2020-11-06 16:38:14 · 829 阅读 · 0 评论 -
QmlBook in chinese 编程之十四 ---(XML模型(A Model from XML))
XML模型(A Model from XML) 由于XML是一种常见的数据格式,QML提供了XmlListModel元素来包装XML数据。这个元素能够获取本地或者网络上的XML数据,然后通过XPath解析这些数据。 下面这个例子展示了从RSS流中获取图片,源属性(source) 引用了一个网络地址,这个数据会自动下载。 上图只是为了看效果,对应代码图片是通过程序中下载下来然后在,显示,你就看到有些是比较慢。流畅度是gif我删除了很多,显示的成果。 当数据下载...原创 2020-11-04 10:39:59 · 308 阅读 · 0 评论 -
QmlBook in chinese 编程之十三 ---( 路径视图(The PathView))
路径视图(The PathView) 路径视图(PathView) 非常强大,但也非常复杂,这个视图由QtQuick提供。它创建了一个可以让子项沿着任意路径移动的视图。沿着相同的路径,使用缩放(scale) ,透明(opacity) 等元素可以更加详细的控制过程。 当使用路径视图(PathView) 时,你必须定义一个代理和一个路径。在这些之上,路径视图(PathView) 本身也可以自定义一些属性的区间。通常会使用pathItemCount属性,它控制了一次可见的子项总数。p...原创 2020-11-03 11:10:39 · 401 阅读 · 0 评论 -
QmlBook in chinese 编程之十二 -----(形变的代理(Shape-Shifting Delegates))
形变的代理(Shape-Shifting Delegates) 在使用链表时通常会使用当前项激活时展开的机制。这个操作可以被用于动态的将当前项目填充到整个屏幕来添加一个新的用户界面,或者为链表中的当前项提供更多的信息。 在下面的例子中,当点击链表项时,链表项都会展开填充整个链表视图(ListView) 。额外的间隔区域被用于添加更多的信息,这种机制使用一个状态来控制,当一个链表项展开时,代理项都能输入expanded(展开) 状态,在这种状态下一些属性被改变。 首先,包装器...原创 2020-11-02 17:25:19 · 208 阅读 · 0 评论 -
QmlBook in chinese 编程之十一 ----(代理(Delegate))
代理(Delegate) 每个代理访问到索引号或者绑定的属性,一些是来自数据模型,一些来自视图。来自模型的数据将会通过属性传递到代理。来自视图的数据将会通过属性传递视图中与代理相关的状态信息。 通常使用的视图绑定属性是ListView.isCurrentItem和ListView.view。第一个是一个布尔值,标识这个元素是否是视图当前元素,这个值是只读的,引用自当前视图。通过访问视图,可以创建可复用的代理,这些代理在被包含时会自动匹配视图的大小。在下面这个例子中,每个代理的wid...原创 2020-10-29 17:53:08 · 832 阅读 · 0 评论 -
QmlBook in chinese 编程之十 ---(动态视图(Dynamic Views))
动态视图(Dynamic Views) Repeater元素适合有限的静态数据,但是在真正使用时,模型通常更加复杂和庞大,我们需要一个更加智能的解决方案。QtQuick提供了ListView和GridView元素,这两个都是基于Flickable(可滑动) 区域的元素,因此用户可以放入更大的数据。同时,它们限制了同时实例化的代理数量。对于一个大型的模型,这意味着在同一个场景下只会加载有限的元素。ListView ListView与Repeater元素像素,它使用了一个...原创 2020-10-27 10:44:46 · 365 阅读 · 0 评论 -
QmlBook in chinese 编程之九 --(Basic Model)
基础模型(Basic Model) 最基本的分离数据与显示的方法是使用Repeater元素。它被用于实例化一组元素项,并且很容易与一个用于填充用户界面的定位器相结合。 最基本的实现举例,repeater元素用于实现子元素的标号。每个子元素都拥有一个可以访问的属性index,用于区分不同的子元素。在下面的例子中,一个repeater元素创建了10个子项,子项的数量由model属性控制。 先创建Box.qml文件:Rectangle { id: root ...原创 2020-10-23 13:59:45 · 218 阅读 · 0 评论 -
QmlBook in chinese 编程之八 ---(Animations and States and Transitions)
动画分组(Grouped Animations) 通常使用的动画比一个属性的动画更加复杂。例如你想同时运行几个动画并把他们连接起来,或者在一个一个的运行,或者在两个动画之间执行一个脚本。动画分组提供了很好的帮助,作为命名建议可以叫做一组动画。有两种方法来分组:平行与连续。你可以使用SequentialAnimation(连续动画) 和ParallelAnimation(平行动画) 来实现它们,它们作为动画的容器来包含其它的动画元素。我们先看下SequentialAnimati...原创 2020-10-21 15:08:28 · 174 阅读 · 0 评论 -
QmlBook in chinese 编程之七 ---(Animations)
动画(Animations) 动画被用于属性的改变。一个动画定义了属性值改变的曲线,将一个属性值变化从一个值过渡到另一个值。动画是由一连串的目标属性活动定义的,平缓的曲线算法能够引发一个定义时间内属性的持续变化。所有在QtQuick中的动画都由同一个计时器来控制,因此它们始终都保持同步,这也提高了动画的性能和显示效果。 先抛个砖头,简单的效果图如下:...原创 2020-10-20 16:04:20 · 257 阅读 · 0 评论 -
QmlBook in chinese 编程之六 ---(Input Element)
输入元素(Input Element)我们已经使用过MouseArea(鼠标区域) 作为鼠标输入元素。这里我们将更多的介绍关于键盘输入的一些东西。我们开始介绍文本编辑的元素:TextInput(文本输入) 和TextEdit(文本编辑)1.文本输入(TextInput)文本输入允许用户输入一行文本。这个元素支持使用正则表达式验证器来限制输入和输入掩码的模式设置。import QtQuick 2.0Rectangle { width: 200 height: 80..原创 2020-10-19 15:52:09 · 274 阅读 · 0 评论 -
QmlBook in chinese 编程之五---(定位元素与布局元素)
定位元素(Positioning Element)有一些QML元素被用于放置元素对象,它们被称作定位器,QtQuick模块提供了Row,Column,Grid,Flow用来作为定位器。 我们定义了 红色(red) ,蓝色(blue) ,绿色(green) ,高亮(lighter) 与黑暗(darker) 方块,每一个组件都包含了一个48乘48的着色区域定义RedSquare.qmlRectangle { width: 48 height: 48 color:...原创 2020-10-15 16:18:12 · 292 阅读 · 0 评论 -
QmlBook in chinese 编程之四 ----(简单的转换(Simple Transformations))
简单的转换(Simple Transformations) 转换操作改变了一个对象的几何状态。QML元素对象通常能够被平移,旋转,缩放。 本章其实主要讲解: rotation(旋转)scale(缩放等功能) x,y 位移,由于比较基础我们开始吧: 首先我们要创建一个ClickableImage.qml 文件为ClickableImage元素,这样可以抽象出来供他人使用;import QtQuick 2.0Image { id: root signa...原创 2020-10-15 10:54:52 · 192 阅读 · 0 评论 -
QmlBook in chinese 编程之三 ----(组件 Compontents Button示例)
简单说明:本例子为 QmlBook in chinese 书上面的例子,这里我自己写了一遍,体验一下。也是记录一下qml学习的知识点组件(Compontents) 一个组件是一个可以重复使用的元素,QML提供几种不同的方法来创建组件。但是目前我们只对其中一种方法进行讲解:一个文件就是一个基础组件。一个以文件为基础的组件在文件中创建了一个QML元素,并且将文件以元素类型来命名(例如Button.qml) 。你可以像任何其它的QtQuick模块中使用元素一样来使用这个组件。在我们下面...原创 2020-10-13 13:30:20 · 190 阅读 · 0 评论 -
QmlBook in chinese 编程之二 ------(语法与基本元素 basic )
本章在QmlBook in chinese中第4章节中的基础的几个例子,同时对qml最基础的东西做个记录,可能学过qml的小伙伴们基本上可以不用看这篇文章了,都是非常基础的东西。 第一个例子:效果图代码:import QtQuick 2.12import QtQuick.Window 2.12Rectangle{ // name this element root id:root // properties: <name&g...原创 2020-10-10 17:51:21 · 469 阅读 · 0 评论 -
QmlBook in chinese 编程之一 ------(大风车吱悠悠的转)
之前说要把qml搞一下,那就搞一下吧,本章例子是QmlBook in chinese 中的第一个开门见山的例子,大风车。后面我就按照这本书来给大家记录下,大家也可以去对应官网去看例子,基本上例子都是在学习的。 老规矩,先看效果图吧:先做好图片的准备 工程建立以后,然后就可以编写对应代码了代码部分:import QtQuick 2.12//import QtQuick.Window 2.12import QtGraphicalEffects 1.0...原创 2020-10-10 16:06:06 · 734 阅读 · 0 评论 -
QT quick (qml)体验anchors
没错,开始了QML的编程学习了,这个后期我要与Android编程对比来学习,这里简单的记录一下:十分的简单,来上代码吧:import QtQuick 2.12import QtQuick.Window 2.12Window { visible: true width: 640 height: 480 title: qsTr("Hello World") Rectangle { width: 300; heigh原创 2020-06-10 23:18:17 · 361 阅读 · 0 评论