QT6.5+qt-quick+qml+cmake的Item布局学习

Item 是一个基础元素，它本身不会渲染任何东西，也不会提供一个窗口来显示其内容。Window 是一个可以显示内容的顶级元素，它通常会包含一个或多个子元素来构建用户界面。
Item是全部QML可视化对象的根，所有可视化类型都由该类型派生出来，基础的布局属性
import QtQuick.Layouts 1.15-----ColumnLayout
import QtQuick.Controls 2.6------Button
主要涉及内容
1. width/height-尺寸信息-Label标签-Rectangle矩形： color:"red"Rectangle 和 Text 等元素通常支持 color 属性，但像 ColumnLayout 或 RowLayout 这样的布局元素则不支持。
2. anchors-------相对位置
3. x/y-------------绝对位置：以父控件的左上角为坐标原点，向右为x轴正向，向下为y轴正向
4. 尺寸填充：fill:anchors.fill-当前的尺寸信息会变成指定Item的尺寸信息
5. enable----------使能，当该属性被设置为false后，该Item将不再接受任何鼠标或者键盘事件，但是在界面依然可以看到该控件
6. visible------------可见性---界面里面的可见性
7. z----------层级关系,数值越大，层级越高
8. opacity-------透明度,数值越大，越不透明，有效取值范围（0.0~1.0）

下面所有的代码全在main.qml里面编写的

import QtQuick
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.6
Window {width:300height:300visible: true//必须有这句才能显示title: qsTr("Hello World")ColumnLayout{Rectangle{width:rect2_1_0.width+rect2_1_1.width+rect2_1_2height:Math.max(rect2_1_0.height,rect2_1_1.height,rect2_1_2)Rectangle{id:rect2_1_0width:100height:300//color:"#e23333"Rectangle{anchors.top:parent.topanchors.left: parent.leftanchors.topMargin: 20anchors.leftMargin:20width:60height:60color:"blue"Rectangle{// x:20//y:20//anchors.fill: parentwidth:20height:20color:"red"}}Rectangle{y:120x:20width:60height:60color:"blue"Rectangle{x:20y:20width:20height:20color:"red"}}Rectangle{y:200x:20width:60height:60color:"blue"Rectangle{anchors.top:parent.topanchors.left: parent.leftanchors.topMargin: 40anchors.leftMargin:40width:20height:20color:"red"}}}Rectangle{id:rect2_1_1width:100height:300color:"green"anchors.left:rect2_1_0.rightButton{x:10width:80height:20enabled:truetext:"使能按键"}Button{y:30x:10width:80height:20enabled:falsetext:"不使能的按键"}Button{y:60x:10width:80height:20visible:truetext:"可见按键"}Rectangle{y:90width:100height:100color:"#e23333"Button{y:20width:100height:60visible:truetext:"不可见按键"}}Rectangle{y:220x:20width:60height:60color:"black"opacity:0.5}//它的左边锚点（`anchors.left`）被设置为`rect2_1_0.right`，意味着它将紧挨`rect2_1_0`的右侧放置，实现左右排布。}Rectangle{id:rect2_1_2width:100height:300color:"yellow"anchors.left:rect2_1_1.rightRectangle{width:100;height:150Rectangle{color:"red"width:75;height:75}Rectangle{color:"blue"x:25;y:25;width:75;height:75}}//指定层级关系Rectangle{y:150width:100;height:150Rectangle{z:100color:"red"width:75;height:75}Rectangle{color:"blue"x:25;y:25;width:75;height:75}}//它的左边锚点（`anchors.left`）被设置为`rect2_1_0.right`，意味着它将紧挨`rect2_1_0`的右侧放置，实现左右排布。}}}
}

效果如下：