QML <1> Item 布局 属性

QML <1> Item 布局 属性

一、Item 文档描述

The Item type is the base type for all visual items in Qt Quick.
All visual items in Qt Quick inherit from Item. Although an Item object has no visual appearance, it defines all the attributes that are common across visual items, such as x and y position, width and height, anchoring and key handling support.

Item 类型是 Qt Quick 中所有可视项的基本类型。
Qt Quick 中的所有可视项都继承自 Item。 尽管 Item 对象不可视,但它定义了所有视觉项的通用属性,例如 x 和 y 位置、宽度和高度、锚定和关键处理支持。

二 、 anchor

只能用于父子关系控件 或者 同级控件
锚线:
在这里插入图片描述
锚边距:
在这里插入图片描述
锚偏移:
horizontalCenterOffset 水平中心的偏移
verticalCenterOffset 垂直中心的偏移
baselineOffset 基线的偏移

baseline :基线对应于文字所在的假想线。对于没有文字的项目,它与顶部相同

三、 LayoutMirroring

默认布局方式 left -> right 启用改属性 可还未 right -> left
childrenInherit 确定子控件是否启用镜像布局

 import QtQuick 2.12
import QtQuick.Window 2.12
import "./Custom"
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World") 
    CustomWidget
    {
        anchors.centerIn:  parent
        width:   400
        height:  80
    }
}

CustomWidget.qml

Rectangle
 {
     id:root
     LayoutMirroring.enabled: true //启用镜像布局
     LayoutMirroring.childrenInherit: true// 镜像布局 向下传递
     Row
     {
         spacing: 5
         Repeater
         {
             model:6
             Rectangle
             {
                 width: 60
                 height: 40
                 color: "red"
                 Text {
                     text: index
                     anchors.centerIn: parent
                 }
                 opacity: index /6
             }
         }
     }
 }
 LayoutMirroring.enabled: true //启用镜像布局
// LayoutMirroring.childrenInherit: true// 镜像布局 向下传递

在这里插入图片描述

 LayoutMirroring.enabled: true //启用镜像布局
  LayoutMirroring.childrenInherit: true// 镜像布局 向下传递

在这里插入图片描述

四、Z 属性

QT 文档描述:
Sets the stacking order of sibling items. By default the stacking order is 0.
Items with a higher stacking value are drawn on top of siblings with a lower stacking order. Items with the same stacking value are drawn bottom up in the order they appear. Items with a negative stacking value are drawn under their parent’s content.

设置同级项的堆叠顺序。 默认情况下,堆叠顺序为 0。
具有较高堆叠值的项目绘制在具有较低堆叠顺序的同级项之上。

Rectangle {
        z:10
        color: "red"
        x: 10; y: 10 ;width: 100; height: 100
    }
    Rectangle {
        z:5
        color: "blue"
        x: 60; y: 60; width: 100; height: 100
    }

在这里插入图片描述

具有相同堆叠值的项目按照它们出现的顺序自下而上绘制。
Rectangle { color: "red" x: 10; y: 10 ;width: 100; height: 100 } Rectangle { color: "blue" x: 60; y: 60; width: 100; height: 100 }在这里插入图片描述

具有负堆叠值的项目将绘制在其父项的内容下。

 Rectangle {
        z:10
        color: "red"
        x: 10; y: 10 ;width: 100; height: 100
    }
    Rectangle
    {
        z:5
        color: "green"
         x: 60; y: 60; width: 100; height: 100

         Rectangle {
             z:-1
             color: "blue"
             width: 200; height: 200
             anchors.centerIn: parent
         }
    }

在这里插入图片描述

参考

https://baijiahao.baidu.com/s?id=1669437447643050469&wfr=spider&for=pc
https://blog.csdn.net/gelin520gelin/article/details/32709559

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值