Qt Qml编程 基础部分 认识qml

学习目标:认识Qml编程

学习内容

qml介绍

Qt QML 是一个用来设计和开发Qt应用程序用户界面的声明性语言。QML 是 Qt 的元对象语言(Meta-Object Language)的缩写。它与 C++ 一起使用,来为 Qt 应用程序创建用户界面。

QML 是一个标记语言,它允许开发人员使用类似 HTML 和 CSS 的语法来创建用户界面。通过 QML,开发人员可以使用声明式的方式进行 UI 开发,而无需编写大量的代码。

与传统的使用 C++编写 UI 代码相比,QML 提供了以下主要优点:

  1. - 声明式设计:开发人员直接在 QML 文件中撰写 UI 元素和布局,无需为每个组件编写类。
  2. - 可视化开发:可以使用 Qt Creator 实时预览 QML 设计,而无需编译运行。
  3. - 响应式设计:QML 支持通过纯 CSS 方式搭建适配不同屏幕的响应式 UI。
  4. - 动画设计:QML 内置丰富的动画系统,可实现协同复杂的 UI 变换。
  5. - 跨平台开发:使用 QML 构建的 UI 可以在安卓、iOS、Windows 等各平台上使用。

所以总体来说,QML 为 Qt 提供了一种面向对象的声明式语言,极大提高了交互式 UI 开发的效率。这也是 Qt 成为跨平台应用开发的首选方案的重要原因之一。

基本数据类型

QML提供了以下主要的数据类型:

- Number:支持整型和浮点型数字,如123, 3.14等。- String:字符串,使用双引号括起来如"hello"。- Boolean:逻辑型,true或false。- List:列表,用中括号括起来存放其他类型,如[1,2,3]。- Object:由QML自定义的类型或JavaScript对象实例。- Variant:可以是任何其他类型,通常作为容器使用。 - Enum:枚举。- Date:日期时间。- Color:颜色,如Qt.color("red")。 - Point:一维点坐标。- Size:尺寸。- Vector2D:二维向量。- Vector3D:三维向量。- Vector4D:四维向量。- Matrix4x4:四维矩阵。

基本控件

主要的QML控件有:

  • Rectangle - 矩形区域,可以设置矩形的大小、颜色等属性,用于绘制可视区域。它是QML UI开发的基础元素。

  • Text - 文本控件,用于显示单行或多行文本。它可以设置文本内容、字体、颜色等属性。

  • Image - 图像控件,用于显示图片资源。可以设置源图片、缩放模式等属性。

  • Button - 按钮控件,用于响应点击或按下事件。它可以设置文本、图片等内容来识别按钮。

  • TextField - 单行文本输入框,允许用户输入和修改文本内容。可以设置输入限制、自动Completion等。

  • TextArea - 多行文本输入框,用于显示和编辑多行文本。

  • ListView - 列表视图控件,用于呈现竖直或水平方向的滚动列表。一般配合数据模型使用。

  • GridView - 网格视图控件,可以将子项呈现在二维网格中。

以上是Qt QML中一些常用的基础控件,它们提供强大的可视化编程能力,可以实现多种精致的用户界面。

qml demo示例

