QT之布局篇

QT提供很多种布局的方式，非常灵活，下面介绍的是Qt quick提供几种布局。
分别是：

• anchors ，锚布局
• Row ，行布局
• Column ，列布局
• Grid ，表格布局
• Flow ，流式布局

anchors

锚布局是使用Item元素提供的属性anchors来实现的，它是一种相对布局，相对于其他元素的位置来确定自己的位置，基准线有水平中心（horizontalCenter）、垂直中心（verticalCenter）、左（left）、右（right）、上（top）、下（bottom），还有一条基线（baseline）主要用于文本布局的。

通过这些线以及偏移我们就可以很方便的去进行相对布局了，一般使用比较多的就是居中anchors.centerIn = parent，以及充满整个父区域anchors.fill = parent，其它具体可以参考帮助文档

Row

import QtQuick 2.7
import QtQuick.Controls 2.0

Rectangle {
    width: 640
    height: 480
    color: "#DCDCDC"

    Row {
        padding: 10
        spacing: 20

        Rectangle {
            width: 100
            height: 100
            color: "#FF0000"
        }

        Rectangle {
            width: 100
            height: 100
            color: "#00FF00"
        }

        Rectangle {
            width: 100
            height: 100
            color: "#0000FF"
        }
    }
}

效果图：

Colomn

import QtQuick 2.7
import QtQuick.Controls 2.0

Rectangle {
    width: 640
    height: 480
    color: "#DCDCDC"

    Column {
        padding: 10
        spacing: 20

        Rectangle {
            width: 100
            height: 100
            color: "#FF0000"
        }

        Rectangle {
            width: 100
            height: 100
            color: "#00FF00"
        }

        Rectangle {
            width: 100
            height: 100
            color: "#0000FF"
        }
    }
}

效果图：

Grid

import QtQuick 2.7
import QtQuick.Controls 2.0

Rectangle {
    width: 640
    height: 480
    color: "#DCDCDC"

    Grid {
        padding: 10
        spacing: 20

        rows: 2
        columns: 2

        Rectangle {
            width: 100
            height: 100
            color: "#FF0000"
        }

        Rectangle {
            width: 100
            height: 100
            color: "#00FF00"
        }

        Rectangle {
            width: 100
            height: 100
            color: "#0000FF"
        }
    }
}

效果图：

表格布局中可以通过属性rows和columns指定几行几列，然后对下面的元素进行排列

Flow

import QtQuick 2.7
import QtQuick.Controls 2.0

Rectangle {
    width: 300
    height: 300
    color: "#DCDCDC"

    Flow {
        padding: 10
        spacing: 20

        flow: Flow.LeftToRight
        anchors.fill: parent

        Rectangle {
            width: 100
            height: 100
            color: "#FF0000"
        }

        Rectangle {
            width: 100
            height: 100
            color: "#00FF00"
        }

        Rectangle {
            width: 100
            height: 100
            color: "#0000FF"
        }
    }
}

效果图：

Flow可以通过flow属性指定布局的方向，默认是Flow.LeftToRight，常用的还有Flow.TopToBottom，当在那个方向无法排列显示更多元素时，它就会折行或折列。

当然还有更多的布局方法，这些方法也可以嵌套使用来完成更加复杂的布局。