QML深入学习四（布局用法）

only-lucky2026-05-17 14:38

锚点anchors

复制代码 
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    Rectangle{
        id:containerId
        width: 300
        height: width
        border.color: "black"
        anchors.centerIn: parent

        Rectangle{
            id:topLeftid
            width: 100
            height: 100
            color: "magenta"
            Text {
                id: topLefttxtid
                text: qsTr("1")
                anchors.centerIn: parent
                font.pointSize: 20
            }
        }

        Rectangle{
            anchors.left: topLeftid.right
            id:topMidid
            width: 100
            height: 100
            color: "yellowgreen"
            Text {
                id: topMidtxtid
                text: qsTr("2")
                anchors.centerIn: parent
                font.pointSize: 20
            }
        }
        Rectangle{
            anchors.left: topMidid.right
            id:topRightid
            width: 100
            height: 100
            color: "dodgerblue"
            Text {
                id: topRighttxtid
                text: qsTr("3")
                anchors.centerIn: parent
                font.pointSize: 20
            }
        }

        Rectangle{
            anchors.top: topLeftid.bottom
            id:midLeftId
            width: 100
            height: 100
            color: "red"
            Text {
                id: midLeftTxtId
                text: qsTr("4")
                anchors.centerIn: parent
                font.pixelSize: 20
            }
        }
        //方式一：锚点anchors
        // Rectangle{
        //     anchors.left: midLeftId.right
        //     anchors.top:topRightid.bottom
        //     id:midmidId
        //     width: 100
        //     height: 100
        //     color: "green"
        //     Text {
        //         id: midmidTxtId
        //         text: qsTr("5")
        //         anchors.centerIn: parent
        //         font.pixelSize: 20
        //     }
        // }
        //方式二：使用中心
        Rectangle{
            anchors.centerIn: parent
            id:midmidId
            width: 100
            height: 100
            color: "green"
            Text {
                id: midmidTxtId
                text: qsTr("5")
                anchors.centerIn: parent
                font.pixelSize: 20
            }
        }
        Rectangle{
            anchors.left: midmidId.right
            anchors.top:topRightid.bottom
            id:midRightId
            width: 100
            height: 100
            color: "blue"
            Text {
                id: midRightTxtId
                text: qsTr("6")
                anchors.centerIn: parent
                font.pixelSize: 20
            }
        }
        Rectangle{
            anchors.top:midmidId.bottom
            id:bottomLeftId
            width: 100
            height: 100
            color: "royalblue"
            Text {
                id: bottomLeftTxtId
                text: qsTr("7")
                anchors.centerIn: parent
                font.pixelSize: 20
            }
        }
        Rectangle{
            anchors.left: bottomLeftId.right
            anchors.top:midmidId.bottom
            id:bottomMidId
            width: 100
            height: 100
            color: "yellow"
            Text {
                id: bottomMidTxtId
                text: qsTr("8")
                anchors.centerIn: parent
                font.pixelSize: 20
            }
        }

        Rectangle{
            anchors.left: bottomMidId.right
            anchors.top:midmidId.bottom
            id:bottomRightId
            width: 100
            height: 100
            color: "pink"
            Text {
                id:bottomRightTxtId
                text: qsTr("9")
                anchors.centerIn: parent
                font.pixelSize: 20
            }
        }
    }
    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

锚点边距与偏移

