Qt QML快速入門6 布局元素

qml快速入門

【qt】qml快速入門1——語法：

【qt】qml快速入門2——基本元素：

【qt】qml快速入門3——元件：

【qt】qml快速入門4——簡單轉換：

【qt】qml快速入門5——定位元素：

【qt】qml快速入門6——布局元素：

【qt】qml快速入門7——輸入元素：

布局元素（layout items）

qml使用anchors（錨）對元素進行布局。anchoring（錨定）是基礎元素物件的基本屬性，可以被所有的視覺化qml元素使用。乙個anchors（錨）就像乙個協議，並且比幾何變化更加強大。anchors（錨）是相對關係的表示式，你通常需要與其它元素搭配使用。

乙個元素有6條錨定線（top頂，bottom底，left左，right右，horizontalcenter水平中，verticalcenter垂直中）。在文字元素（text element）中有一條文字的錨定基線（baseline）。每一條錨定線都有乙個偏移（offset）值，在top（頂），bottom（底），left（左），right（右）的錨定線中它們也被稱作邊距。對於horizontalcenter（水平中）與verticalcenter（垂直中）與baseline（文字基線）中被稱作偏移值。

1 元素填充它的父元素。

greensquare 
}

2 元素左對齊它的父元素。

greensquare 
}

3 元素的左邊與它父元素的右邊對齊。

greensquare 
}

4 元素中間對齊。blue1與它的父元素水平中間對齊。blue2與blue1中間對齊，並且它的頂部對齊blue1的底部。

greensquare 
bluesquare 
}

5 元素在它的父元素中居中。

greensquare 
}

6 元素水平方向居中對齊父元素並向後偏移12畫素，垂直方向居中對齊。

greensquare 
}

注意：我們的方格都開啟了拖拽。試著拖放幾個方格。你可以發現第乙個方格無法被拖拽因為它每個邊都被固定了，當然第乙個方格的父元素能夠被拖拽是因為它的父元素沒有被固定。第二個方格能夠在垂直方向上拖拽是因為它只有左邊被固定了。類似的第三個和第四個方格也只能在垂直方向上拖拽是因為它們都使用水平居中對齊。第五個方格使用居中布局，它也無法被移動，第六個方格與第五個方格類似。拖拽乙個元素意味著會改變它的x,y座標。anchoring（錨定）比幾何變化（例如x,y座標變化）更強大是因為錨定線（anchored lines）的限制，我們將在後面討論動畫時看到這些功能的強大。

Qt QML快速入門6 布局元素

flex布局快速入門

grid布局快速入門

ES6快速入門

Qt QML快速入門6 布局元素

flex布局快速入門

grid布局快速入門

ES6快速入門

相關推薦