import QtQuick 2.12
import QtQuick.Window 2.12import QtQuick.Controls 2.5  //使用Qt控件头文件
Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Button{id:btn1text: "退出测试"anchors.bottom: parent.bottom  //语义:基于父类的底部定位anchors.bottomMargin: 100onClicked: {Qt.quit();}}Rectangle {id: greenRectx:200y:200width: 50; height: 50color: "green"Rectangle {id: blueRectwidth: 10; height: 10color: "blue"//语义:基于父类元素内的左上角 定位anchors.left: parent.leftanchors.top: parent.top}}CheckBox{id:check1text: qsTr("广东省广州市")checked: true;x:100;y:100;}CheckBox{id:check2text: qsTr("广东省广州市")checked: true;x:50;y:50;//修改指示器indicator: Rectangle{//默认尺寸implicitHeight: 60implicitWidth: 60//点击颜色border.color: check2.down?"#18a81a":"" // 边框颜色radius: 30Rectangle{implicitHeight: 30 //语义 默认值implicitWidth: 30x:15;y:15;radius: 30color:  check2.down?"#18a81a":""}}//修改字体contentItem: Text {id: font1text:check2.text//字体大小font.pixelSize: 30color: check2.down?"#18a81a":""//修改对齐方式verticalAlignment: Text.AlignVCenterleftPadding:check2.implicitIndicatorWidth+check2.spacing}}Rectangle{id:irectx:250;y:250;width: 200;height: 60;state: "默认";states:[  //状态列表State {name: "默认"PropertyChanges {//定义属性值的变化过程,但不产生动画效果。target: irectcolor:"red"}},State {name: "blue"PropertyChanges {target: irectcolor:"blue"}}]//过渡效果transitions: [Transition {from: "默认"to: "blue"PropertyAnimation{//用于在一段时间内平滑过渡地改变属性值,实现动画效果。properties: "color,width,height"duration: 2000}}]Button{id:startanchors.top:irect.bottomanchors.left: irect.lefttext: "开始"onClicked: irect.state="blue";}Button{id:restartanchors.top:irect.bottomanchors.right: irect.righttext: "复位"onClicked: irect.state="默认";}}
}

 

 总结

语义
 

implicitHeight   默认值
anchors.bottom 底部基于谁定位
radius 圆角
down   控件当前是否被按下的状态
onClicked 点击松开信号
verticalAlignment 对齐方式
pixelSize 字体大小

关于qml更多知识可学习参考,作者觉得编程学习意义更大。所以文字描述就少一些,只提重点。 

【QML初学者文档】一问读懂QML基础开发(内附大量简单源码)-CSDN博客

最后附上源代码链接
对您有帮助的话,帮忙点个star

Qt demo: 学习qt过程 (gitee.com)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/45664.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Chapter 1:数据结构前言

在数字化的世界里,我们每天都在与数据打交道。然而,你是否曾想过,这些数据是如何被组织、存储和处理的?这就是数据结构的魅力所在。 数据结构,简单来说,就是数据的组织方式。它决定了我们如何高效地访问和操…

一文学会鉴别“套壳”ChatGPT模型

一文学会鉴别“套壳”ChatGPT模型 随着ChatGPT等明星模型的诞生,市场上也开始出现一些“套壳”现象,即部分模型表面标榜原创或先进,实则在核心算法上与知名模型高度相似。作为技术探索者,如何拨开迷雾,识别这些“李鬼…

/EtherCATInfo/Descriptions/Devices/Device/SubDevice/@Hideable

SubDevice/Hideable 属性 /EtherCATInfo/Descriptions/Devices/Device/SubDevice/Hideable 出现次数:可选 (0…1)数据类型:布尔值 该属性仅应在列出所有子设备的主设备的 ESI 文件中使用。该属性表示配置工具是否可以隐藏相应的子设备。只有不需要配置…

sublime text中的配置好用的报错插件,代码检查插件sublimelinter,cppcheck,对C++的环境进行配置-2024.7.13版

文章目录 一,sublimelinter能实现什么?二、sublimelinter 的安装教程配置sublime text 的基础环境配置cppcheck的环境变量配置sublimelinter的配置文件 一,sublimelinter能实现什么? 因为sublime 不自带任何的代码检查工具&#…

理解CNN中的Batch Normalization (补充 知乎博主)

理解CNN中的Batch Normalization - 知乎 (zhihu.com) https://zhuanlan.zhihu.com/p/403073810 BN层常见有针对1d特征(全连接层后面的) 举一个简单的例子吧 解释在全连接层(Fully Connected Layer, FC Layer)后加 BN 层时&#…