复制代码 
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    Rectangle{
        id:containerId
        width: 300
        height: width
        border.color: "black"
        anchors.centerIn: parent

        Rectangle{
            id:topLeftid
            width: 100
            height: 100
            color: "magenta"
            Text {
                id: topLefttxtid
                text: qsTr("1")
                anchors.centerIn: parent
                font.pointSize: 20
            }
        }

        Rectangle{
            anchors.left: topLeftid.right
            id:topMidid
            width: 100
            height: 100
            color: "yellowgreen"
            Text {
                id: topMidtxtid
                text: qsTr("2")
                anchors.centerIn: parent
                font.pointSize: 20
            }
        }
        Rectangle{
            anchors.left: topMidid.right
            id:topRightid
            width: 100
            height: 100
            color: "dodgerblue"
            Text {
                id: topRighttxtid
                text: qsTr("3")
                anchors.centerIn: parent
                font.pointSize: 20
            }
        }

        Rectangle{
            anchors.top: topLeftid.bottom
            id:midLeftId
            width: 100
            height: 100
            color: "red"
            Text {
                id: midLeftTxtId
                text: qsTr("4")
                anchors.centerIn: parent
                font.pixelSize: 20
            }
        }
        //方式一：锚点anchors
        Rectangle{
            // anchors.left: midLeftId.right
            // anchors.top:topRightid.bottom
        // anchors.topMargin: 10 //会影响其他元素。。。所有的
        // anchors.rightMargin: 10 //设置了锚点设置边距才有用。。。

            //方式二：使用中心
            // anchors.centerIn: parent
            //等价于：
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            anchors.horizontalCenterOffset: 10
            anchors.verticalCenterOffset: -10

            id:midmidId
            width: 100
            height: 100
            color: "green"
            Text {
                id: midmidTxtId
                text: qsTr("5")
                anchors.centerIn: parent
                font.pixelSize: 20
            }
        }
        // //方式二：使用中心
        // Rectangle{
        //     anchors.centerIn: parent
        //     id:midmidId
        //     width: 100
        //     height: 100
        //     color: "green"
        //     Text {
        //         id: midmidTxtId
        //         text: qsTr("5")
        //         anchors.centerIn: parent
        //         font.pixelSize: 20
        //     }
        // }
        Rectangle{
            anchors.left: midmidId.right
            anchors.top:topRightid.bottom
            id:midRightId
            width: 100
            height: 100
            color: "blue"
            Text {
                id: midRightTxtId
                text: qsTr("6")
                anchors.centerIn: parent
                font.pixelSize: 20
            }
        }
        Rectangle{
            // anchors.top:midmidId.bottom
            anchors.top:midLeftId.bottom

            id:bottomLeftId
            width: 100
            height: 100
            color: "royalblue"
            Text {
                id: bottomLeftTxtId
                text: qsTr("7")
                anchors.centerIn: parent
                font.pixelSize: 20
            }
        }
        Rectangle{
            anchors.left: bottomLeftId.right
            anchors.top:midmidId.bottom
            id:bottomMidId
            width: 100
            height: 100
            color: "yellow"
            Text {
                id: bottomMidTxtId
                text: qsTr("8")
                anchors.centerIn: parent
                font.pixelSize: 20
            }
        }

        Rectangle{
            anchors.left: bottomMidId.right
            anchors.top:midmidId.bottom
            id:bottomRightId
            width: 100
            height: 100
            color: "pink"
            Text {
                id:bottomRightTxtId
                text: qsTr("9")
                anchors.centerIn: parent
                font.pixelSize: 20
            }
        }
    }
    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

锚点父级与兄弟关系

复制代码 
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    Rectangle{
        id:containerId
        width: 300
        height: width
        border.color: "black"
        anchors.centerIn: parent

        Rectangle{
            id:topLeftid
            anchors.top: siblingId.bottom //no
            //qrc:/main.qml:17:9: QML Rectangle: Cannot anchor to an item that isn't a parent or sibling.


            width: 100
            height: width
            color: "magenta"
        }
    }
    Rectangle{
        id:siblingId
        width: 100
        height: width
        color: "black"
        // anchors.right: containerId.left //只能containerId，不能topLeftid

    }
    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

定位器（Positioners）

Grid网格布局

默认是四列，需要指定rows或者columns

复制代码 
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    //网格布局，需要划分为多少列,多少行
    Grid{
        columns: 2
        // rows: 2
        Rectangle{
            width: 20
            height: 100
            color: "magenta"
            Text {
                text: qsTr("1")
                anchors.centerIn: parent
            }
        }
        Rectangle{
            width: 60
            height: 60
            color: "green"
            Text {
                text: qsTr("2")
                anchors.centerIn: parent
            }
        }
        Rectangle{
            width: 60
            height: 60
            color: "blue"
            Text {
                text: qsTr("3")
                anchors.centerIn: parent
            }
        }
        Rectangle{
            width: 60
            height: 60
            color: "red"
            Text {
                text: qsTr("4")
                anchors.centerIn: parent
            }
        }
    }
    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

Row行布局

显示效果为一行

Column列布局

显示效果为一列

设置布局的位置

