qml学习笔记(二):可视化元素基类Item详解(上半场anchors等等)
原博主博客地址:http://blog.csdn.net/qq21497936
本文章博客地址:http://blog.csdn.net/qq21497936/article/details/78516201
qml学习笔记(二):可视化元素基类Item详解(上半场anchors等等)
本学章节笔记主要详解Item元素(上半场主要涉及anchors锚),因为所有可视化的界面元素都继承于Item,熟悉Item后,不同的继承子类,有其定制的属性(从几个到几十个不等)。
《Qt实用技巧:在Qt Gui程序中嵌入qml界面(可动态覆盖整个窗口)》:
http://blog.csdn.net/qq21497936/article/details/78486552
《qml学习笔记(一):界面元素初探》:
http://blog.csdn.net/qq21497936/article/details/78498575
《qml学习笔记(三):可视化元素基类Item详解(下半场)》
http://blog.csdn.net/qq21497936/article/details/78522816
基类Item介绍
基类Item是所有可视化子类的父类,它不是可见的,但是它定义了所有通用元素通用的属性,比如x、y、width、height、anchoring和handingsuppourt。
几个Item的使用示例
Image示例
- Item{
- Rectangle{
- width:1000;
- height:1000;
- color:"black";
- Image { // Image默认的背景是透明
- source:"1.png"// 相对于.qml的路径
- }
- Image{
- x:80
- y:200
- width:100
- height:100
- source:"1.png"
- }
- Image{
- x:190
- y:400
- width:100
- height:100
- fillMode:Image.Tile
- source:"1.png"
- }
- }
- }
效果如下图:
捕捉键盘
- Item{
- focus:true
- Keys.onPressed:{
- if(event.key==Qt.Key_Left){
- console.log("moveleft");
- event.accepted=true;
- }
- }
- Keys.onReturnPressed:
- console.log("Pressedreturn");
- }
输入处理
- Rectangle{
- width:100;
- height:100
- FocusScope{
- id:focusScope
- focus:true
- TextInput{
- id:input
- focus:true
- }
- }
- }
效果如图
属性详解
activeFocus : bool [可读写][指示焦点:窗口是否获取焦点]
此属性指示元素是否具有活动焦点。如果指示是真的,这个对象是目前接收键盘输入,或是一个FocusScope为父对象的对象,目前接收键盘输入。
通常,此属性是通过设置焦点在其子元素(继承于Item)和其外围FocusScope对象获得。在下面的例子中,TextInput和FocusScope对象会有活跃的热点,而根矩形对象将不会。
activeFocusOnTab : bool [可读写][设置item是否可被tab选中,默认为false]
anchors:一组属性,提供了以元素相互关系为基准的定位方式,主要包括以下的:
anchors.top : AnchorLine [可读写][顶部边界]
- Item {
- Image {
- id: pic;
- x:100;
- y:200;
- source: "./1.png";
- }
- Text {
- id: label;
- anchors.top: pic.bottom; // 对象的顶部是与pic的底部高度相同
- text: "hello world";
- color: "black";
- font.pointSize: 14; // 大于0的值,与设备无关font.pixelSize:单位像素,依赖于设备
- }
- }
anchors.bottom : AnchorLine [可读写][底部边界]
- Item {
- Image {
- id: pic;
- x:100;
- y:200;
- source: "./1.png";
- }
- Text {
- id: label;
- anchors.bottom: pic.bottom; // 对象的顶部是与pic的底部高度相同
- text: "hello world";
- color: "black";
- font.pointSize: 14; // 大于0的值,与设备无关font.pixelSize:单位像素,依赖于设备
- }
- }
anchors.left : AnchorLine [可读写][左边界]
- Item {
- Image {
- id: pic;
- x:100;
- y:10;
- source: "./1.png";
- }
- Text {
- id: label;
- anchors.left: pic.right; // 对象的顶部是与pic的底部高度相同
- text: "hello world";
- color: "black";
- font.pointSize: 14; // 大于0的值,与设备无关font.pixelSize:单位像素,依赖于设备
- }
- }
anchors.right : AnchorLine [可读写][右边界]
- Item {
- Image {
- id: pic;
- x:100;
- y:10;
- source: "./1.png";
- }
- Text {
- id: label;
- anchors.right: pic.right; // 对象的顶部是与pic的底部高度相同
- text: "hello world";
- color: "black";
- font.pointSize: 14; //大于0的值,与设备无关font.pixelSize:单位为像素,依赖于设备
- }
- }
anchors.horizontalCenter : AnchorLine [可读写][水平中心]
- Item {
- Image {
- id: pic;
- source: "./1.png";
- }
- Text {
- id: label
- // 对象的水平中心 以 pic的水平中心 为中心
- anchors.horizontalCenter: pic.horizontalCenter;
- text: "hello world";
- color: "white";
- font.pointSize: 14; // 大于0的值,与设备无关font.pixelSize:单位像素,依赖于设备
- }
- }
anchors.verticalCenter : AnchorLine [可读写][垂直中心]
- Item {
- Image {
- id: pic;
- x:100;
- y:10;
- source: "./1.png";
- }
- Text {
- id: label;
- anchors.verticalCenter: pic.bottom; // 对象的顶部是与pic的底部高度相同
- text: "hello world";
- color: "black";
- font.pointSize: 14; //大于0的值,与设备无关font.pixelSize:单位像素,依赖于设备
- }
- }
anchors.baseline : AnchorLine AnchorLine [可读写][baseline是指的文本所在的线,如果item没有文字的话baseline就和top的位置是相同的]
- Item {
- Image {
- id: pic;
- x:40;
- y:40;
- source: "./1.png";
- }
- Text {
- id: label;
- anchors.baseline: pic.top;
- text: "hello world";
- color: "black";
- font.pointSize: 14; //大于0的值,与设备无关font.pixelSize:单位像素,依赖于设备
- }
- }
anchors.fill : Item [可读写][用本对象填充指向的对象元素]
- Item{
- Image{
- id:pic;
- x:40;
- y:40;
- source:"./1.png";
- }
- Rectangle{
- id:label;
- anchors.fill:pic; // 此时设置width和height,测试无效,直接填满pic
- color:"black";
- }
- }
anchors.centerIn : Item [可读写][用本对象的中心对准指向对象的中心,开始辐射出去,区域可大于设置指向的对象]
- Item {
- Image {
- id: pic;
- x:40;
- y:40;
- source: "./1.png";
- }
- Rectangle {
- id: label;
- width: 60;
- height: 60;
- anchors.centerIn: pic; // 以pic的中心为该对象中心进行辐射(区域可大于pic)
- color: "black";
- }
- }
anchors.margins : real [可读写][设置所有(top,bottom,left,right)边框的宽度]
- Item {
- Image {
- id: pic;
- x:40;
- y:40;
- source: "./1.png";
- }
- Rectangle {
- id: label;
- width: 60;
- height: 60;
- color: "black";
- anchors.margins: 10;
- anchors.left: pic.right;
- }
- Rectangle {
- id: label2;
- width: 60;
- height: 60;
- color: "black";
- anchors.margins: 10;
- anchors.top: pic.bottom;
- }
- }
- Item {
- Rectangle {
- id: label;
- width: 60;
- height: 60;
- color: "red";
- anchors.margins: 50;
- }
- Rectangle {
- id: label2;
- width: 60;
- height: 60;
- color: "black";
- anchors.margins: 50; // 只对本对象设置anchors边框有效
- anchors.top: label.bottom;
- }
- Rectangle {
- id: labe3;
- width: 60;
- height: 60;
- color: "red";
- anchors.margins: 50; // 只对本对象设置anchors边框有效
- anchors.top: labe2.bottom;
- }
- }
anchors.topMargin : real [可读写][设置top边框的宽度,参照margins]
anchors.bottomMargin : real [可读写][设置bottom边框的宽度,参照margins]
anchors.leftMargin : real [可读写][设置left边框的宽度,参照margins]
anchors.rightMargin : real [可读写][设置right边框的宽度,参照margins]
anchors.horizontalCenterOffset : real [可读写][设置水平中心偏移量]
- Item {
- Image {
- id: pic;
- source: "./1.png";
- }
- Rectangle {
- width: 30;
- height: 30;
- id: rect;
- color: "black";
- // 对象的水平中心 以 pic的水平中心 为中心
- anchors.horizontalCenter: pic.horizontalCenter;
- // 注意:horizomtalCenterOffset针对于horizontalCenter
- anchors.horizontalCenterOffset: 50;
- }
- }
anchors.verticalCenterOffset : real [可读写][参照设horizontalCenter,与其类似]
anchors.baselineOffset : real[可读写][参照设horizontalCenter,与其类似]
anchors.alignWhenCentered : bool [可读写][指定不使用半个像素绘制图形,当需要居中一个elements,宽度或者高度是基数,不使用半个像素绘制,对此处理解有疑问]
下章节
原博主博客地址:http://blog.csdn.net/qq21497936
本文章博客地址:http://blog.csdn.net/qq21497936/article/details/78516201
转载于:https://www.cnblogs.com/senior-engineer/p/7986866.html
qml学习笔记(二):可视化元素基类Item详解(上半场anchors等等)相关推荐
- python列表和元组的应用_python学习笔记之列表(list)与元组(tuple)详解
前言 最近重新再看python的基础知识,感觉自己还是对于这些知识很陌生,需要用的时候还是需要翻书查阅,还是先注重基础吧--我要重新把python的教程阅读一遍,把以前自己忽略的部分学习,加强练习和记 ...
- moviepy音视频剪辑:视频剪辑基类VideoClip详解
☞ ░ 前往老猿Python博文目录 ░ 一.概述 在<moviepy音视频剪辑:moviepy中的剪辑基类Clip详解>和<moviepy音视频剪辑:moviepy中的剪辑基类Cl ...
- 【matcovnet学习笔记】objective,top1error,top5error详解
[matcovnet学习笔记]objective,top1error,top5error详解 排名前1和前5的错误率是衡量某些解决方案成功与否的重要单位 ,要理解这三个概念,关键是要看懂下面这个多类误 ...
- Ext.Net学习笔记22:Ext.Net Tree 用法详解
上面的图片是一个简单的树,使用Ext.Net来创建这样的树结构非常简单,代码如下: <ext:TreePanel runat="server"><Root> ...
- Java记录 -22- Java的基类Object详解
Java的基类Object详解 Java的JDK文档要经常查阅使用,最好查看英文的文档. Oracle官方在线 Java API Specifications http://www.oracle.co ...
- 【Azure 架构师学习笔记】-Azure Data Factory (4)-触发器详解-事件触发器
本文属于[Azure 架构师学习笔记]系列. 本文属于[Azure Data Factory]系列. 接上文[Azure 架构师学习笔记]-Azure Data Factory (3)-触发器详解-翻 ...
- 【转】Asp.net控件开发学习笔记整理篇 - WebControl基类
最近一直在做MVC项目,对于WEBFORM 好像快忘记了.周末无聊,顺带看看他人的笔记.再次温习下. 复习大纲: 导航.页面生命周期及其它导论 一.服务器控件生命周期 二.控件开发基础 三.Asp.n ...
- 【C++】【学习笔记】【递归与回溯问题详解与例题】排列问题;组合问题;二维平面回溯;flood fill问题;搜索问题(八皇后);
目录 七.递归和回溯 1.回溯 2.回溯应用 - 排列问题 2.回溯应用 - 组合问题 3.回溯应用 - 二维平面 4.回溯应用 - floodfill算法 问题 4.回溯应用 - 搜索问题 - 八皇 ...
- Apollo星火计划学习笔记第六讲——Apollo感知模块详解实践2感知基础
Apollo学习笔记 零.目录 一.Apollo感知框架介绍 1.1 检测和分类 1.2 跟踪 1.3 感知模块代码结构 1.3.1 感知模块入口 二.Lidar障碍物检测.红绿灯识别 2.1 Lid ...
最新文章
- jQuery中的.height()、.innerHeight()和.outerHeight()
- 数学战神app(小学生四则运算app)进度
- asm冗余 oracle_oracle asm 磁盘管理什么场景该用什么样的冗余方式
- SpringBoot阿里巴巴Fastjson的一些常用配置
- 用C/C++扩展你的PHP
- FISCO BCOS 区块链 设置交易最晚处理区块高度
- php操作mysql工具类_PHP操作数据库的工具类
- PMP试题 | 每日一练,快速提分 9.3
- 汇通达网络IPO取发行区间下限定价,多家投资方将出现账面亏损
- openpyxl插入分页符
- 天线基础知识(四)接收灵敏度
- Racket读写JSON
- 筒灯可以执行CAN/ULC-S101测试吗?与BS 476-21区别大吗?
- 对d3d9里面的函数挂钩实现透视
- 手动给tabcontrol的tabPage加图标图片方法
- web.py中通过POST接收Json数据解析的bug
- 三元运算符 php_使用PHP三元运算符
- 如何登录锐捷设备(网关篇)
- 戒指的带法,终于收齐了
- UE4地编基础-材质蓝图篇
热门文章
- Python学习笔记1 Python基础
- TensorFlow基本计算单元:代码示例
- html离开页面时,js实现用户离开页面前提示是否离开此页面的方法(包括浏
- matlab pup,matlab利用bar函数画不同颜色直方图
- arm-linux-ld中的参数,arm-linux-ld指令详解
- x86架构手机_都是芯片,为什么电脑CPU不能用在手机里?
- android zxing作用,Android / ZXing不再有效
- cap mysql_.NetCore关于Cap(RabbitMQ)结合MySql使用出现MySql相关类冲突问题解决办法
- MySQL数据库实用教程考核_《MySQL数据库实用教程》郑明秋,蒙连超,赵海侠【pdf】...
- Iar环境c语言调用汇编函数,如何在IAR EWARM中通过内联汇编程序在另一个模块中调用C函数?...