实现的功能大概是这样的：

1、一个Rectangle主窗口，左上角有一个文本Text

2、主窗口中有一个Rectangle停靠在主窗口的最右边，高与主窗口相同，宽比主窗口小

3、定义了一个Flow填充(填满)在停靠的Rectangle中

4、Flow中有一系列的小Rectangle，按照Qt.TopToBottom排列

5、点击这些不同颜色的小Rectangle，文字的颜色会改变

import QtQuick 2.0

//需求：通过Flow布局中的颜色选择器，改变文本的颜色
Rectangle {
    width: 900;
    height: 900;
    color: "gray";
    id: root;

    //文本
    Text {
        id: txt;
        text: qsTr("click to change color");
        font.pixelSize: 24;
        anchors.top: parent.top;
        anchors.topMargin: 8;
        anchors.left: parent.left;
        anchors.leftMargin: 8;
    }
    //函数——改变文本的颜色
    function changeTxtColor(clr) {//参数不需要指定类型
        txt.color = clr;
    }
    //Rectangle里面放Flow
    Rectangle {
        id: flowParent;
        width: 300;
        anchors.top: parent.top;
        anchors.topMargin: 10;
        anchors.right: parent.right;
        anchors.rightMargin: 0;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 20;
        border.color: "red";
        border.width: 5;
        property real subHeight: flowParent.height / 7;//不要放在Flow里面，否则得到的是Flow根据实际情况所放的组件的高度来设置的

        //Flow布局
        Flow {
            id: flow;
            //设置Flow(父组件)在root中的位置
            spacing: 0;
            //设置排列方式
            flow: Flow.TopToBottom;

            //Flow布局下的所有颜色选择组件——放7个组件
            Rectangle {
                id: p1;
                Width: flowParent.width;
                height: flowParent.subHeight;
                //设置边框——如何为自定义的空间设置？
                border.width:5;
                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
                MouseArea {
                    anchors.fill: parent;
                    onClicked: changeTxtColor(p1.color);
                }
            }
            Rectangle {
                id: p2;
                Width: flowParent.width;
                height: flowParent.subHeight;
                //设置边框——如何为自定义的空间设置？
                border.width:5;
                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
                MouseArea {
                    anchors.fill: parent;
                    onClicked: changeTxtColor(p2.color);
                }
            }
            Rectangle {
                id: p3;
                Width: flowParent.width;
                height: flowParent.subHeight;
                //设置边框——如何为自定义的空间设置？
                border.width:5;
                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
                MouseArea {
                    anchors.fill: parent;
                    onClicked: changeTxtColor(p3.color);
                }
            }
            Rectangle {
                id: p4;
                Width: flowParent.width;
                height: flowParent.subHeight;
                //设置边框——如何为自定义的空间设置？
                border.width:5;
                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
                MouseArea {
                    anchors.fill: parent;
                    onClicked: changeTxtColor(p4.color);
                }
            }
            Rectangle {
                id: p5;
                Width: flowParent.width;
                height: flowParent.subHeight;
                //设置边框——如何为自定义的空间设置？
                border.width:5;
                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
                MouseArea {
                    anchors.fill: parent;
                    onClicked: changeTxtColor(p5.color);
                }
            }
            Rectangle {
                id: p6;
                Width: flowParent.width;
                height: flowParent.subHeight;
                //设置边框——如何为自定义的空间设置？
                border.width:5;
                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
                MouseArea {
                    anchors.fill: parent;
                    onClicked: changeTxtColor(p6.color);
                }
            }
            Rectangle {
                id: p7;
                Width: flowParent.width;
                height: flowParent.subHeight;
                //设置边框——如何为自定义的空间设置？
                border.width:5;
                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
                MouseArea {
                    anchors.fill: parent;
                    onClicked: changeTxtColor(p7.color);
                }
            }
        }
    }
}

运行出现：QML Flow: Cannot specify anchors for items inside Flow. Flow will not function. 

解决方法：

把主窗口的Rectangle中浮动在右边的Rectangle中的Flow里面的小Rectangle的width和height属性设置成implicitHeight和implicitWidth