此时，我想改变第一个矩形的位置，应该怎么做呢？

复制代码 
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    //网格布局，需要划分为多少列,多少行
    Grid{
        horizontalItemAlignment: Grid.AlignTop |Grid.AlignRight
        verticalItemAlignment: Grid.AlignVCenter //中间对齐
        LayoutMirroring.enabled: true //镜像效果，反转
        LayoutMirroring.childrenInherit: true //里面的子元素也继承
        rows: 2
        Rectangle{
            width: 20
            height: 100
            color: "magenta"
            Text {
                text: qsTr("1")
                anchors.centerIn: parent
            }
        }
        Rectangle{
            width: 60
            height: 60
            color: "green"
            Text {
                text: qsTr("2")
                anchors.centerIn: parent
            }
        }
        Rectangle{
            width: 20
            height: 50
            color: "blue"
            Text {
                text: qsTr("3")
                anchors.centerIn: parent
            }
        }
        Rectangle{
            width: 60
            height: 60
            color: "red"
            Text {
                text: qsTr("4")
                anchors.centerIn: parent
            }
        }
    }
    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

Layouts布局

GridLayout布局

默认不局限与4列，他的作用是可以随着窗口大小改变的同时，自动改变大小。

复制代码 
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    //网格布局
    GridLayout{
        anchors.fill: parent
        columns: 3
        Rectangle{
            width: 20
            height: 100
            color: "magenta"
            Text {
                text: qsTr("1")
                anchors.centerIn: parent
            }
        }
        Rectangle{
            width: 60
            height: 60
            color: "green"
            Text {
                text: qsTr("2")
                anchors.centerIn: parent
            }
        }
        Rectangle{
            width: 20
            height: 50
            color: "blue"
            Text {
                text: qsTr("3")
                anchors.centerIn: parent
            }
        }
        Rectangle{
            width: 60
            height: 60
            color: "red"
            Text {
                text: qsTr("4")
                anchors.centerIn: parent
            }
        }
        Rectangle{
            width: 60
            height: 60
            color: "yellow"
            Text {
                text: qsTr("5")
                anchors.centerIn: parent
            }
        }
    }
    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

RowLayout

ColumnLayout

这两个也是一样的，就不着重介绍了，以下代码介绍设置单个的位置。Grid就实现不了

复制代码 
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    //网格布局
    GridLayout{
        columns: 2

        anchors.fill: parent
        Rectangle{
            width: 20
            height: 100
            color: "magenta"
            Text {
                text: qsTr("1")
                anchors.centerIn: parent
            }
            Layout.alignment: Qt.AlignRight |Qt.AlignTop
        }
        Rectangle{
            width: 60
            height: 60
            color: "green"
            Text {
                text: qsTr("2")
                anchors.centerIn: parent
            }
        }
        Rectangle{
            width: 20
            height: 50
            color: "blue"
            Text {
                text: qsTr("3")
                anchors.centerIn: parent
            }
        }
        Rectangle{
            width: 60
            height: 60
            color: "red"
            Text {
                text: qsTr("4")
                anchors.centerIn: parent
            }
        }
        Rectangle{
            width: 60
            height: 60
            color: "yellow"
            Text {
                text: qsTr("5")
                anchors.centerIn: parent
            }
        }
    }
    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

设置多行跨越

