QML 布局管理器之ColumnLayout

士毅

已于 2024-03-17 00:07:23 修改

阅读量1.2k

点赞数 3

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

于 2024-03-17 00:05:37 首次发布

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

版权

QML 基础专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了QML中的ColumnLayout布局元素，重点讲解了其主要属性如minimumWidth、fillWidth等，并通过示例展示了如何在垂直列中管理和控制子元素的尺寸和填充效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.ColumnLayout讲解

QML中的ColumnLayout是一种布局元素，用于在垂直列中排列其子元素。它的主要使用下列附加属性:
Layout.minimumWidth

Layout.minimumHeight

Layout.preferredWidth

Layout.preferredHeight

Layout.maximumWidth

Layout.maximumHeight

Layout.fillWidth

Layout.fillHeight

Layout.alignment

二.ColumnLayout使用示例：

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

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

    ColumnLayout {
        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
        }
    }
}

运行结果：