QML 形状：如何以干净的方式强制更新数据属性？

Question

I am trying to make a window where I can draw triangles and delete any of them with a Shape{} . In my example below, I can draw 2 types of triangle:

• Up triangle: green and filled
• Down triangle: yellow and not filled

Basically, I choose the type of triangle (with a button on the right-bottom corner) then I click anywhere on the window to get a triangle.

Once I click a triangle is created dynamically and it is stored in the property triangleList . Then I call the function shape.update() to update data property of shape. This part works well.

Here the function update I use in the Shape (since data is a list, I have to reassign to a new list.):

function update()
{
    data = [];
    var d = [];

    for (var i = 0; i < canvas.triangleList.length; i++)
    {
       d.push( canvas.triangleList[i] );
    }
    data = d;
}

My problem appears when I try to delete a triangle. In my example, I can delete the first, the last or all triangles. When I delete a triangle, first I delete the value in triangleList then I call again shape.update() . It works when I delete all triangles or the last one.

However, when I try to delete the first triangle, data doesn't update its objects even if I give it a new list . In fact, it always deletes the last triangle. Below an example:

data property understands there is one less triangle but it doesn't update the other triangles. The only solution I found is to change a property then come back to the original value. This way, it forces the data to update. But I have to do that for every property that can be different (colors and positions). Hence, my update() function looks like that:

for (var i = 0; i < canvas.triangleList.length; i++)
                {
    d.push( canvas.triangleList[i] );

    ////// Change properties one by one to force the refresh

    // Force path redraw. Otherwise only the last path can be deleted
    d[i].startX++;d[i].startX--;

    // Force line color update
    d[i].strokeColor = "red"
    d[i].strokeColor = d[i].isUp ? "green" : "yellow";

    // Force fill color update
    d[i].fillColor = "red";
    d[i].fillColor = d[i].isUp ? "green" : "transparent";

    data = d;
}

I invite you to comment in/out these lines to see the difference. I could use this trick to force the update but my real code is really bigger than this example and I use bindings.

So my question is: Is there a way to force the update without having to change each property?

Here the full code if you want to test it:

import QtQuick 2.9;
import QtQuick.Controls 2.2;
import QtQuick.Shapes 1.0;

ApplicationWindow {
    visible: true; width: 640; height: 480;

    Rectangle {
        id: canvas;
        anchors.fill: parent;
        color: "black";
        property var triangleList: [];
        property bool triangleUp: true;

        MouseArea {
            anchors.fill: parent;
            onClicked: {
                var triangle = componentTriangle.createObject(componentTriangle, {
                                                                "isUp" :  canvas.triangleUp,
                                                                "startX" :  mouse.x,
                                                                "startY" :  mouse.y,
                                                               }, canvas);

                canvas.triangleList.push(triangle);
                shape.update();
            }
        }   // MouseArea

        Shape {
            id: shape;

            anchors.fill: parent;

            function update()
            {
                data = [];
                var d = [];

                for (var i = 0; i < canvas.triangleList.length; i++)
                {
                    d.push( canvas.triangleList[i] );

                    ///////////// HOW TO AVOID THE PART BELOW? /////////////
                    ////// Change properties one by one to force the refresh

                    // Force path redraw. Otherwise only the last path can be deleted
                    d[i].startX++;d[i].startX--;

                    // Force line color update
                    d[i].strokeColor = "red"
                    d[i].strokeColor = d[i].isUp ? "green" : "yellow";

                    // Force fill color update
                    d[i].fillColor = "red";
                    d[i].fillColor = d[i].isUp ? "green" : "transparent";

                    //////////////////////////////////////////////////////
                }

                data = d;

                // I make sure data has at least one path to ensure the refresh
                if (data.length == 0)
                    data.push(Qt.createQmlObject('import QtQuick 2.9; import QtQuick.Shapes 1.0; ShapePath {startX:0;startY:0;}', canvas,
                              "force_refresh"));
            }
        }  // Shape
    }   // Rectangle

    //////////// Buttons to handle the triangles

    Column {
        anchors.bottom: parent.bottom;
        anchors.right: parent.right;

        Button {

            text: canvas.triangleUp? "Draw triangleUp" : "Draw triangleDown";
            onClicked: { canvas.triangleUp = !canvas.triangleUp; }
        }   // Button

        Button {
            text: "Clear first";
            onClicked: {
                canvas.triangleList[0].destroy();
                canvas.triangleList.splice(0,1);
                shape.update();
            }
        }   // Button

        Button {
            text: "Clear last";
            onClicked: {
                canvas.triangleList[canvas.triangleList.length -1].destroy();
                canvas.triangleList.splice(canvas.triangleList.length -1,1);
                shape.update();
            }
        }   // Button

        Button {
            text: "Clear all";
            onClicked: {
                for (var i = 0; i < canvas.triangleList.length; i++)
                    canvas.triangleList[i].destroy();
                canvas.triangleList = [];
                shape.update();
            }
        }   // Button
    }

    //////////// Component to draw the triangle
    Component {
        id: componentTriangle;

        ShapePath {
            property bool isUp;
            property real offsetX: isUp? -20 : 20;
            property real offsetY: isUp? -30 : 30;

            strokeColor: isUp ? "green" : "yellow";
            strokeWidth: 3;
            fillColor: isUp ? "green" : "transparent";

            PathLine { x: startX - offsetX; y: startY - offsetY }
            PathLine { x: startX + offsetX; y: startY - offsetY }
            PathLine { x: startX; y: startY }
        }   // ShapePath
    }
}

