qml ColumnLayout详解

1、概述

ColumnLayout 是 QML 中用于在垂直方向上排列子元素的一种布局管理器。它继承自 Item 并提供了简单的布局机制，使得子元素能够按照从上到下的顺序自动排列。ColumnLayout 通常用于创建具有垂直层次结构的用户界面。

2、重要属性

• layoutDirection
  • 类型：枚举
  • 说明：设置布局的方向（在 ColumnLayout 中通常默认为垂直方向）。
• spacing
  • 类型：实数
  • 说明：设置子元素之间的间距。

• Layout.minimumWidth
  • 说明：设置子元素的最小宽度。
• Layout.minimumHeight
  • 说明：设置子元素的最小高度。
• Layout.preferredWidth
  • 说明：设置子元素的首选宽度。
• Layout.preferredHeight
  • 说明：设置子元素的首选高度。
• Layout.maximumWidth
  • 说明：设置子元素的最大宽度。
• Layout.maximumHeight
  • 说明：设置子元素的最大高度。
• Layout.fillWidth
  • 类型：布尔值
  • 说明：如果设置为 true，子元素将尝试填充其父元素的宽度。
• Layout.fillHeight
  • 类型：布尔值
  • 说明：在 ColumnLayout 中，这通常不是很有用，因为子元素按垂直顺序排列。
• Layout.alignment
  • 类型：枚举
  • 说明：设置子元素在其分配空间内的对齐方式。
• Layout.margins
  • 类型：实数
  • 说明：设置子元素与其父元素边界之间的统一外边距。
• Layout.leftMargin
  • 类型：实数
  • 说明：设置子元素左侧的外边距。
• Layout.rightMargin
  • 类型：实数
  • 说明：设置子元素右侧的外边距。
• Layout.topMargin
  • 类型：实数
  • 说明：在 ColumnLayout 中，可用于控制子元素与上一个子元素之间的垂直间距。
• Layout.bottomMargin
  • 类型：实数
  • 说明：在 ColumnLayout 中，通常不是必需的，因为每个子元素会自动换行。

Window {
    visible: true
    width: 640
    height: 480
    id: root

    ColumnLayout{
        spacing: 2

        Rectangle {
            Layout.alignment: Qt.AlignCenter
            color: "red"
            Layout.preferredWidth: 40
            Layout.preferredHeight: 40
        }

        Rectangle {
            Layout.alignment: Qt.AlignRight
            color: "green"
            Layout.preferredWidth: 40
            Layout.preferredHeight: 70
        }

        Rectangle {
            Layout.alignment: Qt.AlignBottom
            Layout.fillHeight: true
            color: "blue"
            Layout.preferredWidth: 70
            Layout.preferredHeight: 40
        }
    }
}

觉得有帮助的话，打赏一下呗。。

           

需要商务合作（定制程序）的欢迎私信！！