QML类型：StackLayout、GridLayout、ColumnLayout、RowLayout_qml rowlayout用法

StackLayout

一、描述

StackLayout 类提供了一个项目堆栈布局，其中一次只有一个项目可见。

与大多数其他布局相比，子项的 Layout.fillWidth 和 Layout.fillHeight 属性默认为 true。因此，子项默认填充以匹配 StackLayout 的大小，只要它们的 Layout.maximumWidth 或 Layout.maximumHeight 不阻止它。

以下代码将创建一个 StackLayout，其中只有“plum”矩形可见：

StackLayout {
    id: layout
    anchors.fill: parent
    currentIndex: 1
    Rectangle {
        color: 'teal'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'plum'
        implicitWidth: 300
        implicitHeight: 200
    }
}

StackLayout 中的项目支持以下附加属性：

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

二、属性成员

1、count : int

属于布局的项目数。

2、currentIndex : int

当前在 StackLayout 中可见的子项的索引。 

三、附加属性成员

1、StackLayout.index : int

StackLayout 中每个子项的索引。

2、StackLayout.isCurrentItem : bool

当前子项是否 StackLayout 中的当前项。

3、StackLayout.layout : StackLayout

管理此子项的 StackLayout。

---

GridLayout

一、描述

网格布局。如果调整 GridLayout 的大小，则布局中的所有项目都将重新排列。它类似于基于小部件的 QGridLayout。

默认情况下，项目将根据 flow 属性进行排列。流属性的默认值为 GridLayout.LeftToRight。

如果指定了 columns 属性，它将被视为布局可以有多少列的最大限制，然后自动定位回到下一行的开头。 columns 属性仅在 flow 为 GridLayout.LeftToRight 时使用。

rows 属性以类似的方式工作，但项目是垂直自动定位的。rows 属性仅在 flow 为 GridLayout.TopToBottom 时使用。

可以通过设置 Layout.row 和 Layout.column 属性来指定希望项目占据哪个单元格。还可以通过设置 Layout.rowSpan 或 Layout.columnSpan 属性来指定行跨度或列跨度。

GridLayout 中的项目支持以下附加属性：

• Layout.row
• Layout.column
• Layout.rowSpan
• Layout.columnSpan
• 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、columnSpacing : real / rowSpacing : real

列间距 / 行间距。默认为 5。

2、columns : int

如果 flow 为 GridLayout.LeftToRight，则此属性保存定位项目的列限制。 

     rows : int

如果 flow 为 GridLayout.TopToBottom，则此属性保存已定位项目的行限制。

3、flow : enumeration

未设置显式单元格位置的项目的流向。它与 columns 或 rows 属性一起使用，它们分别指定何时将流重置到下一行或下一列。

• GridLayout.LeftToRight：默认，从左到右。
• GridLayout.TopToBottom：从上到下。

4、layoutDirection : enumeration

网格布局的布局方向，它控制项目是从左到右还是从右到左布局。

• Qt.LeftToRight：默认，项目从左到右排列。
• Qt.RightToLeft：项目从右到左排列。

---

ColumnLayout

一、描述

与 GridLayout 相同，但只有一列。

ColumnLayout 中的项目支持以下附加属性：

• 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

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
    }
}

二、属性成员

1、layoutDirection : enumeration

见上面 GridLayout。

2、spacing : real

单元格间距。默认为 5。

---

RowLayout

一、描述

与 GridLayout 相同，但只有一行。用法与 ColumnLayout 相同。