Thank you very much for your help and feel free to ask me if I was not clear.

Have a nice day!

Answer 1

If you are going to handle many items (Shape) it is advisable to use a Repeater with a model. The repeater is responsible for displaying the items based on the information of the model, and to remove the items you just have to remove items from the model.

main.qml

import QtQuick 2.9;
import QtQuick.Controls 2.2;
import QtQuick.Shapes 1.0;

ApplicationWindow {
    visible: true; width: 640; height: 480;
    QtObject{
        id: internals
        property bool triangleUp: true;
    }
    ListModel{
        id: datamodel
    }
    Rectangle {
        id: canvas;
        anchors.fill: parent;
        color: "black";
        Repeater{
            model: datamodel
            Triangle{
                x: model.x
                y: model.y
                isUp: model.isUp
            }
        }
        MouseArea{
            anchors.fill: parent
            onClicked: datamodel.append({"x": mouse.x, "y": mouse.y, "isUp": internals.triangleUp})
        }
    }
    Column {
        anchors.bottom: parent.bottom;
        anchors.right: parent.right;
        Button {
            text: internals.triangleUp ? "Draw triangleUp" : "Draw triangleDown";
            onClicked: internals.triangleUp = !internals.triangleUp;
        }   // Button

        Button {
            text: "Clear first";
            onClicked: if(datamodel.count > 0) datamodel.remove(0)
        }   // Button

        Button {
            text: "Clear last";
            onClicked: if(datamodel.count > 0) datamodel.remove(datamodel.count - 1)
        }   // Button

        Button {
            text: "Clear all";
            onClicked: datamodel.clear()
        }   // Button
    }
}

Triangle.qml

import QtQuick 2.9;
import QtQuick.Shapes 1.0

Shape {
    id: shape
    property bool isUp: false
    QtObject{
        id: internals
        property real offsetX: isUp? -20 : 20;
        property real offsetY: isUp? -30 : 30;
    }
    ShapePath {
        strokeWidth: 3;
        strokeColor: isUp ? "green" : "yellow";
        fillColor: isUp ? "green" : "transparent";
        PathLine { x: -internals.offsetX ; y: -internals.offsetY }
        PathLine { x: internals.offsetX; y: -internals.offsetY }
        PathLine { x: 0; y: 0 }
    }
}