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

  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. }

效果如下图:

捕捉键盘

  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. }

输入处理

  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 [可读写][顶部边界]

  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 [可读写][底部边界]

  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 [可读写][左边界]

  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 [可读写][右边界]

  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 [可读写][水平中心]

  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 [可读写][垂直中心]

  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的位置是相同的]

  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 [可读写][用本对象填充指向的对象元素]

  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 [可读写][用本对象的中心对准指向对象的中心,开始辐射出去,区域可大于设置指向的对象]

  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)边框的宽度]

  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. }

  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 [可读写][设置水平中心偏移量]

  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等等)的更多相关文章

  1. linux初级学习笔记四:Linux文件管理类命令详解!(视频序号:03_1)

    本节学习的命令:cat(tac),more,less,head,tail,cut,sort,uniq,wc,tr 本节学习的技能:目录管理 文件管理 日期时间 查看文本 分屏显示 文本处理 文件管理命 ...

  2. Ext.Net学习笔记22:Ext.Net Tree 用法详解

    Ext.Net学习笔记22:Ext.Net Tree 用法详解 上面的图片是一个简单的树,使用Ext.Net来创建这样的树结构非常简单,代码如下: <ext:TreePanel runat=&q ...

  3. Ext.Net学习笔记23:Ext.Net TabPanel用法详解

    Ext.Net学习笔记23:Ext.Net TabPanel用法详解 上面的图片中给出了TabPanel的一个效果图,我们来看一下代码: <ext:TabPanel runat="se ...

  4. 枚举基类Enum详解

    本文主要是对枚举类型的基类Enum类做一个介绍: 首先,Enum类位于java.lang包下,根据类的介绍可以发现,Enum类是Java中所有枚举类的父类,将枚举作为一个set或者Map的keys来使 ...

  5. linux初级学习笔记六:linux用户及权限详解!(视频序号:03_4)

    本节学习的命令:/etc/passwd,/etc/shadow,/etc/group文件详解 本节学习的技能: 安全上下文 文件与目录的权限管理 影子命令 用户,用户组类别详解 /etc/passwd ...

  6. PHP学习笔记二十六【类的重载】

    <?php //重载: //函数名一样,通过函数的参数个数或者是参数类型不同,达到调用同一个函数名 Class A{ // public function test1(){ // echo &q ...

  7. PHP学习笔记二十五【类的继承】

    <?php //定义父类 class Stu{ public $name; protected $age; protected $grade; private $address;//私有变量不会 ...

  8. 大前端学习笔记整理【六】this关键字详解

    前言 在上一篇博客里我总结了下辨认this指向的四种方式,但是有师兄抛出一个问题来,我发现那些this的指向并不能说明更复杂的情况,先看下这段代码 var a = { name: 'a', getNa ...

  9. 【JAVAEE学习笔记】hibernate03:多表操作详解、级联、关系维护和练习:添加联系人

    一.一对多|多对一 1.关系表达 表中的表达 实体中的表达 orm元数据中表达 一对多 <!-- 集合,一对多关系,在配置文件中配置 --> <!-- name属性:集合属性名 co ...

随机推荐

  1. 堆排序算法 java 实现

    堆排序算法 java 实现 白话经典算法系列之七 堆与堆排序 Java排序算法(三):堆排序 算法概念 堆排序(HeapSort)是指利用堆积树(堆)这种数据结构所设计的一种排序算法,可以利用数组的特 ...

  2. wamp多网站配置for window 本地测试 单Ip

    网上有很多WAMP集成环境下单IP多域名虚拟主机配置的文章,自己总结了有用方法记录下来 简单的介绍一下我的系统环境:window xp  和 wamp apache2.2.8 ------------ ...

  3. 用户与 Oracle DB 交互具体过程

    与 Oracle DB 交互 以下的演示样例从最主要的层面描写叙述 Oracle DB 操作.该演示样例说明了一种 Oracle DB 配置,在该配置中,用户和关联server进程执行于通过网络连接的 ...

  4. HEVC测试序列(百度云网盘分享)

    巧妇难为无米之炊,身为一个码农怎能碗里没有米呢?想必很多朋友都碰到下载测试序列的困惑,为了减少麻烦,现提供HEVC所有测试序列的下载,上传到百度云网盘上,方便大家下载.主要的测试序列如下: Test ...

  5. Eclipse关联Java源代码

    一个很简单的技巧,不多说,直接贴图 1. 2 . 3.选择你jdk下的src.zip就可以了.搞定!

  6. hdu 4775 Infinite Go(暴力)

    pid=4775" target="_blank" style="">题目链接:hdu 4775 Infinite Go 题目大意:两个人下围棋 ...

  7. [C++]Infinite House of Pancakes——Google Code Jam 2015 Qualification Round

    Problem It’s opening night at the opera, and your friend is the prima donna (the lead female singer) ...

  8. Ubuntu &amp; Docker &amp; Consul &amp; Fabio &amp; ASP.NET Core 2.0 微服务跨平台实践

    相关博文: Ubuntu 简单安装 Docker Mac OS.Ubuntu 安装及使用 Consul Consul 服务注册与服务发现 Fabio 安装和简单使用 阅读目录: Docker 运行 C ...

  9. httping使用

    httping --help: 显示帮助 httping -V: 显示版本 1.httping国内网站 I) httping -g http://www.jd.com -c 5 -t 5 -F -s ...

  10. python使用requests发送text/xml报文数据

    def client_post_xmldata_requests(request_url,requestxmldata): #功能说明:发送请求报文到指定的地址并获取请求响应报文 #输入参数说明:接收 ...