Grid container and rectangle frame

[sajis997]

Hello forum,

I have declared a Grid item to position its children in grid formation. Then I have a Rectangle item to act as a frame as follows:

Rectangle {
        id: rect
        color: "red"
        radius: 10
        opacity: 0.1
        border.color: "black"
        focus: true
        //the rectangle element
        //will fill the whole grid container
        anchors.fill: controlContainer
 
        Keys.onPressed: {
            if(event.key === Qt.Key_F1)
            {
                console.log('Key F1 was pressed')
                event.accepted = true
            }
        }
 
    }

Rectangle {
        id: rect
        color: "red"
        radius: 10
        opacity: 0.1
        border.color: "black"
        focus: true
        //the rectangle element
        //will fill the whole grid container
        anchors.fill: controlContainer

        Keys.onPressed: {
            if(event.key === Qt.Key_F1)
            {
                console.log('Key F1 was pressed')
                event.accepted = true
            }
        }

    }

To copy to clipboard, switch view to plain text mode 

I want to apply spring animation with the key press event . In that case do I have to apply animation to rectangle only or both ?

Thanks

[wysota]

It depends what you want to move. If both elements then you have to apply the animation to controlContainer since rect will adjust to its geometry so it will follow the animation.

[anda_skoa]

Or you put both into the same parent and move the parent.

But you already ignored that option in the other thread.

Cheers,
_

[sajis997]

I am moving the interface in the following manner. It is functional , but I am not sure though if it is indeed the efficient way to do it.

Item {
    id: root
    width: 512; height: 512
 
 
    TessellationSceneItem
    {
        id: tessSceneItem
    }
 
    Grid {
        id: controlContainer
        rows: 2
        columns: 2
        spacing: 8
        anchors.margins: 8
        focus: true
 
        //initially hide the UI gridope
        x: -width
 
        property bool shown: false
 
        ...............................
 
        //child elements are laid out here
 
        ...............................
 
         Behavior on x { SpringAnimation { spring: 1; damping: 0.1 } }
         Behavior on y { SpringAnimation { spring: 1; damping: 0.1 } }
 
    }
 
    Keys.onPressed: {
        if(event.key === Qt.Key_F1)
        {
            if(controlContainer.shown === true)
            {
              controlContainer.x = -controlContainer.width - 20
              controlContainer.shown = false
            }
            else
            {
              controlContainer.x = 0
              controlContainer.shown = true
            }
            event.accepted = true
        }
        else if(event.key === Qt.Key_Escape)
        {
            //THIS PART IS NOT WORKING
            Qt.quit()
            event.accepted = true
        }
    }
 
 
    Rectangle {
        id: rect
        color: "red"
        radius: 10
        opacity: 0.1
        border.color: "black"
        focus: true
        //the rectangle element
        //will fill the whole layout
        anchors.fill: controlContainer
    }
 
 
}

Item {
    id: root
    width: 512; height: 512


    TessellationSceneItem
    {
        id: tessSceneItem
    }

    Grid {
        id: controlContainer
        rows: 2
        columns: 2
        spacing: 8
        anchors.margins: 8
        focus: true

        //initially hide the UI gridope
        x: -width

        property bool shown: false

        ...............................

        //child elements are laid out here

        ...............................

         Behavior on x { SpringAnimation { spring: 1; damping: 0.1 } }
         Behavior on y { SpringAnimation { spring: 1; damping: 0.1 } }

    }

    Keys.onPressed: {
        if(event.key === Qt.Key_F1)
        {
            if(controlContainer.shown === true)
            {
              controlContainer.x = -controlContainer.width - 20
              controlContainer.shown = false
            }
            else
            {
              controlContainer.x = 0
              controlContainer.shown = true
            }
            event.accepted = true
        }
        else if(event.key === Qt.Key_Escape)
        {
            //THIS PART IS NOT WORKING
            Qt.quit()
            event.accepted = true
        }
    }


    Rectangle {
        id: rect
        color: "red"
        radius: 10
        opacity: 0.1
        border.color: "black"
        focus: true
        //the rectangle element
        //will fill the whole layout
        anchors.fill: controlContainer
    }


}

To copy to clipboard, switch view to plain text mode 

One part of the code snippet is not working . I am trying to close the application with the Esc key press event. If I press the Esc key I get the following output:

Signal QQmlEngine::quit() emitted, but no receivers connected to handle it.

Signal QQmlEngine::quit() emitted, but no receivers connected to handle it.

To copy to clipboard, switch view to plain text mode 

Any idea how to deal with it?