本文介紹的是QML UI布局管理，先來對UI進行介紹一下，使用Qt做過UI的一定對QHBoxLayout, QVBoxLayout, 和QGridLayout這三個最重要也最常使用的layout managers非常熟悉。那么在QML中又是如何控制和管理UI布局的呢？那么我們這篇文章就為大家介紹這些基礎知識。

首先，QML同樣允許大家使用硬編碼的方式將位置數值直接寫到代碼中，但是這樣做首先難以適應UI的調整，其次代碼維護起來也很困難。因此我們不推薦這樣做。推薦大家使用的是以下三種布局管理器：Row,、Column、Grid，以及使用Anchor進行布局。

Row

QML 中的 Row 元素會將其子控件都排列在同一行，相互不重疊。我們還可以使用它的spacing屬性來定義子控件之間的距離。比如下列代碼就會產生如圖所示的效果：

Row { spacing: 2Rectangle {  
 color: "red"; width: 50; height: 50 }   
Rectangle { color: "green"; width: 20; height: 50 } Rectangle { color: "blue"; width: 50; height: 20 }   
}  
 
 

Column

QML 中的 Column元素會將其子控件都排列在同一行，相互不重疊。我們還可以使用它的spacing 屬性來定義子控件之間的距離。比如下列代碼就會產生如圖所示的效果：

view sourceprint?1 Column {     
         spacing: 2     
         Rectangle { color: "red"; width: 50; height: 50 }     
         Rectangle { color: "green"; width: 20; height: 50 }     
         Rectangle { color: "blue"; width: 50; height: 20 }     
 }  

Grid

QML 中的 Grid元素會將其子控件都均勻地排列在一個網格內，相互不重疊，每一個子控件都被放置在一個網格單元的（0，0）位置，也就是左上角。Grid的rows 和columns屬性定義網格的行數和列數，列數默認是4。我們還可以使用Grid的spacing 屬性來定義網格單元之間的距離，這里注意水平和垂直方向的spacing都是一樣的。比如下列代碼就會產生如圖所示的效果：

view sourceprint?1 Grid {     
         columns: 3     
         spacing: 2     
        Rectangle { color: "red"; width: 50; height: 50 }     
        Rectangle { color: "green"; width: 20; height: 50 }     
         Rectangle { color: "blue"; width: 50; height: 20 }     
         Rectangle { color: "cyan"; width: 50; height: 50 }     
        Rectangle { color: "magenta"; width: 10; height: 10 }     
 }  

#p#

混合應用

我們還可以將Grid、Row 和 Column 進行混合應用。比如下面的代碼會產生如圖所示的效果：

view sourceprint?01 Column {    
         spacing: 2    
            Rectangle { color: "red"; width: 50; height: 50 }    
            Row {    
                    spacing: 2    
          Rectangle { color: "yellow"; width: 50; height: 50 }    
          Rectangle { color: "black"; width: 20; height: 50 }    
          Rectangle { color: "blue"; width:50; height: 20 }    
    }    
   Rectangle { color: "green"; width: 20; height: 50 }    
 }  

Anchor

每一個item 都可以被認為具有 7 條隱藏的“anchor lines"：left、 horizontalCenter、 right、 top、 verticalCenter、baseline、以及bottom，如下圖所示：

其中baseline是指的文本所在的線，在上圖中并未標出，如果item沒有文字的話baselinw就和top的位置是相同的。除此之外，Anchor系統還提供了margins 和offsets。margins 是指一個item和外界之間所留有的空間，而offsets 則可以通過使用 center anchor lines來進行布局。如下圖所示：

#p#

使用 QML anchoring系統，我們可以定義不同items之間的anchor lines之間的關系。例如：

view sourceprint?1 Rectangle { id: rect1; ... }    
Rectangle { id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; ... }  

我們還可以使用多個anchors：

view sourceprint?1 Rectangle { id: rect1; ... }    
Rectangle { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... }  

通過定義多個水平或垂直的anchors，我們還可以控制item的大小，例如：

view sourceprint?1 Rectangle { id: rect1; x: 0; ... }    
Rectangle { id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; ... }    
Rectangle { id: rect3; x: 150; ... }  

注意：出于效率方面的考慮，我們只允許對一個item的鄰居和之接父親使用anchor定義。比如下面的定義是不合法的：

Item {    
     id: group1    
      Rectangle { id: rect1; ... }    
 }    
 Item {    
     id: group2    
      Rectangle { id: rect2; anchors.left: rect1.right; ... } <BR> }  

小結：詳解 QML UI布局管理的內容介紹完了，希望本文對你有所幫助！