概述

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

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

Row

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

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

        

        
        
      
        
it知識庫：QML UI布局管理，轉載需保留來源！
        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。