Roson的Qt之旅 #111 QML布局-ColumnLayout和RowLayout

1.ColumnLayout(列布局)

与GridLayout基本相同，不同的是所有的控件都只能在一列中显示。

导入声明:
import QtQuick.Layouts 1.3

继承自:Item

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

 

layoutDirection : enumeration

这个属性持有行的布局方向--它控制项目是从左到右还是从右到左布局。如果指定了Qt.RightToLeft，左对齐的项目将是右对齐的，右对齐的项目将是左对齐的。
可能的值:

• Qt.LeftToRight (default) - 项目从左到右排列。
• Qt.RightToLeft - 项目从右到左排列。

这个QML属性在QtQuick.Layouts 1.1中引入。
参见GridLayout::layoutDirection和ColumnLayout::layoutDirection。

spacing : real
此属性持有每个单元格之间的间距。默认值为5。

2.RowLayout(行布局)

与GridLayout基本相同，不同的是所有控件只能显示在一行中。

导入声明:
import QtQuick.Layouts 1.3

继承自:Item

它为开发者提供了便利，因为它提供了一个更简洁的API。
RowLayout中的项目支持这些附加属性:

• 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(下边距)

 

RowLayout {
        id: layout
        anchors.fill: parent
        spacing: 6
        Rectangle {
            color: 'teal'
            Layout.fillWidth: true
            Layout.minimumWidth: 50
            Layout.preferredWidth: 100
            Layout.maximumWidth: 300
            Layout.minimumHeight: 150
            Text {
                anchors.centerIn: parent
                text: parent.width + 'x' + parent.height
            }
        }
        Rectangle {
            color: 'plum'
            Layout.fillWidth: true
            Layout.minimumWidth: 100
            Layout.preferredWidth: 200
            Layout.preferredHeight: 100
            Text {
                anchors.centerIn: parent
                text: parent.width + 'x' + parent.height
            }
        }
    }

 

layoutDirection : enumeration

这个属性持有行的布局方向--它控制项目是从左到右还是从右到左布局。如果指定了Qt.RightToLeft，左对齐的项目将是右对齐的，右对齐的项目将是左对齐的。
可能的值:

• Qt.LeftToRight (default) - 项目从左到右排列。
• Qt.RightToLeft - 项目从右到左排列。

这个QML属性在QtQuick.Layouts 1.1中引入。
参见GridLayout::layoutDirection和ColumnLayout::layoutDirection。

spacing : real
此属性持有每个单元格之间的间距。默认值为5。