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

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

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

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

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

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

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

import QtQuick 2.0

//需求:通过Flow布局中的颜色选择器,改变文本的颜色
Rectangle {
     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;
         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. 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.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;
          anchors.left: p1.right;//<------------------------------------------------------------------------注意这一句!!!!!!
//设置边框——如何为自定义的空间设置? border.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.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.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.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.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.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. 

解决方法:

上述错误说明Flow中不能使用anchors布局,而在代码中(最长箭头所指的语句)Flow布局中的小Rectangle使用了anchors布局,所以不行,只能另想办法设置想要的布局,删掉它!!!

与题目无关的小改动:

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

原文地址:https://www.cnblogs.com/BASE64/p/14486961.html