Uploaded image for project: 'Qt for MCUs'
  1. Qt for MCUs
  2. QTMCU-145

Code snippet in AnchorChanges is wrong

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Unresolved
    • Icon: Not Evaluated Not Evaluated
    • None
    • Qt for MCUs 2.3.1
    • Documentation
    • None
    • All

      The original snippet uses AnchorChanges for changing margins, which the page itself says not possible. In fact, it doesn't work when pasted to the Qt Creator and run.

      link : https://doc.qt.io/QtForMCUs-2.4/qml-qtquick-anchorchanges.html#details

      <original> 

      import QtQuick 2.15
Rectangle {
    id: window
    width: 120; height: 120
    color: "black"

    Rectangle { id: anchorRectStart; x: 60; y: 60; height: 60; width: 60; color: "yellow"}
    Rectangle { id: anchorRectEnd; x: 0; y: 0; height: 60; width: 60; color: "blue"}

    Rectangle { id: myRect; color: "red"
        anchors {
            top: anchorRectStart.top
            bottom: anchorRectStart.bottom
            left: anchorRectStart.left
            right: anchorRectStart.right
            topMargin: 10
            bottomMargin: 10
            leftMargin: 10
            rightMargin: 10
        }
    }

    states: State {
        name: "reanchored"

        AnchorChanges {
            target: myRect
            anchors {
                top: anchorRectEnd.top
                bottom: anchorRectEnd.bottom
                left: anchorRectEnd.left
                right: anchorRectEnd.right
                topMargin: 20
                bottomMargin: 20
                leftMargin: 20
                rightMargin: 20
            }
        }
    }
    MouseArea { anchors.fill: parent; onClicked: window.state = "reanchored" }
}

      The code should be like this. This code worked as intended.

      import QtQuick 2.15
Rectangle {
    id: window
    width: 120; height: 120
    color: "black"    
    Rectangle { id: anchorRectStart; x: 60; y: 60; height: 60; width: 60; color: "yellow"}
    Rectangle { id: anchorRectEnd; x: 0; y: 0; height: 60; width: 60; color: "blue"}  
    Rectangle { 
        id: myRect; color: "red"
        anchors {
            top: anchorRectStart.top
            bottom: anchorRectStart.bottom
            left: anchorRectStart.left
            right: anchorRectStart.right
            topMargin: 10
            bottomMargin: 10
            leftMargin: 10
            rightMargin: 10
        }
    }    
    states: State {
        name: "reanchored"
        AnchorChanges {
            target: myRect
            anchors {
                top: anchorRectEnd.top
                bottom: anchorRectEnd.bottom
                left: anchorRectEnd.left
                right: anchorRectEnd.right
            }
        }
        PropertyChanges {
            target: myRect
            anchors {
                topMargin: 20
                bottomMargin: 20
                leftMargin: 20
                rightMargin: 20
            }
        }
    }
    MouseArea { anchors.fill: parent; onClicked: window.state = "reanchored" }
}

        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

            Unassigned Unassigned
            mikio_hirai Mikio Hirai
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:

                There are no open Gerrit changes