布局 qml QML中怎麼進行布局？

有一些qml元素被用於放置元素物件，它們被稱作定位器，qtquick模組提供了row、column、grid、flow用來作為定位器，我將在下面依次展示它們的使用方法和顯示效果。

首先我們定義乙個自定義的顏色塊元素，用來充當接下來布局中的元素：

import qtquick 2.0item }

我這裡使用了qt.lighter(color)指定了基於填充色的邊界高亮色。

column元素將它的子物件通過自頂向下的列方式進行排列。spacing屬性用來設定每個元素之間的間隔大小。

使用方法：

import qtquick 2.3import qtquick.window 2.2window         square         square     }}

執行效果：

row元素將它的子物件從左到右，或者從右到左依次排列，排列方式取決於layoutdirection屬性。spacing屬性同樣用來設定每個元素之間的間隔大小。

使用方法：

import qtquick 2.3import qtquick.window 2.2window         square         square     }}

執行效果：

grid元素通過設定rows(行數)和columns(列數)將子物件排列在乙個柵格中。可以只限制行數或者列數。如果沒有設定它們中的任意乙個，柵格元素會自動計算子專案總數來獲取配置。屬性flow與layoutdirection用來控制子元素的加入順序，spacing屬性用來控制所有元素之間的間隔。

使用方法：

import qtquick 2.3import qtquick.window 2.2window         square         square         square     }}

執行效果：

flow通過flow和layoutdirection屬性來控制流的方向。它能夠從頭到底的橫向布局，也可以從左到右或者從右到左進行布局。作為加入流中的子物件，它們在需要時可以被包裝成新的行或者列。為了讓乙個流可以工作，必須制定乙個寬度或者高度，可以通過屬性直接設定，或者通過anchor布局設定。

使用方法：

import qtquick 2.3import qtquick.window 2.2window         square         square         square     }}

執行效果：

通常repeater與定位器一起使用。它的工作方式就像for迴圈一樣。

使用方法：

import qtquick 2.3import qtquick.window 2.2window         }    }}

執行效果：

高階的大資料模型處理和使用動態**的動態檢視會在模型與檢視中進行講解。