原博主博客地址：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

?

?

轉載于:https://www.cnblogs.com/senior-engineer/p/7986866.html

總結

以上是生活随笔為你收集整理的qml学习笔记(二)：可视化元素基类Item详解（上半场anchors等等）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。