Qml中布局組件包括：Row、Column、Grid、Flow、嵌套布局。
具體的區別參見：
https://www.qter.org/forum.php?mod=viewthread&tid=20745
https://cloud.tencent.com/developer/article/1816914
https://juejin.cn/post/6886278061877755911
https://www.cnblogs.com/linuxAndMcu/p/11945219.html
實現一個普通的多層級編輯框
第一視覺感官，這是一個網格布局(Grid)----三橫兩縱，整整齊齊。
但是，這樣的布局並不適合去使用Grid。
原因：
1、Grid多用於布局相同的控件，從上圖看，里面既有文本又有編輯框，要做對應的處理。對比於row+column可能會更加冗余。
Grid較為適用的場景，比如
注：如果真有這么標准、整齊的需求，建議直接使用Repeater。
2、有一個特殊點，第一列的文本右對齊。大部分的控件中，在對齊方面都是默認采用左對齊。因此，此處就需要特殊化的處理。
3、后續功能的迭代或修改。比如添加一行非編輯框，而是下拉框等。可能會加大修改的難度或重構等。比如
基於上述的幾個原因，這樣的需求樣式，最好使用Row+Column。
獨行俠：Grid
雙劍合璧：Row+Column
基本思路：從簡單到復雜、從整體到局部
從例子里剖析：
一、整體布局、風格思考
風格：三橫兩縱
設計一：先從橫向出發，再從縱向出發。三橫->兩縱
實現：
Row{
Column{
}
Column{
}
}
設計二：先從縱向出發，在從橫向出發。兩縱→三橫
實現：
Column{
Row{
}
Row{
}
Row{
}
}
二、局部組件選擇和調整
組件選擇
- 文本框：Text、Label
- 編輯框：TextFeild、TextInput
組件調整
- 位置
- 顏色
- 樣式
- 大小
設計一的實現方式：
Row{ Column{ Label{ } Label{ } Label{ } }//Column Column{ TextField{ } TextField{ } TextField{ } }//Column }//Row
設計二的實現方式
Column{ Row{ Label{ } TextField{ } }//Row Row{ Label{ } TextField{ } }//Row Row{ Label{ } TextField{ } }//Row }//Column
小技巧：在布局控件外部嵌套一個Rectangle。
作用：
1、對外。這個Rectangle控制着相對位置。即相對於整個界面、相鄰控件的位置、偏移等。目的：可以實現整體的挪移。
2、對內。內部控件、組件的調整，只需要關心與外部Rectangle的相對偏移，根本不需要聯系到整個界面。
最終實現
// 定義參數，每行的高度 property int rowHeight: 32 // 定義參數，每行中，每列的間距 property int rowSpacing: 16 // 定義參數，每列中，每行的間距 property int colSpacing :24 Rectangle{ anchors.top:parent.top anchors.topMargin:112 anchors.horizontalCenter: parent.horizontalCenter width: 460 height: 240 Column{ anchors.fill: parent // 定義Column中，每行Row的間距 spacing: colSpacing //first row Row{ // 寬度取Page的0.8 width: parent.width * 0.8 height: rowHeight spacing: rowSpacing // Row水平居中顯示 anchors.horizontalCenter: parent.horizontalCenter Label{ text: "網絡名稱(SSID)" font.family: "Microsoft YaHei" color: "#D9000000" font.pixelSize: 14 // 定義垂直居中顯示 verticalAlignment: ssidData.verticalAlignment // 顯示字符，水平靠右顯示 horizontalAlignment: Text.AlignRight // 設置寬度，Row的寬度的0.3 width: parent.width * 0.3 height: parent.height } TextField{ id:ssidData placeholderText: "請輸入" font.family: "Microsoft YaHei" color: "#D9000000" font.pixelSize: 14 width:240 height: 32 background: Rectangle { border.color: "#26000000" } } }//Row // second row Row{ width: parent.width * 0.8 height: rowHeight spacing: rowSpacing anchors.horizontalCenter: parent.horizontalCenter Label{ text: "網絡密碼" verticalAlignment: ssidPsdData.verticalAlignment horizontalAlignment: Text.AlignRight font.family: "Microsoft YaHei" color: "#D9000000" font.pixelSize: 14 width: parent.width * 0.3 height: parent.height } TextField{ id: ssidPsdData placeholderText: "請輸入" font.family: "Microsoft YaHei" //color: "#40000000" font.pixelSize: 14 width:240 height: 32 background: Rectangle { border.color: "#26000000" } } }// Row // third row Row{ width: parent.width * 0.8 height: rowHeight spacing: rowSpacing anchors.horizontalCenter: parent.horizontalCenter Label{ text: "加密模式" verticalAlignment: secretType.verticalAlignment horizontalAlignment: Text.AlignRight font.family: "Microsoft YaHei" color: "#D9000000" font.pixelSize: 14 width: parent.width * 0.3 height: parent.height } TextField{ id:secretType placeholderText: "請輸入" font.family: "Microsoft YaHei" //color: "#40000000" font.pixelSize: 14 width:240 height: 32 background: Rectangle { border.color: "#26000000" } } }// Row }// Column }//Rectangle
注意點：
1、一般的組合使用是：Label+TextField。而不是Text+TextField、Label+TextInput，不過還是實際根據需求選擇吧。
2、要實現文本右對齊。Row中的Label一定要設置width，否則都是左對齊或亂序。即使配置了“horizontalAlignment: Text.AlignRight”，也是不生效的。
3、如果嵌套了Rectangle，在內部的Column或Row就必須設置“anchors.fill: parent”。否則，無法精確計算控件的相對偏移。
4、左邊文本相對於右邊編輯框的垂直居中，可以這么設置“verticalAlignment: ssidData.verticalAlignment”。