###### tags: `QT` `C++`

# QT Layout使用紀錄

最近在寫嵌入式QT介面，覺得頁面使用上邏輯有點跟常規不太一樣，故作紀錄

## Context

Context為page1要切到page2時，需隱藏虛線外框UI，並置換ListView內容，以下紀錄QT如何用Qlabel、QVBoxLayout、QHBoxLayout與QGroupBox去建置虛線外框Layout。因QT Layout設置稍微麻煩故些微作筆記紀錄。


### 建置systemInfoLayout


#### 藍線 : 建置Qlabel，並設置資料
- 建置、makeTextLabel Function，流程為Instance物件並設置Alignment，此範例為設置向右對齊，並設置style，style有點像css format 。
- 設置資料、使用 setText Function，請參考QLabel設置(橘色箭頭)。

#### 紅框 : 建置QVBoxLayout，並塞Widget
- 建置QVBoxLayout 、 QVBoxLayout有提供Style設置方法，此範例我們使用Margin 3與 Spacing 0 達到我們排版需求。
- 塞Widget、接著將我們宣告的Qlabel依依塞入Layout中， QVBoxLayout為直式排列，塞進的Widget會自動直式整齊排列。

#### 紅色虛線框 : 將Layout塞至QGroupBox
- 為了要將紅框(systemInfoLayout) 塞至虛線框框，Layout物件本身不是Widget，故我們若要將實體紅框Layout塞至QHBoxLayout ，須將QVBoxLayout塞至QVGroupBox物件中(QVGroupBox為Widget物件)。

### 建置topHeaderLayoutUp


#### 藍線 : 建置Qlabel，並設置資料
- 建置Qlabel，向右對齊並設置Style。
- 設置Logo圖片，基本上QT圖片都會用Qpixmap物件去做設置，並透過Qlabel的setPixmap去顯示。

#### 紅框 : 建置QVBoxLayout，並塞Widget
- 建置QHBoxLayout 、 QHBoxLayout有提供Style設置方法。
- 塞Widget、依序塞入Logo label與我們剛剛所建的systemInfoBox。

#### 紅色虛線框 : 將Layout塞至QGroupBox
- 一樣將Layout塞至QGroupBox(topHeaderLayoutUpBox)，等等要與Hosname Label做合併。

### 建置topHeaderLayout


#### 最後在宣告一個QVBoxLayout
- 將一開始所宣告的hostname Label與topHeaderLayoutUpBox依依塞入QVBoxLayout，就完成了，因後續要與虛線外框做頁面合併，一 樣需將topHeaderLayout塞至GroupBox，才可塞入虛線外框QVBoxLayout中~此處就不多說了。

基本上QT設置UI的方式是先由一個一個小Layout Group組成，再慢慢塞至大Layout中。