码迷,mamicode.com
首页 > 其他好文 > 详细

qml学习笔记(二):可视化元素基类Item详解(上半场anchors等等)

时间:2017-12-05 14:57:50      阅读:271      评论:0      收藏:0      [点我收藏+]

标签:ons   技巧   中心   gravity   when   tom   offset   pre   term   

原博主博客地址: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示例

 

[css] view plain copy
 
  1. Item{  
  2.     Rectangle{  
  3.         width:1000;  
  4.         height:1000;  
  5.         color:"black";  
  6.         Image { // Image默认的背景是透明  
  7.         source:"1.png"// 相对于.qml的路径  
  8.         }  
  9.         Image{  
  10.             x:80  
  11.             y:200  
  12.             width:100  
  13.             height:100  
  14.             source:"1.png"  
  15.         }  
  16.         Image{  
  17.             x:190  
  18.             y:400  
  19.             width:100  
  20.             height:100  
  21.             fillMode:Image.Tile  
  22.             source:"1.png"  
  23.         }  
  24.     }  
  25. }  


    效果如下图:

 

技术分享图片

 

捕捉键盘

 

 

[css] view plain copy
 
  1. Item{  
  2.     focus:true  
  3.     Keys.onPressed:{  
  4.         if(event.key==Qt.Key_Left){  
  5.             console.log("moveleft");  
  6.             event.accepted=true;  
  7.         }  
  8.     }  
  9.     Keys.onReturnPressed:  
  10.         console.log("Pressedreturn");  
  11. }  

 

输入处理

[css] view plain copy
 
  1. Rectangle{  
  2. width:100;  
  3. height:100  
  4.     FocusScope{  
  5.     id:focusScope  
  6.     focus:true  
  7.     TextInput{  
  8.         id:input  
  9.         focus:true  
  10.         }  
  11.     }  
  12. }  

效果如图

 

技术分享图片

属性详解

activeFocus : bool [可读写][指示焦点:窗口是否获取焦点]

 

        此属性指示元素是否具有活动焦点。如果指示是真的,这个对象是目前接收键盘输入,或是一个FocusScope为父对象的对象,目前接收键盘输入。

通常,此属性是通过设置焦点在其子元素(继承于Item)和其外围FocusScope对象获得。在下面的例子中,TextInput和FocusScope对象会有活跃的热点,而根矩形对象将不会。

activeFocusOnTab : bool [可读写][设置item是否可被tab选中,默认为false]

anchors:一组属性,提供了以元素相互关系为基准的定位方式,主要包括以下的:

anchors.top : AnchorLine [可读写][顶部边界]

[css] view plain copy
 
  1. Item {  
  2.     Image {  
  3.         id: pic;  
  4.         x:100;  
  5.         y:200;  
  6.         source: "./1.png";  
  7.     }  
  8.     Text {  
  9.         id: label;  
  10.         anchors.top: pic.bottom; // 对象的顶部是与pic的底部高度相同  
  11.         text: "hello world";  
  12.         color: "black";  
  13.         font.pointSize: 14; // 大于0的值,与设备无关font.pixelSize:单位像素,依赖于设备  
  14.     }  
  15. }  
技术分享图片

anchors.bottom : AnchorLine [可读写][底部边界]

[css] view plain copy
 
  1. Item {  
  2.     Image {  
  3.         id: pic;  
  4.         x:100;  
  5.         y:200;  
  6.         source: "./1.png";  
  7.     }  
  8.     Text {  
  9.         id: label;  
  10.         anchors.bottom: pic.bottom; // 对象的顶部是与pic的底部高度相同  
  11.         text: "hello world";  
  12.         color: "black";  
  13.         font.pointSize: 14; // 大于0的值,与设备无关font.pixelSize:单位像素,依赖于设备  
  14.     }  
  15. }  
技术分享图片
 

anchors.left : AnchorLine [可读写][左边界]

