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

最新推荐文章于 2025-05-28 13:54:39 发布

m0_63052064

最新推荐文章于 2025-05-28 13:54:39 发布

阅读量785

点赞数 7

文章标签：学习

本文链接：https://blog.youkuaiyun.com/m0_63052064/article/details/143596529

版权

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

效果如下：