QML入门之基本元素

2024-09-08 12:36
文章标签 入门 元素 基本 qml

本文主要是介绍QML入门之基本元素,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

        元素分为可视元素与非可视元素,可能元素例如Rectangle、Button等。非可视元素如Timer(定时器)、MouseArea(鼠标区域)等。非可视元素一般用于操作可视元素。

基础元素

Item

Item(基础元素对象)是所有可视元素的基础对象,它们都继承自Item。可是元素存在以下共有属性。

Group(分组)Properties(属性)
Geometry(几何属性)x,y(坐标)定义了元素左上角的位置,width,height(长和宽)定义元素的显示范围,z(堆叠次序)定义元素之间的重叠顺序。
Layout handling(布局操作)anchors(锚定),包括左(left),右(right),上(top),下(bottom),水平与垂直居中(vertical center,horizontal center),与margins(间距)一起定义了元素与其它元素之间的位置关系。
Key handlikng(按键操作)附加属性key(按键)和keyNavigation(按键定位)属性来控制按键操作,处理输入焦点(focus)可用操作。
Transformation(转换)缩放(scale)和rotate(旋转)转换,通用的x,y,z属性列表转换(transform),旋转基点设置(transformOrigin)。
Visual(可视化)不透明度(opacity)控制透明度,visible(是否可见)控制元素是否显示,clip(裁剪)用来限制元素边界的绘制,smooth(平滑)用来提高渲染质量。
State definition(状态定义)states(状态列表属性)提供了元素当前所支持的状态列表,当前属性的改变也可以使用transitions(转变)属性列表来定义状态转变动画。

Rectangle

Rectangle是基本元素对象的扩展,有一个颜色可以来填充它,并且支持边界定义、圆角定义等。 

Rectangle {id: rect1x: 12; y: 12width: 76; height: 96color: "lightsteelblue"
}
Rectangle {id: rect2x: 112; y: 12width: 76; height: 96border.color: "lightsteelblue"border.width: 4radius: 8
}

 其中,

  • color的值可以是字符串,例如"red",也可以是RGB字符串,例如"#AA3344"。
  • Rectangle在没有width和height的情况下将会不可见。

Text 

文本元素即用来显示字符串的元素了。其包含text、color、font(font.family、font.pixelSize)等属性。

  • 可以使用horizontalAlignment与verticalAlignment属性来设置它的对齐效果。
  • 可以使用style和styleColor属性来配置文字的外框效果,浮雕效果或者凹陷效果。
  • 长文本可以使用elide属性去控制左边、右边或中间省略,并以...表示。
  • 换行显示需要指定wrapMode,需要配合宽度才能生效。

Image

        图像控件可以显示各种图片格式。其source属性设置图片的路径。fillMode控制图像的大小调整相关。

Image {id: imageanchors.fill: parentwidth: 100height: 100source: "qrc:/icon/ico/background.png"fillMode: Image.PreserveAspectFit
}
  • 使用QQmlImageProvider你可以通过C++代码来创建自己的图像提供器,这允许你动态创建图像并且使用线程加载。

MouseArea

Rectangle {id: rect1x: 12; y: 12width: 76; height: 96color: "lightsteelblue"MouseArea {id: areawidth: parent.widthheight: parent.heightonClicked: rect2.visible = !rect2.visible}
}Rectangle {id: rect2x: 112; y: 12width: 76; height: 96border.color: "lightsteelblue"border.width: 4radius: 8
}

        鼠标区域是用来给上层元素绑定鼠标事件的,鼠标事件卸载onClicked中。可见上面的效果为在rect1中点击了之后rect2由可见变为不可见,再次点击又变为可见。

这篇关于QML入门之基本元素的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1148127

相关文章

Spring WebClient从入门到精通

《SpringWebClient从入门到精通》本文详解SpringWebClient非阻塞响应式特性及优势,涵盖核心API、实战应用与性能优化,对比RestTemplate,为微服务通信提供高效解决... 目录一、WebClient 概述1.1 为什么选择 WebClient?1.2 WebClient 与

Spring Boot 与微服务入门实战详细总结

《SpringBoot与微服务入门实战详细总结》本文讲解SpringBoot框架的核心特性如快速构建、自动配置、零XML与微服务架构的定义、演进及优缺点,涵盖开发环境准备和HelloWorld实战... 目录一、Spring Boot 核心概述二、微服务架构详解1. 微服务的定义与演进2. 微服务的优缺点三

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

从入门到进阶讲解Python自动化Playwright实战指南

《从入门到进阶讲解Python自动化Playwright实战指南》Playwright是针对Python语言的纯自动化工具,它可以通过单个API自动执行Chromium,Firefox和WebKit... 目录Playwright 简介核心优势安装步骤观点与案例结合Playwright 核心功能从零开始学习

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更

C#连接SQL server数据库命令的基本步骤

《C#连接SQLserver数据库命令的基本步骤》文章讲解了连接SQLServer数据库的步骤,包括引入命名空间、构建连接字符串、使用SqlConnection和SqlCommand执行SQL操作,... 目录建议配合使用:如何下载和安装SQL server数据库-CSDN博客1. 引入必要的命名空间2.

Java中的数组与集合基本用法详解

《Java中的数组与集合基本用法详解》本文介绍了Java数组和集合框架的基础知识,数组部分涵盖了一维、二维及多维数组的声明、初始化、访问与遍历方法,以及Arrays类的常用操作,对Java数组与集合相... 目录一、Java数组基础1.1 数组结构概述1.2 一维数组1.2.1 声明与初始化1.2.2 访问

从入门到精通MySQL联合查询

《从入门到精通MySQL联合查询》:本文主要介绍从入门到精通MySQL联合查询,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下... 目录摘要1. 多表联合查询时mysql内部原理2. 内连接3. 外连接4. 自连接5. 子查询6. 合并查询7. 插入查询结果摘要前面我们学习了数据库设计时要满

C# 比较两个list 之间元素差异的常用方法

《C#比较两个list之间元素差异的常用方法》:本文主要介绍C#比较两个list之间元素差异,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. 使用Except方法2. 使用Except的逆操作3. 使用LINQ的Join,GroupJoin

从入门到精通C++11 <chrono> 库特性

《从入门到精通C++11<chrono>库特性》chrono库是C++11中一个非常强大和实用的库,它为时间处理提供了丰富的功能和类型安全的接口,通过本文的介绍,我们了解了chrono库的基本概念... 目录一、引言1.1 为什么需要<chrono>库1.2<chrono>库的基本概念二、时间段(Durat