ColumnLayout 列布局

• 一、概述
• 二、attached 属性介绍一下
• 三、例子
• • 1. 按钮组布局
  • 2. 官方排列

一、概述

ColumnLayout 其实就是 GridLayout 的一个很方便的类，推荐看完 GridLayout 再看看这个，这个使用也是非常的简单，
就是把需要布局的元素放置到 这个里面就好，只是这些被布局的元素的 长、宽度这些要注意一下，而且绑定也要注意一下，具体的注意事项在我博客专栏的 Layout 里面也说了的。

二、attached 属性介绍一下

attached 属性就是放在布局元素里面的，在布局器里面的元素的长宽这些是 用 这些 attached 属性确定，不能用 width 之类的哈。

这里都是 一下尺寸属性

• Layout.minimumWidth
• Layout.minimumHeight
• Layout.preferredWidth
• Layout.preferredHeight
• Layout.maximumWidth
• Layout.maximumHeight
• Layout.fillWidth
• Layout.fillHeight

下面就是一些对齐或者边距的属性

• Layout.alignment
• Layout.margins
• Layout.leftMargin
• Layout.rightMargin
• Layout.topMargin
• Layout.bottomMargin

三、例子

1. 按钮组布局

效果

import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.3
import QtQuick.Controls 2.5Window{ColumnLayout{spacing: 2anchors.fill: parentButton{text: "添加"Layout.alignment: Qt.AlignHCenter}Button{text: "删除"Layout.alignment: Qt.AlignHCenter}Button{text: "修改"Layout.alignment: Qt.AlignHCenter}Button{text: "保存"Layout.alignment: Qt.AlignHCenter}}
}

2. 官方排列

代码

import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.3Window{ColumnLayout{spacing: 2anchors.fill: parentRectangle {Layout.alignment: Qt.AlignCentercolor: "red"Layout.preferredWidth: 40Layout.preferredHeight: 40}Rectangle {Layout.alignment: Qt.AlignRightcolor: "green"Layout.preferredWidth: 40Layout.preferredHeight: 70}Rectangle {Layout.alignment: Qt.AlignBottomLayout.fillHeight: truecolor: "blue"Layout.preferredWidth: 70Layout.preferredHeight: 40}}}