QML学习笔记（五）QML新手入门其三：使用Row和Colunm进行简单布局

前言

在上一节中，我们已经对Rectangle有比较深入的了解，在接下来的内容中，我们将首次了解有关布局的方法，并创建多个Rectangle，尝试对它们进行简单的布局。

一、Row和Column的使用

我们知道，在QWidget中实现自伸缩的布局，基本上围绕不开水平布局QHBoxLayout和垂直布局QVBoxLayout这两个布局类，当然它们并不是具体的控件，而是一个透明隐形的布局规则，需要将他设置在某个窗口之中，例如QWidget->setLayout();。

在Qml中，有Row和Colunm两个组件能和这两个布局对应。

我们先创建出两个新的Rectangle，一共三个，并为它们设置不同的id名字和不同的背景颜色。

再然后，我们直接用一个Row{}来将它们全部包含起来，完整代码如下：

cpp 复制代码

import QtQuick 2.14
import QtQuick.Window 2.14

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("QML Syntax Demo")

    Row{
        Rectangle{
            id: redRectId
            width: 100
            height: 100
            color: "red"
            border.color: "black"
            border.width: 5
            radius: 20
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    console.log("One")
                }
            }
        }

        Rectangle{
            id: blueRectId
            width: 100
            height: 100
            color: "blue"
            border.color: "black"
            border.width: 5
            radius: 20
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    console.log("Two")
                }
            }
        }

        Rectangle{
            id: greenRectId
            width: 100
            height: 100
            color: "green"
            border.color: "black"
            border.width: 5
            radius: 20
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    console.log("Three")
                }
            }
        }
    }
}

运行看下效果：

我们可以看到，代码中其实并没有对这三个矩形有任何坐标上的设置，Row这个东西直接根据他们的尺寸，做了横向的布局，并默认显示在左上角。

我们将Row换成Colunm，代码我就不放上来了，直接看结果。

Colunm和Row效果是类似的。

那么它们是否可以设置坐标呢？我们可以添加xy值，看看效果。

看上去完全可以哦。

那能不能用anchors.centerIn: parent这种方式呢？试下看看：

看来是可以的！上下左右水平居中，并且改变边缘尺寸，还是居中的。

我们再将Row和Colunm做一些组合，比方说上面是红矩形，下面是蓝绿矩形。代码如下：

cpp 复制代码

Column{
        anchors.centerIn: parent
        Row{
            Rectangle{
                id: redRectId
                width: 100
                height: 100
                color: "red"
                border.color: "black"
                border.width: 5
                radius: 20
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        console.log("One")
                    }
                }
            }
        }
        Row{
            Rectangle{
                id: blueRectId
                width: 100
                height: 100
                color: "blue"
                border.color: "black"
                border.width: 5
                radius: 20
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        console.log("Two")
                    }
                }
            }

            Rectangle{
                id: greenRectId
                width: 100
                height: 100
                color: "green"
                border.color: "black"
                border.width: 5
                radius: 20
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        console.log("Three")
                    }
                }
            }
        }
    }