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

本文介绍了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 }
    }
}

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值