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
}


相关文章
|
安全 网络协议 数据安全/隐私保护
掌握Qt和C++:构建你的第一个P2P应用程序
掌握Qt和C++:构建你的第一个P2P应用程序
489 3
|
存储 JavaScript 前端开发
qml var类型详解
qml var类型详解
300 1
|
数据可视化 JavaScript 前端开发
Qt Quick 定时技巧全攻略:从底层原理到高级应用(二)
Qt Quick 定时技巧全攻略:从底层原理到高级应用
630 0
|
编解码 容器
QML/Qt Quick anchors.fill 的使用(二)
QML/Qt Quick anchors.fill 的使用
414 0
|
算法 数据可视化 前端开发
第三代软件开发-QCustomPlot核心迁移
欢迎来到我们的 QML & C++ 项目!这个项目结合了 QML(Qt Meta-Object Language)和 C++ 的强大功能,旨在开发出色的用户界面和高性能的后端逻辑。 在项目中,我们利用 QML 的声明式语法和可视化设计能力创建出现代化的用户界面。通过直观的编码和可重用的组件,我们能够迅速开发出丰富多样的界面效果和动画效果。同时,我们利用 QML 强大的集成能力,轻松将 C++ 的底层逻辑和数据模型集成到前端界面中。 在后端方面,我们使用 C++ 编写高性能的算法、数据处理和计算逻辑。C++ 是一种强大的编程语言,能够提供卓越的性能和可扩展性。我们的团队致力于优化代码,减少资
|
机器学习/深度学习 存储 监控
Elasticsearch 在日志分析中的应用
【9月更文第2天】随着数字化转型的推进,日志数据的重要性日益凸显。日志不仅记录了系统的运行状态,还提供了宝贵的洞察,帮助企业改进产品质量、优化用户体验以及加强安全防护。Elasticsearch 作为一个分布式搜索和分析引擎,因其出色的性能和灵活性,成为了日志分析领域的首选工具之一。本文将探讨如何使用 Elasticsearch 作为日志分析平台的核心组件,并详细介绍 ELK(Elasticsearch, Logstash, Kibana)栈的搭建和配置流程。
819 4
|
存储 API 数据库
QML使用Sqlite数据库存储ListModel数据
本文介绍了在QML中使用Sqlite数据库存储ListModel数据的方法,包括如何创建数据库、读取数据、动态添加和删除数据,以及如何在程序启动和退出时与数据库同步数据。
264 2
|
弹性计算 运维 程序员
2核2G阿里云服务器价格多少?2024年阿里云61元一年2核2G3M配置云服务器测评参考
2核2G阿里云服务器价格多少?2024年阿里云61元一年2核2G3M配置云服务器测评参考。随着数字化浪潮的推进,云服务器已成为企业与个人开展线上业务不可或缺的基础设施。阿里云,作为国内云服务市场的佼佼者,其轻量应用服务器因其实用性与性价比受到了广泛关注。对于众多开发者与运维工程师而言,服务器的配置与价格始终是关注的焦点。那么,阿里云2核2G轻量应用服务器的价格究竟如何呢?
664 0
|
开发工具 C++
qt开发技巧与三个问题点
本文介绍了三个Qt开发中的常见问题及其解决方法,并提供了一些实用的开发技巧。
334 0
qml 正则表达式的使用
qml 正则表达式的使用
140 0