PySide2学习总结（十一）QML布局

本文主要是介绍PySide2学习总结（十一）QML布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

QML可以直接设置X与Y坐标的值来进行布局，但这种做法不利于布局的调整和代码的维护，因而更推荐采用定位器、布局管理器以及锚布局来完成QML布局。
QML常用的定位器有：Row, Column, Grid以及Flow；常用布局管理器有RowLayout, ColumnLayout, GridLayout，以及Anchor(锚布局)。

定位器

Row

QML 中的 Row 元素会将其子控件都排列在同一行，相互不重叠。可以使用spacing 属性来定义子控件之间的距离。

Column

QML 中的 Column元素会将其子控件都排列在同一行，相互不重叠。可以使用spacing 属性来定义子控件之间的距离。

Grid

QML 中的 Grid元素会将其子控件都均匀地排列在一个网格内，相互不重叠，每一个子控件都被放置在一个网格单元的（0，0）位置，也就是左上角。Grid的rows 和columns属性定义网格的行数和列数，列数默认是4。
可以使用Grid的spacing 属性来定义网格单元之间的距离，这里注意水平和垂直方向的spacing都是一样的。

Flow

与Grid类似不同之处在于，Flow不用指定行数和列数，他会计算Item的尺寸然后与自身尺寸比较自动换行。

编程示例

将以上定位器结合起来编辑代码如下：

import QtQuick 2.7
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.1ApplicationWindow {id: _window// 窗口标题设置title: "Test App"width: 400height: 400// Window默认不可见，需要进行设置为可见visible: truemenuBar: MenuBar {Menu {title: "File"Action {text: "New"shortcut: "Ctrl+N"}Action {text: "Open"shortcut: "Ctrl+O"}}Menu {title: "Help"Action {text: "About App"shortcut: "F1"}}}header: ToolBar {// 横向RowLayout {ToolButton {// 设置提示文字ToolTip.visible: hoveredToolTip.text: qsTr("Create new File")// 设置命令图标icon.name: "New"icon.source: "../img/new.png"}ToolButton {ToolTip.visible: hoveredToolTip.text: qsTr("Open File")icon.name: "Open"icon.source: "../img/open.png"}}}Grid {columns: 3spacing: 5Rectangle { color: "red"; width: 50; height: 50 }Row {spacing: 0Rectangle { color: "green"; width: 50; height: 50 }Rectangle { color: "gray"; width:50; height: 50 }}Column {spacing: 0Rectangle { color: "yellow"; width: 50; height: 50 }Rectangle { color: "black"; wi