QtQuick学习笔记之QML布局定位器Row/Column/Grid/Flow

记录Qtquick核心编程学习内容：

组件ColorPicker在前面章节写了 http://blog.csdn.net/xuqiang918/article/details/51672479 的ColorPicker.qml中

import QtQuick 2.5

import QtQuick.Controls 1.4

Rectangle

{

    id:root;

    color:"#EEEEEE";

    width:400;

    height:300;

    Text {

        id:colorText;

        text: "Hello world";

        anchors.centerIn: parent;

        font:{bold:true; pixelSize:24}

    }

    function setTextColor(clr) {

        colorText.color = clr;

    }

    Row {

        anchors.left: parent.left;

        anchors.leftMargin: 10;

        anchors.bottom: parent.bottom;

        anchors.bottomMargin: 10;

        spacing: 4;

        ColorPicker {

            color:Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: {

                setTextColor(clr);

            }

        }

        ColorPicker {

            color:Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: {

                setTextColor(clr);

            }

        }

        ColorPicker {

            color:Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: {

                setTextColor(clr);

            }

        }

        ColorPicker {

            color:Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: {

                setTextColor(clr);

            }

        }

    }

}

Row和Column类似：都有spacing代表Item元素间隔距离， 都有add 、move、populate等属性

Grid无非多了这些属性：

        rows: 3;

        columns: 3;

        rowSpacing: 4;

        columnSpacing: 4;

Flow和Grid差不多，只是它自身会计算每个Item的大小再作相应的调整: 

有sapcing 属性