上章我們學習了3.qml-Rectangle組件學習
所以本章主要來講解Rectangle的父類元素Item
1.Item介紹
如下圖所示,我們可以看到Item是Qt中所有視覺項元素的父類, Qt中所有的視覺專案都從Item繼承下來的,比如:Image(影像顯示元素)、Rectangle(矩形元素)、Text(文本元素)、TextEdit(文本框元素)等等，
而且Item為所有視覺項提供了常見的屬性,如x和y位置、寬度和高度、錨和key事件處理支持，
2. Item-常用屬性介紹
Item提供的常用屬性如下所示:
- x : real,指定元素的X坐標
- y : real,指定元素的Y坐標
- z : real,指定元素的堆疊順序,
- width : real,指定元素的寬度
- height : real,指定元素的高度
- implicitHeight : real,指定元素的隱式高度
- implicitWidth : real, 指定元素的隱式寬度
- [default] data : list<Object>,data屬性, 它是個默認屬性,所有的子項都被自動分配給這個屬性,所以不需要被賦值
- clip : bool,指定裁剪屬性,默認為false,如果設定為true,那么超出Item自身邊框的繪圖或者子專案,都會被裁減掉.
- visible : bool,設定元素是否可見,默認為true.如果在Item自身元素下設定該屬性,會直接影響到子專案的可見值，使用該屬性時,最好不要使用apacity屬性.
- visibleChildren : list<Item>,保存當前可見的所有子專案
- children : list<Item>,保存所有子專案
- opacity : real,透明度,默認值為1.0,如果設定為0.0則表示全透明, 如果在Item自身元素下設定該屬性,會直接影響到子專案的透明值，
- rotation : real,設定元素的順時針旋轉度數
- scale : real,縮放值,值小于1縮小顯示；大于1放大顯示；負值則是鏡像效果
- transformOrigin : scale縮放時的基點位置,默認值為Center
2.1 z屬性
z用來設定每個子專案的堆疊顯示順序,默認值為0,如果相同Z值的子專案要在同一片空間顯示的話,默認是以它們初始化的順序來顯示,如下圖所示(藍色顯示在紅色的上面):
如果是值不同,那么Z值越大,則顯示在最上方.
2.2 clip屬性
默認為false,那么如果子專案超出Item自身邊框范圍,也會被繪制.如果為true,那么將會被裁減.
代碼如下所示:
Rectangle { width: 100 height: 100 border.width: 3 border.color: "#000000" clip: true Rectangle { width: 70 height: 70 color: "red" } Rectangle { x: 50 y: 50 width: 70 height: 70 color: "yellow" } }
設定clip為false時:
設定clip為true時:
2.3 列印children子元素成員
- 在QML中,如果屬性值是list型別的,都可以使用[]方括號來訪問串列成員.
- 并且list提供了一個length 屬性,可以讓我們獲取串列中的數量
- 還可以使用push方法將值添加到串列中，就像它是JavaScript陣列一樣
- 并且串列只能存盤QML物件，并且不能包含任何基本型別值(int,string等)，
- 如果要在串列中存盤基本型別，則需要使用var型別
所以我們for回圈列印的寫法有兩種:
for(var i = 0; i < data.length; i++) { ... ...} // 正常寫法 for(var i in data) { ... ... } // javascript寫法
示例如下所示:
Rectangle { id: group width: 100 height: 100 border.width: 3 border.color: "#000000" clip: true Rectangle { id: rect1 width: 70 height: 70 color: "red" } Rectangle { id: rect2 x: 50 y: 50 width: 70 height: 70 color: "yellow" visible: false // 不顯示 } Component.onCompleted: { for(var i in data) { console.log("data[" + i + "]: ", data[i]) } console.log("children length: ", children.length) // 由于只有兩個成員,所以列印2 for(i = 0; i < children.length; i++) { console.log("children[" + i + "] 坐標:", children[i].x, children[i].y, children[i].width, children[i].height) } console.log("children length: ", visibleChildren.length) // 由于有個成員不顯示,所以列印1 for(i = 0; i < visibleChildren.length; i++) { console.log("visibleChildren[" + i + "] 坐標:", visibleChildren[i].x, visibleChildren[i].y, visibleChildren[i].width, visibleChildren[i].height) } } }
運行列印:
其中Component.onCompleted是個槽函式,當我們實體化完成后, Component就會發出completed信號,然后觸發onCompleted槽函式
3.Item-Anchors錨
Anchors錨在Item中相當重要,通過它來指定每個元素與其它元素之間的位置方向,從而可以實作相對布局，
Anchors提供向Item下面幾種屬性:
- anchors.top : AnchorLine,指定元素的頂部與哪個瞄線對齊
- anchors.bottom : AnchorLine,指定元素的底部與哪個瞄線對齊
- anchors.left : AnchorLine,指定元素的左側與哪個瞄線對齊
- anchors.right : AnchorLine,指定元素右側與哪個瞄線對齊
- anchors.horizontalCenter : AnchorLine,指定元素與哪個瞄線進行水平居中
- anchors.verticalCenter : AnchorLine,指定元素與哪個瞄線進行垂直居中
- anchors.baseline : AnchorLine,指定元素里的文本基線與哪個瞄線對齊(實際就是文本的頂部)
- anchors.fill : Item,指定元素填滿在哪個Item下面,但是使用該屬性后,再設定自身元素width和height是無效果的
- anchors.centerIn : Item,指定元素的中心點放在哪個Item下面進行居中對齊,也可以填anchors.top之類的描線,比如anchors.centerIn : rect1.right
- anchors.margins : real,設定元素的所有外邊框的寬度
- anchors.topMargin : real
- anchors.bottomMargin : real
- anchors.leftMargin : real
- anchors.rightMargin : real
- anchors.horizontalCenterOffset : real,設定元素的水平居中的左右偏移值
- anchors.verticalCenterOffset : real,設定元素的垂直居中的上下偏移值
- anchors.baselineOffset : real,設定文本基線的偏移值
- anchors.alignWhenCentered : bool,強制居中,默認為true, 假如寬或者高為奇數時,如果中心對齊, 就可以保證絕對對齊，
示例1-實作3個子元素水平布局
Rectangle { color: "blue" width: 240 height: 80 Rectangle { id: rect1 color: "red" anchors.alignWhenCentered: false anchors.centerIn : parent anchors.horizontalCenterOffset: -parent.width/3 anchors.margins: 10 width: 50 height: 50 } Rectangle { id: rect2 color: "yellow" anchors.alignWhenCentered: false anchors.centerIn : parent anchors.margins: 10 width: 50 height: 50 } Rectangle { id: rect3 color: "lightsteelblue" anchors.centerIn : parent anchors.horizontalCenterOffset: parent.width/3 anchors.margins: 10 width: 50 height: 50 } }
效果如下所示:
在上例中,我們通過anchors.centerIn : parent,讓3個元素都居中,然后通過anchors.horizontalCenterOffset來實作左右偏移.
注意 - anchors.centerIn : parent 本質上就是垂直水平居中,等價于:
- anchors.horizontalCenter: parent.horizontalCenter
- anchors.verticalCenter: parent.verticalCenter
提示: 在后面我們學習Item的子元素時候,就用Row、Column來實作布局.
4. Item-key事件處理
Item通過“key”附加屬性可以讓所有基于Item的元素都可以使用鍵處理，Keys附加屬性提供了:基本信號，如pressed(event) 和released(event),以及特定按鍵的信號，比如spacePressed(event)等,如下圖所示:
其中event引數包含了按鍵的詳細資訊.該引數型別是KeyEvent.如果我們檢測到按鍵是我們所需要的,則需要將accepted設定為true防止該按鍵事件傳播到父級，從而讓父級不會對同一事件做出回應，
4.1 Keys屬性使用示例
下面我們演示如何檢測空格鍵按下:
Item { anchors.fill: parent focus: true Keys.onPressed: { if (event.key == Qt.Key_Space) { console.log("空格鍵按下"); event.accepted = true; } } }
其實我們還可以寫的更加簡潔,使用特定鍵信號來接收,這里它會自動將event.accepted設定為true:
Item { anchors.fill: parent focus: true Keys.onSpacePressed: console.log("空格鍵按下") }
4.2 KeyEvent深入講解
在上節,我們只是簡單學習了如何獲取key事件,本節,我們來深入學習如何使用組合按鍵(比如:ctrl+a).
event的引數型別是KeyEvent,它的屬性有:
- accepted : bool, 按鍵是否被接受,如果設定為true,則表示已經接受該事件處理,那么該事件就不會再傳播到父級，從而讓父級不會對同一事件做出回應，
- text : string, 回傳按鍵按下的字串名字,比如按下1鍵,那么text="1",也有可能是空白字串.
- count : int, 回傳text字串的長度，
- isAutoRepeat : bool, 用來檢測一直按下未松開的按鍵事件.如果為true則表示為松開.
- key : int,鍵盤碼的標識,參考Qt::Key列舉值,比如Qt::Key_Tab
- modifiers : int, 此屬性保存鍵盤的修飾符標志,比如Qt::ShiftModifier(shift按鍵被按下)
- nativeScanCode : quint32,鍵盤掃描碼,區分不同的相同key名按鍵,比如左側shift鍵和右側shift鍵,它們的key值是一樣,但是nativeScanCode是不一樣的.
組合按鍵檢測示例如下所示:
Item { anchors.fill: parent focus: true Keys.onPressed: { if ((event.key == Qt.Key_Space) && (event.modifiers & Qt.ShiftModifier)) console.log("shift + space 被按下") event.accepted = true } }
注意-附加屬性的槽函式(信號處理器)
剛剛我們學習了Item的"Key"附加屬性,并使用它的信號處理器處理按鍵,其實都是按照<附加屬性>.on<Signal>語法實作的.必須得嚴格遵守,因為附加屬性不屬于該元素自身的屬性.
如果是使用普通的信號處理器(基類或者自身的信號發射的),則直接用on<Signal>語法實作.
在后面,我們會學習自定義信號,以及信號與槽的連接.END
下章學習: 5.qml-Text元素學習
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/265534.html
標籤：C++