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示例

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