13.Quick QML-RowLayout、ColumnLayout、GridLayout布局管理器介绍、并通过GridLayout设计的简易网站导航界面

上章我们学习了:12.Quick QML-QML 布局(Row、Column、Grid、Flow和嵌套布局) 、Repeater对象,本章我们继续来学习布局管理器

 

1.RowLayout、ColumnLayout、GridLayout布局管理器介绍

RowLayout、ColumnLayout、GridLayout布局管理器和Row、Column、Grid布局器非常相似,但是在布局管理器里就不支持使用Positioner附加属性了.
并且在布局器的基础上,为每个item提供了下面几个附加属性:

Layout.minimumWidth

Layout.minimumHeight

Layout.maximumWidth

Layout.maximumHeight

Layout.preferredWidth  : 首选宽度。如果未设置,那么布局将使用隐式宽度(implicitWidth)。默认值为-1。

Layout.preferredHeight : 首选高度。如果未设置,那么布局将使用隐式高度。默认值为-1。

Layout.fillWidth :  bool类型,默认为false,如果为true,那么该item的宽度会尽可能宽(可以伸缩),如果为false,那么宽度的优先级选择为: Layout.preferredWidth > implicitWidth > Layout.minimumWidth

Layout.fillHeight :  和Layout.fillWidth一样,设置高度是否可以伸缩

Layout.alignment : 设置item在网格里的对齐方式,默认值为" Qt.AlignVCenter | Qt.AlignLeft "

Layout.margins : 设置item的外边距

Layout.leftMargin

Layout.rightMargin

Layout.topMargin

Layout.bottomMargin

由于RowLayout和ColumnLayout其实本质就是单行或者单列的GridLayout.所以我们以GridLayout为例讲解.

 

2. GridLayout布局管理器介绍
它的属性如下所示:

rowSpacing : real,设置每行的间隔,默认值为5

columnSpacing : real,设置每列的间隔,默认值为5

rows : int,默认值为-1,用来设置网格有多少行

columns : int,默认值为-1,用来设置网格有多少列

flow : enumeration,流布局,取值有:

GridLayout.LeftToRight: 从左往右排列,如果剩余的宽度不足,则排下一行(默认值)

Flow.TopToBottom: 从上往下排列,如果剩余的宽度不足,则排下一列.

layoutDirection : enumeration,布局方向,取值有:

Qt.LeftToRight (default) : 默认方向

Qt.RightToLeft : 左右取反方向(比如布局顺序为123,将会变为321)

并且GridLayout在RowLayout和ColumnLayout的附加属性基础上,还额外增加了下面几个附加属性:

Layout.row : 指定item在网格中的行位置。默认值为0,由布局为项目自动分配单元格。

Layout.column: 指定item在网格中的列位置。默认值为0,由布局为项目自动分配单元格。

Layout.rowSpan : 指定item在网格中的行跨度,默认值为1。

Layout.columnSpan : 指定item在网格中的列跨度,默认值为1。

 

3.flow 和layoutDirection介绍
flow表示每个网格的排列方向.
layoutDirection表示布局方向,如果layoutDirection = Qt.RightToLeft,那么就会将水平方向的排列进行水平镜像.
比如默认显示的是:

13.Quick QML-RowLayout、ColumnLayout、GridLayout布局管理器介绍、并通过GridLayout设计的简易网站导航界面

设置layoutDirection = Qt.RightToLeft后,那么显示的将会是:

13.Quick QML-RowLayout、ColumnLayout、GridLayout布局管理器介绍、并通过GridLayout设计的简易网站导航界面

示例代码如下所示:

Window { width: 320; height: 240; visible: true; GridLayout{ id: grid rows: 3 flow: GridLayout.LeftToRight layoutDirection: Qt.LeftToRight anchors.fill: parent Repeater { model: 3 Rectangle { color: "yellow" Layout.alignment: Qt.AlignLeft // 水平靠左 Layout.fillHeight: true // 设置高度可伸缩 Layout.preferredWidth: 40 Layout.preferredHeight: 70 Text { anchors.centerIn: parent font.pixelSize: 14 text: "水平靠左"+index } Component.onCompleted: { console.log(Layout.row +","+ Layout.column) } } } Repeater { model: 3 Rectangle { Layout.alignment: Qt.AlignVCenter | Qt.AlignRight color: "green" Layout.fillHeight: true // 设置高度可伸缩 Layout.preferredWidth: 40 Layout.preferredHeight: 70 Text { anchors.centerIn: parent font.pixelSize: 14 text: "水平靠右"+index } } } } }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wppwgw.html