qml學習筆記(二)：可視化元素基類Item詳解（上半場anchors等等）

`

qml學習筆記(二)：可視化元素基類Item詳解（上半場anchors等等）

    本學章節筆記主要詳解Item元素（上半場主要涉及anchors錨），由於全部可視化的界面元素都繼承於Item，熟悉Item後，不一樣的繼承子類，有其定製的屬性（從幾個到幾十個不等）。

    《Qt實用技巧：在Qt Gui程序中嵌入qml界面（可動態覆蓋整個窗口）》·
    《qml學習筆記(一)：界面元素初探》·

   《qml學習筆記(三)：可視化元素基類Item詳解（下半場）》`

基類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詳解（下半場）》`