QML笔记(三)之QML中的几种布局

我是黄同学

已于 2022-05-07 17:43:40 修改

阅读量2.2k

点赞数 1

分类专栏： QML 文章标签： QML

于 2022-05-07 17:42:55 首次发布

本文链接：https://blog.csdn.net/Joker__123/article/details/124635391

版权

QML 专栏收录该内容

10 篇文章 7 订阅

订阅专栏

本文介绍了QML中的四种基本布局方式：行布局（Row）、列布局（Column）、网格布局（Grid）和流方布局（Flow）。通过示例代码展示了如何使用这些布局实现控件的自动对齐和排列，帮助开发者更好地理解和应用QML的布局管理功能。

摘要由CSDN通过智能技术生成

一.前言
先前了解了QML的添加控件与绑定信号槽，那么控件的摆放就是一个问题，虽然可以手动去设置控件的位置，但是有些时候还是需要自动对齐啥的，这时候就需要用到布局，该篇文章先简单了解QML提供的布局方式，后续再做深入研究

二.QML布局方式
1.行布局（Row）

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 2.1

Window{
    visible: true
    width: 640
    height: 480
    title: qsTr("网格布局举例")

    // 行布局
    Rectangle{
        x:50
        y:200
        id:row_rect
        width: 200
        height: 100
        border.color: "green"
        radius: 15

        Row{
            spacing: 5  // 设置行与行之间的间距
            anchors.centerIn: parent  // 相对于父窗口居中
            Rectangle { color: "red"; width: 50; height: 50 }
            Rectangle { color: "green"; width: 50; height: 50 }
            Rectangle { color: "blue"; width: 50; height: 50 }
        }
    }
}

在这里插入图片描述
2.列布局（Column）

    // 列布局
    Rectangle{
        x:300
        y:200
        id:column_rect
        width: 200
        height: 300
        border.color: "green"
        radius: 15

        Column{
            spacing: 5  // 设置列与列之间的间距
            anchors.centerIn: parent  // 相对于父窗口居中
            Rectangle { color: "red"; width: 50; height: 50 }
            Rectangle { color: "green"; width: 50; height: 50 }
            Rectangle { color: "blue"; width: 50; height: 50 }
        }
    }

在这里插入图片描述
3.网格布局（Grid）

   // 网格布局
    Rectangle{
        x:300
        y:200
        id:gird_rect
        width: 200
        height: 200
        border.color: "green"
        radius: 15

        Grid{
            spacing: 5
            columns: 3
            anchors.centerIn: parent  // 相对于父窗口居中

            // 会根据设置的列数自动换行
            Rectangle { color: "red"; width: 50; height: 50 }
            Rectangle { color: "green"; width: 50; height: 50 }
            Rectangle { color: "blue"; width: 50; height: 50 }
            Rectangle { color: "black"; width: 50; height: 50 }
            Rectangle { color: "#125636"; width: 50; height: 50 }
            Rectangle { color: "gray"; width: 50; height: 50 }
            Rectangle { color: "#148936"; width: 50; height: 50 }
        }
    }

在这里插入图片描述
4.流方布局（Flow）

Window{
    visible: true
    width: 200
    height: 200
    title: qsTr("QML布局方式")
    Flow {
        anchors.fill: parent
        anchors.margins: 4
        spacing: 10

        Rectangle { color: "red"; width: 50; height: 50 }
        Rectangle { color: "green"; width: 50; height: 50 }
        Rectangle { color: "blue"; width: 50; height: 50 }
        Rectangle { color: "black"; width: 50; height: 50 }
        Rectangle { color: "#125636"; width: 50; height: 50 }
        Rectangle { color: "gray"; width: 50; height: 50 }
        Rectangle { color: "#148936"; width: 50; height: 50 }
        Rectangle { color: "#789632"; width: 50; height: 50 }
        Rectangle { color: "#223366"; width: 50; height: 50 }
    }
}