[css] view plain copy
 
  1. Item {  
  2.     Image {  
  3.         id: pic;  
  4.         x:100;  
  5.         y:10;  
  6.         source: "./1.png";  
  7.     }  
  8.     Text {  
  9.         id: label;  
  10.         anchors.left: pic.right; // 对象的顶部是与pic的底部高度相同  
  11.         text: "hello world";  
  12.         color: "black";  
  13.         font.pointSize: 14; // 大于0的值,与设备无关font.pixelSize:单位像素,依赖于设备  
  14.     }  
  15. }  
 
技术分享图片

anchors.right : AnchorLine [可读写][右边界]

[css] view plain copy
 
  1. Item {  
  2.     Image {  
  3.         id: pic;  
  4.         x:100;  
  5.         y:10;  
  6.         source: "./1.png";  
  7.     }  
  8.     Text {  
  9.         id: label;  
  10.         anchors.right: pic.right; // 对象的顶部是与pic的底部高度相同  
  11.         text: "hello world";  
  12.         color: "black";  
  13.         font.pointSize: 14; //大于0的值,与设备无关font.pixelSize:单位为像素,依赖于设备  
  14.     }  
  15. }  
技术分享图片

anchors.horizontalCenter : AnchorLine [可读写][水平中心]

[css] view plain copy
 
  1. Item {  
  2.     Image {  
  3.         id: pic;  
  4.         source: "./1.png";  
  5.     }  
  6.     Text {  
  7.         id: label  
  8.         // 对象的水平中心 以 pic的水平中心 为中心  
  9.         anchors.horizontalCenter: pic.horizontalCenter;          
  10.         text: "hello world";  
  11.         color: "white";  
  12.         font.pointSize: 14; // 大于0的值,与设备无关font.pixelSize:单位像素,依赖于设备  
  13.     }  
  14. }  
技术分享图片

anchors.verticalCenter : AnchorLine [可读写][垂直中心]

[css] view plain copy
 
  1. Item {  
  2.     Image {  
  3.         id: pic;  
  4.         x:100;  
  5.         y:10;  
  6.         source: "./1.png";  
  7.     }  
  8.     Text {  
  9.         id: label;  
  10.         anchors.verticalCenter: pic.bottom; // 对象的顶部是与pic的底部高度相同  
  11.         text: "hello world";  
  12.         color: "black";  
  13.         font.pointSize: 14; //大于0的值,与设备无关font.pixelSize:单位像素,依赖于设备  
  14.     }  
  15. }  
技术分享图片

anchors.baseline : AnchorLine AnchorLine [可读写][baseline是指的文本所在的线,如果item没有文字的话baseline就和top的位置是相同的]

[css] view plain copy
 
  1. Item {  
  2.     Image {  
  3.         id: pic;  
  4.         x:40;  
  5.         y:40;  
  6.         source: "./1.png";  
  7.     }  
  8.     Text {  
  9.         id: label;  
  10.         anchors.baseline: pic.top;  
  11.         text: "hello world";  
  12.         color: "black";  
  13.         font.pointSize: 14; //大于0的值,与设备无关font.pixelSize:单位像素,依赖于设备  
  14.     }  
  15. }  
技术分享图片

anchors.fill : Item [可读写][用本对象填充指向的对象元素]

 

[css] view plain copy
 
  1. Item{  
  2.     Image{  
  3.         id:pic;  
  4.         x:40;  
  5.         y:40;  
  6.         source:"./1.png";  
  7.     }  
  8.     Rectangle{  
  9.         id:label;  
  10.         anchors.fill:pic; // 此时设置width和height,测试无效,直接填满pic  
  11.         color:"black";  
  12.     }  
  13. }  
技术分享图片

 

 

anchors.centerIn : Item [可读写][用本对象的中心对准指向对象的中心,开始辐射出去,区域可大于设置指向的对象]

