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 //位置

相关推荐
蜗牛^^O^2 小时前
Agent学习笔记
笔记·学习
小郑加油2 小时前
python学习Day13：实际应用——pandas 进阶计算
python·学习·pandas
ps酷教程3 小时前
jackson学习
java·学习
NULL指向我3 小时前
STM32 F103C8T6学习笔记20：SPI驱动W25Qxx
笔记·stm32·学习
吃好睡好便好3 小时前
汽车行驶原理
学习·汽车
吃好睡好便好3 小时前
Matlab中三种三维图的对比
开发语言·人工智能·学习·算法·matlab·信息可视化
_Evan_Yao3 小时前
从“全量发布”到“小步快跑”：灰度发布的简单实践与学习路径
java·后端·学习
李白不吃坚果3 小时前
沟道电荷注入的思考
学习·cmos·模拟集成电路·开关·沟道电荷注入
三品吉他手会点灯4 小时前
C语言学习笔记 - 32.嵌入式C语言学习阶段对初学编程者的建议
c语言·开发语言·笔记·学习
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03【AI】2026 年具身智能模型和世界模型总结04CC-Switch & Claude 基于 Linux 服务器安装使用指南05Gemini大升级、AI眼镜首发、Android XR亮相，13天后见分晓06头歌软件工程导论UML画图题(基于starUML)07人工智能最新动态 AI 日报 · 2026年5月10日08Codex 手机端连接教程：三分钟搞定，附完整步骤09AI科技热点日报 | 2026年5月11日10裂开！ChatGPT 居然开始要手机号验证，附详细解决方法