QT QML 使用布局

前言

既然qml主要用于写前端界面，那么布局管理肯定是相当重要的部分。下面就介绍QML布局管理中的 定位器(Positioners) 和 Layouts。

定位器(Positioners)

定位器是一个容器，可以管理其中子项目的布局。定位器包括 Row Column Grid Flow。如果它们的子项目不可见，宽度或高度为0，那么该子项目不会显示，也不会布局。定位器可以自动自动布局其子项目，也就是说子项目不再需要显式设置 x,y等坐标或者使用anchors锚进行布局

1. Row 可以将容器的项目排成一行。可以使用spacing属性来为容器里的项目添加间距

import QtQuick 2.9
import QtQuick.Window 2.3
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Row{
        spacing: 10
        Rectangle{
            width: 100
            height: 40
            color: "pink"
        }
        Rectangle{
            width: 20
            height: 20
            color: "black"
        }
    }
}

Layouts

QML 的布局管理器是一组用于在用户界面中排列项目的类型。与前面讲到的定位器不同，布局管理器不仅进行布局，而且会改变项目的大小，所以更适合用于需要改变用户界面大小的应用。QML 布局管理器主要包括 RowLayout ColumnLayout GridLayout.使用布局管理器有以下特色。项目的对其方式可以使用Layout.alignment属性指定。可变大小的项目可以使用 Layout.fillWidth 和 Layout.fillHeight 属性指定，当设置为true时会根据约束条件变宽或者变高，间距可以使用Spacing来确定

import QtQuick 2.9
import QtQuick.Window 2.3
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    ColumnLayout{
        anchors.fill: parent
        Rectangle{
            Layout.fillHeight: true
            Layout.minimumWidth: 200
            Layout.minimumHeight: 200
            Layout.preferredHeight: 300
            Layout.maximumHeight: 400
            color: "red"
            Text{
                anchors.centerIn: parent
                text: parent.width + "x" + parent.height
            }
        }
        Rectangle{
            Layout.fillHeight: true
            Layout.minimumWidth: 200
            Layout.minimumHeight: 200
            Layout.preferredHeight: 300
            color: "blue"
            Text{
                anchors.centerIn: parent
                text: parent.width + "x" + parent.height
            }
        }
    }
}