qml 布局 layout

### QML 中 ColumnLayout 的使用方法 在 QML 中，`ColumnLayout` 是一种布局元素，用于在垂直列中排列其子项。这种布局方式非常适合创建按顺序自上而下排列的界面组件。 #### 创建基本的 `ColumnLayout` 要定义一个简单的 `ColumnLayout`，可以按照如下方式进行： ```qml import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 ApplicationWindow { visible: true width: 640 height: 480 ColumnLayout { Button { text: "Button One" Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter } Rectangle { color: "lightblue" implicitHeight: 50; implicitWidth: 200 Text { anchors.centerIn: parent text: "Rectangle Two" } } Label { text: "Label Three" font.bold: true } } } ``` 上述代码展示了如何在一个窗口内通过 `ColumnLayout` 将三个不同类型的控件（按钮、矩形区域以及标签）依次沿竖直方向堆叠起来[^2]。 #### 调整子项目大小与间距 为了更好地控制各个项目的尺寸和间隔，在 `ColumnLayout` 下还可以利用一些特定于布局系统的附加属性来调整这些参数。例如设置最小宽度 (`minimumWidth`) 或者高度(`minimumHeight`) 来确保即使内容较少也能保持一定的空间占用；也可以设定间距 (`spacing`) 属性改变相邻两项之间的距离。 ```qml // 设置整个布局内的默认间距为20像素 ColumnLayout { spacing: 20 // ...其他子元素... Item { Layout.preferredWidth: 300; Layout.minimumHeight: 100; // 子元素的具体实现... } } ``` 此段代码说明了怎样给定全局性的间距值，并且针对某个具体的子对象指定了推荐使用的宽度及最低限度的高度限制。 #### 动态适应屏幕变化 当涉及到响应式设计时，即希望应用能够根据不同设备或视窗大小自动调整显示效果，则可以通过绑定表达式的方式让某些属性随父容器的变化而相应变动。比如下面的例子就实现了根据可用高度动态计算各部分所占比例的效果。 ```qml Item { id: container anchors.fill: parent ColumnLayout { anchors.fill: parent Repeater { model: ["Header", "Content Area", "Footer"] delegate: Rectangle { color: index % 2 ? "#eee" : "#ddd"; Text { anchors.centerIn: parent text: modelData } Layout.fillWidth: true // 根据索引分配不同的相对高度 Layout.preferredHeight: (container.height / 3) * ((index == 1)? 2 : 1); } } } } ``` 这段代码片段展示了一个由三部分组成的页面结构——头部、主体区和服务端脚部，其中中间的内容区域占据了总高的三分之二，其余两部分则平分剩余的空间。