qml中解决Page控件头部元素Margin不生效的问题-编程知识

qml中解决Page控件头部元素Margin不生效的问题

0、想要的效果

在这里插入图片描述

1、问题描述

经测试：Page的头部无法完美的进行左右边距设置，leftMargin可以，rightMargin不可以。。。。

Page {// ...header: Frame {id: headerheight: 70// 必须首先锚定位，然后设置边距才生效padding: 0anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.rightanchors.topMargin: 20anchors.leftMargin: 10anchors.rightMargin: 10background: Rectangle {color: "red"border {color: "#1EB0FC"width: 1}radius: 10}//rightInset: 18 //勉强充当 rightMargin效果}// ...
}

在这里插入图片描述
如何解决此问题？？？

利用 qml之Control类型布局讲解，padding属性和Inset属性细讲一文中讲解的Inset属性解决此问题。
说白了，就是加了leftMargin边距后，整体右移导致右侧的看起来溢出了。。。
在Design中看看上述所述的效果，如下所示：
在这里插入图片描述

直接用Inset属性对Frame进行从右侧裁剪即可。。
将rightInset设置为20，其在Design中的效果如下图所示：
在这里插入图片描述

其实际运行效果如下图所示：
在这里插入图片描述

将背景色设置为transparent，就达到我一开始想要的效果了，如下图所示。
在这里插入图片描述

最终修改后的头部代码如下：

Page {// ...// 经测试：Page的头部无法完美的进行左右边距设置，leftMargin可以，rightMargin不可以。。。。// 此时可以采用Inset属性来裁剪溢出的背景。// 头部header: Frame {id: headerheight: 70// 必须首先锚定位，然后设置边距才生效padding: 0anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.rightanchors.topMargin: 20anchors.leftMargin: 10background: Rectangle {color: "transparent"border {color: "#1EB0FC"width: 1}radius: 10}rightInset: 20 // 从右侧开裁剪20距离的背景}// ...
}