# **QML 排版**

### 排版種類(4類)
在談排版以前，先了解版面的直排或橫排的排列方式。而這些排列方式，建立專案後可以發現Qt已經幫你導入最基礎的library QtQuick。

* 橫排(Row)
* 直排(Column)
* 網格(Grid)
* 瀑布(Flow)

### 補充(QtQuick.Layouts)
* 網格排列(GridLayout)

<br>

### 橫排(Row)
<table style="margin-left: auto; margin-right: auto;">
<tr style="border-color: #fff;">
<td>
<img src="https://i.imgur.com/RaLUz3L.png">
</td>
<td>
<pre style="background: #111; color: #fff;">
Row{
id: layout
anchors.centerIn: parent
spacing: 10
Rectangle{width: 50; height: width; color: "red"}
Rectangle{width: 50; height: width; color: "green"}
Rectangle{width: 50; height: width; color: "blue"}
}</pre>
</td>
</tr>
</table>

### 直排(Column)
<table style="margin-left: auto; margin-right: auto;">
<tr style="border-color: #fff;">
<td>
<img src="https://i.imgur.com/xcrqOWC.png">
</td>
<td>
<pre style="background: #111; color: #fff;">
Column{
id: layout
anchors.centerIn: parent
spacing: 10
Rectangle{width: 50; height: width; color: "red"}
Rectangle{width: 50; height: width; color: "green"}
Rectangle{width: 50; height: width; color: "blue"}
}
</pre>
</td>
</tr>
</table>

### 網格(Grid)
<table style="margin-left: auto; margin-right: auto;">
<tr style="border-color: #fff;">
<td>
<img src="https://i.imgur.com/h5uVdh3.png">
</td>
<td>
<pre style="background: #111; color: #fff;">
Grid{
id: layout
anchors.centerIn: parent
columnSpacing: 5
rowSpacing: 20
rows: 2
columns: 2
Rectangle{width: 50; height: width; color: "red"}
Rectangle{width: 50; height: width; color: "green"}
Rectangle{width: 50; height: width; color: "blue"}
}
</pre>
</td>
</tr>
</table>

**使用說明**
 

- columnSpacing: 直排間距(Grid獨有)
- rowSpacing: 橫排間距(Grid獨有)
- rows: 每一橫列有多少個
- columns: 每一直排有幾個
- 每一欄/列的長度計算以最大的為主。有點類似html中的table存在

### 瀑布流(Flow)
<table style="margin-left: auto; margin-right: auto;">
<tr style="border-color: #fff;">
<td>
<img src="https://images.plurk.com/7KawTRiJpOIRTbonoD60MO.gif">
</td>
<td>
<pre style="background: #111; color: #fff;">
Flow{
id: layout
anchors.centerIn: parent
spacing: 5
Rectangle{width: 50; height: width; color: "red"}
Rectangle{width: 50; height: width; color: "green"}
Rectangle{width: 50; height: width; color: "blue"}
}
</pre>
</td>
</tr>
</table>

**使用說明**
* 與Grid用法相近，每一欄/列的長度計算以最大的為主。有點類似html中的table存在

### 網格排列(GridLayout)
<table style="margin-left: auto; margin-right: auto;">
<tr style="border-color: #fff;">
<td>
<img src="https://i.imgur.com/Fi7vfQv.png">
</td>
<td>
<pre style="background: #111; color: #fff;">
GridLayout{
id: layout
anchors.centerIn: parent
width: 500
height: 500
rows: 2
columns: 5
columnSpacing: 10
rowSpacing: 10
Rectangle {
Layout.column: 0; Layout.columnSpan: 4
Layout.row: 0; Layout.rowSpan: 2
Layout.fillHeight: true ; Layout.fillWidth: true
color: "red"
}
Rectangle {
Layout.column: 4 ; Layout.columnSpan: 1
Layout.row: 0 ; Layout.rowSpan: 2
Layout.fillHeight: true ; Layout.fillWidth: true
color: "green"
}
Rectangle {
Layout.column: 0 ; Layout.columnSpan: 5
Layout.row: 2 ; Layout.rowSpan: 3
Layout.fillHeight: true ; Layout.fillWidth: true
color: "blue"
}
}</pre>
</td>
</tr>
</table>

**使用說明**

* Layout.column -> 起始直欄位置
* Layout.columnSpan -> 結束直欄位置
* Layout.row -> 起始橫排位置
* Layout.rowSpan -> 結束橫排位置
* Layout.fillHeight / Layout.fillWidth -> 內容寬高是否撐滿，強烈建議為true。沒有填上這設定的話，會以height / width為主，有點失去這排版的用途，也有可能會造成其他空間的配置失效。

---
參考:
https://blog.csdn.net/qq_31073871/article/details/117766818?spm=1001.2101.3001.6650.15&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-15-117766818-blog-90768493.pc_relevant_3mothn_strategy_recovery&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-15-117766818-blog-90768493.pc_relevant_3mothn_strategy_recovery&utm_relevant_index=16