其他分享
首页 > 其他分享> > QML RowLayout 、GridLayout、ColumnLayout

QML RowLayout 、GridLayout、ColumnLayout

作者：互联网

QML RowLayout 、GridLayout、ColumnLayout

目录

RowLayout

示例

GridLayout

示例

ColumnLayout

示例

RowLayout

【layoutDirection : enumeration】

  • 此属性保留行布局的布局方向—它控制项目是从左到右还是从右到左布局。
  • 如果指定了Qt.RightToLeft，左对齐的项将右对齐，右对齐的项将左对齐。
  • 可能值：
    • Qt.LeftToRight（默认）-项目从左到右排列。
    • Qt.RightToLeft-项目从右到左排列

【spacing : real】

  • 此属性保留每个单元格之间的间距。默认值为5。

示例

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

GridLayout

  • 详细说明
  • 如果调整了GridLayout的大小，则布局中的所有项都将重新排列。
    • 它类似于基于小部件的QGridLayout。
    • GridLayout元素的所有可见子元素都将属于该布局。
    • 如果想要一个只有一行或一列的布局，可以使用RowLayout或ColumnLayout。
    • 这些API提供了更方便的API，并提高了可读性。
  • 默认情况下，项目将根据流特性排列。
    • flow属性的默认值是GridLayout.LeftToRight。
  • 如果指定了columns属性，则在自动定位返回到下一行的开头之前，它将被视为布局可以有多少列的最大限制。
    • columns属性仅在流为GridLayout.LeftToRight时使用。

【columnSpacing : real】

  • 此属性保留每列之间的间距。默认值为5。

【columns : int】

  • 如果flow为GridLayout.LeftToRight，则此属性保留所定位项的列限制。默认值是没有限制。

【flow : enumeration】

  • 此属性保留没有显式单元格位置集的项的流方向。它与columns或rows属性一起使用，当它们分别指定流分别重置到下一行或列。
  • 可能的值为：
    • LeftToRight（默认）-项目彼此相邻，然后包装到下一行。
    • toptobtotom-项目从上到下相互相邻，然后包装到下一列。

【layoutDirection : enumeration】

  • 此属性保持网格布局的布局方向—它控制项目是从左到右还是从右到左布局。如果指定了Qt.RightToLeft，左对齐的项将右对齐，右对齐的项将左对齐。
  • 可能值：
    • Qt.LeftToRight（默认）-项目从左到右排列。
    • Qt.RightToLeft-项目从右到左排列。
  • 这个属性是在QtQuick.Layouts 1.1中引入的。

【rowSpacing : real】

  • 此属性保留每行之间的间距。默认值为5。

【rows : int】

  • 如果flow为GridLayout.TopToBottom，则此属性保留定位项的行限制。默认值是没有限制。

示例

GridLayout {
    id: grid
    columns: 3

    Text { text: "Three"; font.bold: true; }
    Text { text: "words"; color: "red" }
    Text { text: "in"; font.underline: true }
    Text { text: "a"; font.pixelSize: 20 }
    Text { text: "row"; font.strikeout: true }
}

ColumnLayout

【layoutDirection : enumeration】

  • 此属性保留列布局的布局方向—它控制项目是从左到右还是从右到左布局。如果指定了Qt.RightToLeft，左对齐的项将右对齐，右对齐的项将左对齐。
  • 可能值：
    • Qt.LeftToRight（默认）-项目从左到右排列。
    • Qt.RightToLeft-项目从右到左排列
  • 这个属性是在QtQuick.Layouts 1.1中引入的。

【spacing : real】

  • 此属性保留每个单元格之间的间距。默认值为5。

示例

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

 

标签：Layout,Qt,ColumnLayout,QML,GridLayout,对齐,默认值,属性
来源： https://blog.csdn.net/baidu_41388533/article/details/116609986