Qml:布局

简介: Qml:布局
import QtQuick
import QtQuick.Window
import QtQuick.Layouts
Window
{
    width: 1280
    height: 800
    visible: true
    title: qsTr("Test Layout")
    Rectangle
    {
        id:colroot
        implicitWidth: 300
        implicitHeight: 400
        color: "#EEEEEE"
        ColumnLayout
        {
            anchors.fill: parent
            spacing: 2
            Rectangle
            {
                color:"pink"
                Layout.minimumHeight: 40
                Layout.maximumHeight: 200
                Layout.maximumWidth: 300
                Layout.fillWidth: true
                Layout.fillHeight: true
                Text{anchors.centerIn: parent; text:parent.width +"x"+parent.height}
                MouseArea
                {
                    anchors.fill: parent
                    onClicked:
                    {
                        colroot.width+=10
                        colroot.height+=10
                    }
                }
            }
            Rectangle
            {
                color:"plum"
                Layout.fillWidth: true
                Layout.preferredHeight: 40
                Text{anchors.centerIn: parent; text:parent.width +"x"+parent.height}
                MouseArea
                {
                    anchors.fill: parent
                    onClicked:
                    {
                        colroot.width-=10
                        colroot.height-=10
                    }
                }
            }
            Rectangle
            {
                color:"lightgreen"
                Layout.preferredWidth: 100
                Layout.preferredHeight: 40
                Text{anchors.centerIn: parent; text:parent.width +"x"+parent.height}
            }
        }//ColumnLayout
        Text{text:"ColumnLayout"}
    }//colroot
    Rectangle
    {
        x:310
        id:rowroot
        implicitWidth: 600
        implicitHeight: 400
        color: "#EEEEEE"
        RowLayout
        {
            id:row
            anchors.fill: parent
            spacing: 0  //去掉间隔
            Rectangle
            {
                color:"pink"
                Layout.preferredWidth: 100
                Layout.fillHeight:true
                //放大背景
                MouseArea
                {
                    anchors.fill: parent
                    onClicked:
                    {
                        rowroot.width+=10
                        rowroot.height+=10
                    }
                }
                Text{anchors.centerIn: parent; text:parent.width +"x"+parent.height}
            }
            Rectangle
            {
                color:"lightgreen"
                Layout.fillWidth:true
                Layout.fillHeight:true
                Layout.minimumHeight: 100
                Layout.minimumWidth: 200
                MouseArea
                {
                    anchors.fill: parent
                    onClicked:
                    {
                        row.layoutDirection = (row.layoutDirection +1)%2
                    }
                }
                Text{anchors.centerIn: parent; text:parent.width +"x"+parent.height}
            }
            Rectangle
            {
                color:"plum"
                Layout.alignment: Qt.AlignRight //右对齐
                Layout.preferredWidth: 100
                Layout.fillHeight:true
                //缩小背景
                MouseArea
                {
                    anchors.fill: parent
                    onClicked:
                    {
                        rowroot.width-=10
                        rowroot.height-=10
                    }
                }
                Text{anchors.centerIn: parent; text:parent.width +"x"+parent.height}
            }
        }
        Text{text:"RowLayout"}
    }
    Rectangle
    {
        y:410
        id:gridroot
        implicitWidth: 300
        implicitHeight: 300
        color: "#EEEEEE"
        GridLayout
        {
            columns:3
            rowSpacing:0
            columnSpacing: 0
            //3X3
            Repeater
            {
                model:9
                Rectangle
                {
                    implicitWidth: 100
                    implicitHeight: 100
                    color: "lightgreen"
                    border.color: "pink"
                    border.width: 1
                }
            }
        }//GridLayout
        Text{text:"GridLayout"}
    }//gridroot
    Rectangle
    {
        x:310
        y:410
        id:stackroot
        implicitWidth: 300
        implicitHeight: 300
        color: "#EEEEEE"
        StackLayout
        {
            id:stack
            anchors.fill: parent
            currentIndex: 0 //当前显示哪个界面 从0开始
            Rectangle
            {
                color:"pink"
                Text{anchors.centerIn: parent; text:parent.width +"x"+parent.height}
            }
            Rectangle
            {
                color:"lightgreen"
                Text{anchors.centerIn: parent; text:parent.width +"x"+parent.height}
            }
            Rectangle
            {
                color:"lightblue"
                Text{anchors.centerIn: parent; text:parent.width +"x"+parent.height}
            }
        }//StackLayout
        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                stack.currentIndex = (stack.currentIndex+1) % stack.count
            }
        }
    }//stackroot
}


目录
打赏
0
0
0
0
8
分享
相关文章
Elasticsearch 在日志分析中的应用
【9月更文第2天】随着数字化转型的推进,日志数据的重要性日益凸显。日志不仅记录了系统的运行状态,还提供了宝贵的洞察,帮助企业改进产品质量、优化用户体验以及加强安全防护。Elasticsearch 作为一个分布式搜索和分析引擎,因其出色的性能和灵活性,成为了日志分析领域的首选工具之一。本文将探讨如何使用 Elasticsearch 作为日志分析平台的核心组件,并详细介绍 ELK(Elasticsearch, Logstash, Kibana)栈的搭建和配置流程。
746 4
Qt连接Mysql出现问题(一):“Driver not loaded Driver not loaded“
第一眼看见这张图我也觉得很奇怪,显示有QMYSQL但是又说没有,这不自相矛盾吗!
1873 4
QT QtableView操作详解
本文实现了使用QtableView控件来显示数据,数据源使用txt文本作为数据源,使用了QStandardItemModel作为数据模型来实现了对TableView空间的初始化,和对txt数据源的增删改查功能。
1018 0
QT QtableView操作详解
行政边界与路网、建筑轮廓、POI、基站数据下载网站整理
行政边界与路网、建筑轮廓、POI、基站数据下载网站整理
506 2
Webpack5有哪些更新?
Webpack5 在构建速度方面做出了一些改进,其中最重要的改进是使用持久性缓存。持久性缓存可以将中间结果存储在硬盘上,这些结果可以在下一次构建时被重用,从而减少了构建时间。此外,Webpack 5 还对构建输出进行了一些优化,以减少构建时间和输出文件大小。
【开题报告】基于SpringBoot的电子产品销售系统设计与实现
【开题报告】基于SpringBoot的电子产品销售系统设计与实现
555 0
《GAP8人工智能物联网芯片》:毫瓦级人脸识别 – 识别篇
人脸识别因在安全领域的不同应用(门锁,门禁,闸机等)而受到了学界,业界及媒体的广泛关注,同时人脸识别也可以被广泛应用于各种其他方案,如刷脸取纸,账户管理等等。设备可自动的使用者(区别于其他使用者)可以创造出完全不一样的用户体验,如人脸识别咖啡机可识别了解每个用户对不同咖啡的喜好程度,从而推荐或制作符合用户口味的咖啡。同时,咖啡供应商也可以根据结果进行更详细的市场分析,物流管控,生产调整等从而获得更高的利润。是否可以仅用数美金就让现有设备配备可以长期依赖电池运行的人脸识别功能? AliOS Things + GAP8让这一切可以轻松得以实现!
《GAP8人工智能物联网芯片》:毫瓦级人脸识别 – 识别篇
C++实现读写ini配置文件
配置文件的读取是每个程序必备的功能,配置文件的格式多种多样,例如:ini格式、json格式、xml格式等。其中属ini格式最为简单,且应用广泛。
1214 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等