QML跨平台布局注意事项
1、本博客解决的问题：罗列出qml程序在跨平台下，各个组件之间的布局使用事项，仅在windows和linux上进行测试，mac和安卓暂时未进行测试。
2、问题前言：在使用qml进行夸平台开发的时候，往往会出现很多意料之外的问题，最大的一个问题就是各个组件之间的位置关系，本文针对此问题，总结如下几点建议，如有不妥之处，还请见谅。
3、问题描述：由于笔者的work需要，在windows上进行代码编译后需要到linux系统上进行运行，有时候在布局上总是莫名其妙的出现位置错位的情况，在windows平台上显示是符合需要的，但是到了linux上，位置就变了（指定确切的坐标不会，使用布局可能会），经过各种搜寻答案（几乎为0），经自己的测试，总结了如下几点跨平台开发布局使用建议。
4、布局建议：
4.1 使用绝对坐标位置，如明确指明 x, y, width, height 的数值；
4.2 在无法确定明确位置的时候，尽量使用锚（anchors）布局；
4.3 功能板块尽量进行分区域（分块）进行布局；
4.4 组件之间尽量不要使用相对布局：
4.5 平行关系尽量避免嵌套相对布局；
注：qml布局渲染性能比较：绝对位置布局 > 锚（anchors）布局 > 相对布局（性能从优到劣）
参考qml性能的一些建议
5、相关的布局建议代码示例：（注：部分代码参考Qt官方代码，自己不想再重新去编写）
5.1 使用绝对布局：明确指明组件的坐标位置和大小等属性，不需要JavaScript去推导位置，性能最好，但是对于自动伸缩需要做特殊处理，参考代码如下：
Rectangle{
x: 100
y: 200
width: 100
height: 200
}
5.2 使用锚（anchors）布局：此布局方式也是Qt官方比较推荐的一种布局方式，性能可能稍逊于绝对布局，但是能够做到自动伸缩布局的特性，推荐使用，参考代码如下：
Rectangle {
id: rect1
x: 20
width: 200; height: 200
}
Rectangle {
id: rect2
height: 200
anchors.left: rect1.left
anchors.top: rect1.bottom
anchors.right: rect1.right
anchors.rightMargin: 20
}
5.3 使用相对布局：相对布局的一个可能的好处是能够依赖于指定组件的位置进行布局，但是带来的后果是在跨平台上位置总是有时候会出现不一致的情况，然而在windows上却表现的非常好，所以，应该尽量避免这种潜在bug，不然后面编译的时候，头疼，参考代码如下：
Rectangle {
id: rect1
x: 20
width: 200; height: 200
}
Rectangle {
id: rect2
x: rect1.x
y: rect1.y + rect1.height
width: rect1.width - 20
height: 200
}
注意： 5.2 和 5.3 两种布局都实现了两个矩形的定位，但是，5.2的效率更高，在跨平台上不会因为dpi的问题导致位置间距不一样，切记。
5.4、功能板块尽量进行分区域（分块）进行布局：建议将一个页面进行划分区域（Item），然后再进行布局，避免内部布局受外部布局的影响，如图所示：
大致的一些布局关系就说到这里，布局的建议不一定完全适合所有情况，需要自己合理使用。
注意：针对于一些高分辨率低尺寸的屏幕，需要根据dpi来进行相对位置的偏移。