QML 布局管理器之RowLayout

士毅

已于 2024-03-16 23:54:10 修改

阅读量553

点赞数 2

分类专栏： QML 基础文章标签： qml

于 2024-03-16 23:39:50 首次发布

本文链接：https://blog.csdn.net/liushiyi3083862599/article/details/136772785

版权

QML 基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一.RowLayout讲解

RowLayout可以看作是只有一行的GridLayout，它的行为与Row类似，不同之处在它所管理的元素可以使用下列附加属性:
Layout.minimumWidth

Layout.minimumHeight

Layout.preferred Width

Layout.preferredHeight

Layout.maximumWidth

Layout.maximumHeight

Layout.fillWidth

Layout.fillHeight

Layout.alignment

二.RowLayout使用示例

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("RowLayout Example")

    RowLayout {
        //横向布局填充整个窗口区域
        anchors.fill: parent
        anchors.margins: 10
        spacing: 10
        
        //横向布局区域居中显示
        Rectangle {
            color: "red"
            Layout.preferredWidth: 100
            Layout.preferredHeight: 100
        }

        //填充区域宽度和高度显示
        Rectangle {
            color: "green"
            Layout.fillWidth: true;
            Layout.fillHeight: true;
        }

        //横向布局区域剧中显示
        Rectangle {
            color: "blue"
            Layout.preferredWidth: 100
            Layout.preferredHeight: 100
        }
    }
}

运行结果：