网页网站制作培训班,WordPress注册免发邮件,自媒体平台有哪些赚钱,做音乐网站的目的0、想要的效果 1、问题描述
经测试#xff1a;Page的头部无法完美的进行左右边距设置#xff0c;leftMargin可以#xff0c;rightMargin不可以。。。。
Page {// ...header: Frame {id: headerheight: 70// 必须首先锚定位#xff0c;然后设置边距才生效padding: 0anchor…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: redborder {color: #1EB0FCwidth: 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: transparentborder {color: #1EB0FCwidth: 1}radius: 10}rightInset: 20 // 从右侧开裁剪20距离的背景}// ...
}
