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.1


ApplicationWindow {
   
    id: _window

    // 窗口标题设置
    title: "Test App"
    width: 400
    height: 400

    // Window默认不可见，需要进行设置为可见
    visible: true

    menuBar: 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: hovered
                ToolTip.text: qsTr("Create new File")
                // 设置命令图标
                icon.name: "New"
                icon.source: "../img/new.png"
            }
            ToolButton {
   
                ToolTip.visible: hovered
                ToolTip.text: qsTr("Open File")
                icon.name: "Open"
                icon.source: "../img/open.png"
            }
        }
    }

    Grid {
   
        columns: 3
        spacing: 5
        Rectangle {
    color: "red"; width: 50; height: 50 }

        Row {
   
            spacing: 0
            Rectangle {
    color: "green"; width: 50; height: 50 }
            Rectangle {
    color: "gray"; width:50; height: 50 }
        }

        Column {
   
            spacing: 0
            Rectangle {
    color: "yellow"; width: 50; height: 50 }
            Rectangle {
    color: "black"; wi