基于Adaboost的数据分类算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于Adaboost的数据分类算法matlab仿真,分别对比线性分类和非线性分类两种方式。 2.测试软件版本以及运行结果展示 MATLAB2022A版本运行 (完整程序…

京鸿鑫源元宇宙革新探索:开启未来零售新纪元

随着科技的不断演进,元宇宙这一概念已成为科技领域的热门话题。作为中国零售业的佼佼者,京鸿鑫源零售公司正积极拥抱元宇宙技术,为用户带来前所未有的购物体验。本文将探讨京鸿鑫源如何在元宇宙领域进行创新实践,以及这些实践如何…

网络安全那些梗

网络安全领域的梗往往以幽默、讽刺或夸张的方式反映了该领域的某些现象、挑战或误解。以下是一些网络安全相关的梗: 关掉服务器是最有效的安全方法:这个梗源自一个笑话,讲述了一位程序员因误解妻子的话而只买了一个包子回家,随后被…

redis高性能得原因

Redis 之所以能够实现高性能和快速响应,主要归功于以下几个关键因素: ### 1. 内存存储 Redis 将所有数据存储在内存中,而不是磁盘上。内存的读写速度远远快于磁盘,因此 Redis 的数据访问速度非常快。 ### 2. 单线程模型 Redis 使…

C++:strcut与class的区别

在C中,struct和class在语法上非常相似,但它们之间确实存在一些关键的差异,这些差异主要体现在成员的默认访问权限和继承的默认方式上。然而,从更广泛的角度来看,它们都可以用来定义自定义数据类型,包含数据…

更新商品前端接口编写

文章目录 新增页面书写写表单价格符号的显示然后状态的书写后端枚举书写时间书写使用组件 新增页面书写 书写直接复制页面 写表单的绑定信息 然后绑定表单 表单绑定还有表单数据的绑定 标签中ref的作用就是将 该组件注册到vue对象的ref属性中 那么在vue运行的时候,会加载所…

fullcalendar基础使用

fullcalendar日历插件&#xff0c;下面是实现的一个基础模版实现任务的添加修改操作。 <div><div id"calendar" ref"calendarRef"></div><el-dialogv-model"dialogTableVisible"title"添加任务"width"500&…

利用PaddleOCR进行图片的跨页表格提取与合并(PDF扫描版)

利用PaddleOCR进行扫描版PDF的跨页表格提取与合并 前言1.环境准备2.文件路径与阈值设置3.定义辅助函数4.处理PDF文件5.总结 前言 在处理PDF文件中的表格时&#xff0c;常常会遇到表格跨页的情况。并且一些PDF文件为扫描版。这种情况下&#xff0c;如果要将跨页的表格合并为一个…

php将png转为jpg,可设置压缩率

/** * 将PNG文件转换为JPG文件 * param $pngFilePath string PNG文件路径 * param $jpgFilePath string JPG文件路径 * param $quality int JPG质量,0-100,值越低&#xff0c;压缩率越高 * return void * throws Exception */ function convertPngToJpg($pngFilePath, $jpgFile…

Golang:数据科学领域中的高性能并发编程新星

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 文章内容 📒📝 并发性能的卓越表现📝 系统级工具的便捷性📝 语言设计的简洁性📝 强类型系统的严格性📝 版本兼容性的稳定性📝 内置工具的全面性⚓️ 相关链接 ⚓️📖 介绍 📖 在数据科学和机器学习的广阔天地…

Web3 社交领域的开发技术

Web3 社交领域的开发技术主要包括以下几种&#xff0c;随着 Web3 技术的不断发展&#xff0c;Web3 社交领域将会出现更多新的技术和应用场景。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1. 区块链技术 区块链技术是 Web3 社交的…

Arcgis横向图例设置

想把这个图例改成横向的 点击图例的属性&#xff0c;找到样式

Sklearn 入门教程:开启机器学习之旅

一、引言 在当今数据驱动的时代&#xff0c;机器学习已经成为解决各种实际问题的强大工具。Scikit-learn&#xff08;简称 sklearn&#xff09;是 Python 中广泛使用的机器学习库&#xff0c;它提供了丰富的算法和工具&#xff0c;使得构建和训练机器学习模型变得简单而高效。本…

虚幻引擎ue5游戏运行界面白茫茫一片,怎么处理

根剧下图顺序即可调节游戏运行界面光照问题&#xff1a; 在大纲里找到post&#xff0c;然后选中它&#xff0c;找到Exposure 把最低亮度和最高亮度的0改为1即可

C# Winform 系统方案目录的管理开发

在做一个中等复杂程度项目时&#xff0c;我们通常有系统全局配置&#xff0c;还要有对应的方案目录的管理和更新。 比如我们有如下需求&#xff1a;开发一个方案管理&#xff0c;可以新建、打开和保存方案&#xff0c;同时还需要保存方案中的各种文件。我设计的采用目录管理和…