---
# System prepended metadata

title: QT Layout使用紀錄
tags: [QT, C++]

---

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

# QT Layout使用紀錄

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

## Context

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

![](https://i.imgur.com/uhyOeSL.png)

### 建置systemInfoLayout


![](https://i.imgur.com/WJK02aH.png)

#### 藍線 : 建置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

![](https://i.imgur.com/Qr4HeT9.png)


#### 藍線 : 建置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

![](https://i.imgur.com/xi77qIV.png)


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


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