QML之RowLayout

QML中的RowLayout是一种布局管理器，用于在水平方向上排列其子元素。以下是RowLayout的一些主要参数的说明解释：

1. spacing：该属性定义了每个单元格之间的间隔大小。默认值为0，表示没有间隔。您可以设置一个正数来增加间隔，例如spacing: 10。
2. layoutDirection：该属性决定了布局的方向，即决定子元素是从左到右排列还是从右到左排列。默认值为Qt.LeftToRight，表示从左到右排列。如果您希望从右到左排列，可以将其设置为Qt.RightToLeft。
3. preferredWidth：该属性定义了RowLayout的首选宽度。如果设置了该值，则RowLayout将尝试使用这个值作为其宽度。如果没有设置该值，则RowLayout将根据其子元素的尺寸和间距自动计算宽度。
4. minimumWidth：该属性定义了RowLayout的最小宽度。如果设置了该值，则RowLayout将不会缩小到小于这个值的宽度。如果没有设置该值，则RowLayout将根据其子元素的尺寸和间距自动计算最小宽度。
5. maximumWidth：该属性定义了RowLayout的最大宽度。如果设置了该值，则RowLayout将不会扩大到大于这个值的宽度。如果没有设置该值，则RowLayout将根据其子元素的尺寸和间距自动计算最大宽度。
6. preferredHeight：该属性定义了RowLayout的首选高度。如果设置了该值，则RowLayout将尝试使用这个值作为其高度。如果没有设置该值，则RowLayout将根据其子元素的尺寸和间距自动计算高度。
7. minimumHeight：该属性定义了RowLayout的最小高度。如果设置了该值，则RowLayout将不会缩小到小于这个值的高度。如果没有设置该值，则RowLayout将根据其子元素的尺寸和间距自动计算最小高度。
8. maximumHeight：该属性定义了RowLayout的最大高度。如果设置了该值，则RowLayout将不会扩大到大于这个值的高度。如果没有设置该值，则RowLayout将根据其子元素的尺寸和间距自动计算最大高度。
9. fillWidth/fillHeight: 是否进行填充，即尽可能占据空间
10. horizontalStretchFactor / verticalStretchFactor：当Layout进行伸缩时，自控件的伸缩比例，需要fillWidth/fillHeight设置为true时才有效.

示例代码:

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

ColumnLayout {
    anchors.fill: parent
    anchors.margins: 5
    spacing: 10
    layoutDirection: Qt.LeftToRight
    property color bk_color: Qt.darker("green", 1.3)
    RowLayout{
        height: 25
        spacing: 5
        Rectangle{
            width:30
            height: 25
            color:bk_color
        }

        Rectangle{
            Layout.fillWidth: true
            width:30
            height: 25
            color:bk_color
        }

        Rectangle{
            width:30
            height: 25
            color:bk_color
        }
        Rectangle{
            width:30
            height: 25
            color:bk_color
        }
        Rectangle{
            width:30
            height: 25
            color:bk_color
        }
    }

    RowLayout{
        Layout.fillHeight: true
        Layout.verticalStretchFactor: 5

        Rectangle{
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.horizontalStretchFactor: 1
            Layout.preferredWidth: 150
            color:bk_color
            Text {
                text: parent.width
                anchors.centerIn: parent
            }
        }

        Rectangle{
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.horizontalStretchFactor: 5
            Layout.minimumHeight: 150
            color:bk_color
            Text {
                text: parent.width
                anchors.centerIn: parent
            }
        }

        Rectangle{
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.horizontalStretchFactor: 2
            Layout.maximumWidth: 150
            color:bk_color
            Text {
                text: parent.width
                anchors.centerIn: parent
            }
        }
    }

    RowLayout{
        Layout.fillHeight: true
        Layout.verticalStretchFactor: 1

        Rectangle{
            Layout.fillWidth: true
            Layout.fillHeight: true
            width: 100
            height: 100
            color:bk_color
        }
    }
}

 效果图: