QML ＜1＞ Item 布局属性

最新推荐文章于 2024-02-16 12:58:00 发布

风莫寻

最新推荐文章于 2024-02-16 12:58:00 发布

阅读量501

点赞数

分类专栏： QML 文章标签： qt 开发语言

本文链接：https://blog.csdn.net/jiang173707/article/details/121190784

版权

QML 专栏收录该内容

13 篇文章 7 订阅

订阅专栏

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
         }
    }