复制代码 
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    //网格布局
    GridLayout{
        columns: 2
        Layout.fillHeight: true //不能设置全部的，必须单个去设置
        Layout.fillWidth: true //不能设置全部的，必须单个去设置
        anchors.fill: parent

        Rectangle{
            width: 20
            height: 100
            color: "magenta"
            Text {
                text: qsTr("1")
                anchors.centerIn: parent
            }
            Layout.alignment: Qt.AlignRight |Qt.AlignTop //设置位置
            Layout.fillWidth: true //填满可用空间
            Layout.fillHeight: true //填满可用空间
            Layout.maximumHeight: 150 //设置最大高度
            Layout.maximumWidth: 140 //设置最大宽度

        }
        Rectangle{
            width: 60
            height: 60
            color: "green"
            Text {
                text: qsTr("2")
                anchors.centerIn: parent
            }
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
        Rectangle{
            width: 20
            height: 50
            color: "blue"
            Text {
                text: qsTr("3")
                anchors.centerIn: parent
            }
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
        Rectangle{
            width: 60
            height: 60
            color: "red"
            Text {
                text: qsTr("4")
                anchors.centerIn: parent
            }
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
        Rectangle{
            width: 60
            height: 60
            color: "yellow"
            Text {
                text: qsTr("5")
                anchors.centerIn: parent
            }
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 2 //设置占据的列数
        }
    }
    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

设置方向

layoutDirection: Qt.RightToLeft //设置方向

Flow元素

Flow项将其子项定位为页面上的单词，包裹它们以创建行或列的项目。

复制代码 
    Flow {
        anchors.fill: parent
        anchors.margins: 4
        spacing: 10

        Text { text: "Text"; font.pixelSize: 40 }
        Text { text: "items"; font.pixelSize: 40 }
        Text { text: "flowing"; font.pixelSize: 40 }
        Text { text: "inside"; font.pixelSize: 40 }
        Text { text: "a"; font.pixelSize: 40 }
        Text { text: "Flow"; font.pixelSize: 40 }
        Text { text: "item"; font.pixelSize: 40 }
    }

设置之后，矩阵可以根据窗口大小，进行换行操作

复制代码 
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")


    Flow{
        Layout.fillHeight: true //不能设置全部的，必须单个去设置
        Layout.fillWidth: true //不能设置全部的，必须单个去设置
        anchors.fill: parent
        Rectangle{
            width: 20
            height: 100
            color: "magenta"
            Text {
                text: qsTr("1")
                anchors.centerIn: parent
            }
            Layout.alignment: Qt.AlignRight |Qt.AlignTop //设置位置
            Layout.fillWidth: true //填满可用空间
            Layout.fillHeight: true //填满可用空间
            Layout.maximumHeight: 150 //设置最大高度
            Layout.maximumWidth: 140 //设置最大宽度

        }
        Rectangle{
            width: 60
            height: 60
            color: "green"
            Text {
                text: qsTr("2")
                anchors.centerIn: parent
            }
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
        Rectangle{
            width: 20
            height: 50
            color: "blue"
            Text {
                text: qsTr("3")
                anchors.centerIn: parent
            }
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
        Rectangle{
            width: 60
            height: 60
            color: "red"
            Text {
                text: qsTr("4")
                anchors.centerIn: parent
            }
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
        Rectangle{
            width: 60
            height: 60
            color: "yellow"
            Text {
                text: qsTr("5")
                anchors.centerIn: parent
            }
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 2 //设置占据的列数
        }
    }

    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

flow: Flow.TopToBottom//排列顺序

layoutDirection: Qt.RightToLeft //位置

相关推荐
一隅论数智3 天前
给AI一张“业务概念地图“：本体如何从哲学走向企业智能
大数据·人工智能·经验分享·笔记·学习·学习方法·政务
XiHongShi20163 天前
STM32F407 RTC定时器例程，建议保存
stm32·单片机·学习
爱吃苹果的日记本3 天前
离散数学第六课
学习·离散数学
AI职业加油站3 天前
AI智能体应用工程师证书：政策红利下的职业新风口
大数据·运维·人工智能·学习·职场发展
旖旎夜光3 天前
力控面试题 01.01： 判定字符是否唯一（位运算） —— 题解
c++·学习·算法·leetcode·力控
奇思妙想聪明勤奋的小羊3 天前
DeepAgents第5章：子Agent 与上下文隔离—让 Agent学会委派
人工智能·python·学习·语言模型
霍霍的袁3 天前
【C++】map 和 set 的使用 | 从用法到底层
开发语言·c++·学习·visual studio
彧azz3 天前
Linux 环境下 Redis 学习总结：数据类型、持久化、锁、事务、主从与缓存问题
linux·redis·笔记·学习·面试
我爱cope3 天前
【操作系统 | 计算机硬件：CPU、内存与 I/O 如何支撑操作系统？】
学习·操作系统
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02Telegram APK 下载安装完整指南 — 2026年最新03GitHub 镜像站点042026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享05历年考研数学一、数学二、数学三真题试卷及答案PDF06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接072026年CSP-J初赛分数线-----预测08微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新092026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？10人工智能（AI）发展史：详细里程碑