Qt/QML布局-锚点布局

QML的锚点布局

在QML中的布局方式参考的HTML,有多种,其中锚点是个人比较喜欢使用的一种。

锚线

一个部件有七个锚线(anchor lines), 分别是left、right、top、bottom、horizontalCenter、verticalCenter和baseline。这里的anchor lines都是不可见的。

边距

anchor还提供了控件的边距设置，基本元素分别为leftMargin、rightMargin、topMargin、bottomMargin。如下图所示，橙色背景的方块代表一个部件，则它的四周顺时针分别表示为左侧边距、顶部边距、右侧边距、底部边距。

示例

import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Controls 2.4  Window {     visible: true     width: 600     height: 480     title: qsTr(Hello World)      Rectangle {         id: rect1         width: 100         height: 100         color: blue         anchors.left: parent.left         anchors.leftMargin: 20     }      Rectangle {         id: rect2         width: 100         height: 100         color: red         anchors.left: rect1.right         anchors.leftMargin: 60     } }