Qml之横纵布局
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”。