[css] view plain copy
 
  1. Item {  
  2.     Image {  
  3.         id: pic;  
  4.         x:40;  
  5.         y:40;  
  6.         source: "./1.png";  
  7.     }  
  8.     Rectangle {  
  9.         id: label;  
  10.         width: 60;  
  11.         height: 60;  
  12.         anchors.centerIn: pic; // 以pic的中心为该对象中心进行辐射(区域可大于pic)  
  13.         color: "black";  
  14.     }  
  15. }  

技术分享图片

 

 

anchors.margins : real [可读写][设置所有(top,bottom,left,right)边框的宽度]

[css] view plain copy
 
  1. Item {  
  2.     Image {  
  3.         id: pic;  
  4.         x:40;  
  5.         y:40;  
  6.         source: "./1.png";  
  7.     }  
  8.     Rectangle {  
  9.         id: label;  
  10.         width: 60;  
  11.         height: 60;  
  12.         color: "black";  
  13.         anchors.margins: 10;  
  14.         anchors.left: pic.right;  
  15.     }  
  16.     Rectangle {  
  17.         id: label2;  
  18.         width: 60;  
  19.         height: 60;  
  20.         color: "black";  
  21.         anchors.margins: 10;  
  22.         anchors.top: pic.bottom;  
  23.     }  
  24. }  
技术分享图片

 

 

[css] view plain copy
 
  1. Item {  
  2.     Rectangle {  
  3.         id: label;  
  4.         width: 60;  
  5.         height: 60;  
  6.         color: "red";  
  7.         anchors.margins: 50;  
  8.     }  
  9.     Rectangle {  
  10.         id: label2;  
  11.         width: 60;  
  12.         height: 60;  
  13.         color: "black";  
  14.         anchors.margins: 50; // 只对本对象设置anchors边框有效  
  15.         anchors.top: label.bottom;  
  16.     }  
  17.     Rectangle {  
  18.         id: labe3;  
  19.         width: 60;  
  20.         height: 60;  
  21.         color: "red";  
  22.         anchors.margins: 50; // 只对本对象设置anchors边框有效  
  23.         anchors.top: labe2.bottom;  
  24.     }  
  25. }  
技术分享图片

 

 

anchors.topMargin : real [可读写][设置top边框的宽度,参照margins]

anchors.bottomMargin : real [可读写][设置bottom边框的宽度,参照margins]

anchors.leftMargin : real [可读写][设置left边框的宽度,参照margins]

anchors.rightMargin : real [可读写][设置right边框的宽度,参照margins]

anchors.horizontalCenterOffset : real [可读写][设置水平中心偏移量]

[css] view plain copy
 
  1. Item {  
  2.     Image {  
  3.         id: pic;  
  4.         source: "./1.png";  
  5.     }  
  6.     Rectangle {  
  7.         width: 30;  
  8.         height: 30;  
  9.         id: rect;  
  10.         color: "black";  
  11.         // 对象的水平中心 以 pic的水平中心 为中心  
  12.         anchors.horizontalCenter: pic.horizontalCenter;  
  13.         // 注意:horizomtalCenterOffset针对于horizontalCenter  
  14.         anchors.horizontalCenterOffset: 50;  
  15.     }  
  16. }  

技术分享图片

 

 

anchors.verticalCenterOffset : real [可读写][参照设horizontalCenter,与其类似]

anchors.baselineOffset : real[可读写][参照设horizontalCenter,与其类似]

anchors.alignWhenCentered : bool [可读写][指定不使用半个像素绘制图形,当需要居中一个elements,宽度或者高度是基数,不使用半个像素绘制,对此处理解有疑问]

下章节

 
《qml学习笔记(三):可视化元素基类Item详解(下半场)》:http://blog.csdn.net/qq21497936/article/details/78522816

原博主博客地址:http://blog.csdn.net/qq21497936
本文章博客地址:http://blog.csdn.net/qq21497936/article/details/78516201

 

 

qml学习笔记(二):可视化元素基类Item详解(上半场anchors等等)

标签:ons   技巧   中心   gravity   when   tom   offset   pre   term   

原文地址:http://www.cnblogs.com/senior-engineer/p/7986866.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!