qml Row详解

1. 概述

Row 是 Qt Quick 中的布局容器组件，专门用于水平排列子项。它允许将一组控件或元素水平排列并按顺序显示。Row 会自动根据子项的宽度来调整布局，并通过 spacing 属性设置子项之间的间距。类似于 Column，Row 也是一种常用的布局方式，适用于需要将控件水平排列的场景。

Row 支持多种布局调整方式，允许开发者灵活地控制子项的对齐、间距和尺寸。它通常与 Column 一起使用，构建复杂的 UI 界面。

2. 重要属性

• spacing：定义子项之间的水平间距。默认为 0，表示子项之间没有空隙。可以通过修改此属性来调整子项之间的距离。

• alignment：定义 Row 中子项的垂直对齐方式。常用值包括 Qt.AlignTop、Qt.AlignBottom、Qt.AlignVCenter 等。

• anchors：通过 anchors 属性可以控制 Row 本身的位置和大小，并且影响子项的对齐和布局。

• width：定义 Row 的宽度，通常是自动根据子项的总宽度来计算的，但也可以手动设置。

• height：定义 Row 的高度，通常自动根据子项的最大高度来调整，或者通过手动设置。

• minimumWidth：定义 Row 的最小宽度。如果子项的总宽度小于该值，Row 会强制调整其宽度。

• maximumWidth：定义 Row 的最大宽度。如果子项的总宽度大于该值，Row 会限制其宽度。

3. 重要方法

• setSpacing()：设置子项之间的间距。这个方法可以动态修改 spacing 属性。

• addItem()：向 Row 中添加一个新的子项。虽然通常通过直接声明子项来管理 Row 的内容，但也可以使用此方法动态添加元素。

• removeItem()：从 Row 中移除一个子项。通过此方法，可以在运行时删除不需要的子项。

• clear()：清空 Row 中的所有子项。通过此方法可以快速清除所有的子项，恢复为空的状态。

4. 重要信号

• widthChanged：当 Row 的宽度发生变化时，触发此信号。常用于监听布局变化并做出相应处理。

• heightChanged：当 Row 的高度发生变化时，触发此信号。通常在子项大小变化时触发。

• spacingChanged：当 spacing 属性的值发生变化时，触发此信号。

• alignmentChanged：当 alignment 属性变化时触发，允许动态更新子项的垂直对齐方式。

5. 常用枚举类型

• Qt.Alignment：用来定义对齐方式的枚举类型，常用值包括：
  • Qt.AlignTop：顶部对齐。
  • Qt.AlignBottom：底部对齐。
  • Qt.AlignVCenter：垂直居中对齐。

ApplicationWindow {
    visible: true
    width: 640
    height: 480

    Row {
        id: row
        anchors.centerIn: parent
        spacing: 15

        Rectangle {
            width: 100
            height: 100
            color: "red"
            Text {
                anchors.centerIn: parent
                text: "Item 1"
                color: "white"
            }
        }

        Rectangle {
            width: 120
            height: 100
            color: "green"
            Text {
                anchors.centerIn: parent
                text: "Item 2"
                color: "white"
            }
        }

        Rectangle {
            width: 80
            height: 100
            color: "blue"
            Text {
                anchors.centerIn: parent
                text: "Item 3"
                color: "white"
            }
        }

        // 按钮动态改变间距
        Button {
            text: "Increase Spacing"
            onClicked: {
                row.spacing += 10; // 增加间距
            }
        }

        // 动态添加新的子项
        Button {
            text: "Add Item"
            onClicked: {
                var newItem = Qt.createQmlObject('import QtQuick 2.14; Rectangle { width: 100; height: 100; color: "yellow"; Text { anchors.centerIn: parent; text: "New Item"; color: "black" } }', row);
            }
        }
    }
}

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

           

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