Hide a rectangular block temporarily from the main window in QML-CodePudding

I created a nested rectangular block i.e. a rectangle inside a main rectangular block in QML. Now I have to hide the inner rectangular block on some operation and once the operation is finished make it visible again. I am trying the following:

Rectangle {
        id: window
        width: 450
        height: 550
        property bool isTopToolBarAreaVisible : true

    Rectangle {
        id: toolBarArea
        width: 1
        height: parent.height
        color: drawOptionsDlg.toolBarColor
        visible : isTopToolBarAreaVisible

        ToolButton {
                    contentItem: Text {
                        text: "Save as"                     
                    }
                    onClicked: {
                        ...
                        isTopToolBarAreaVisible = false // hide the inner rectangule
                        window.grabToImage(function(result) {
                            result.saveToFile(fileName);
                        }, Qt.size(window.width*2,window.height*2));
                        isTopToolBarAreaVisible = true // show the inner rectangle again
                    }
                }
        }
}

I created a boolean isTopToolBarArea to control the visibility but it does not work. Can anyone help.

CodePudding user response：

This seems to work. I'm hiding the Rectangle containing the ToolButton when onClicked is triggered and show it again inside the callback assigned to grabToImage(callback, targetSize). Adding the RowLayout was just to make the ToolButton horizontally centered in the Rectangle.

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        id: window
        anchors.fill: parent
        color: "green"

        Rectangle {
            id: toolBarArea
            width: parent.width
            height: 40
            color: "red"

            RowLayout {
                anchors.fill: parent

                ToolButton {
                    contentItem: Text { text: "Save as" }
                    onClicked: {
                        toolBarArea.visible = false
                        window.grabToImage(function(result) {
                            result.saveToFile("test.png")
                            toolBarArea.visible = true
                        }, Qt.size(window.width * 2, window.height * 2))
                    }
                }
            }
        }
    }
}

CodePudding user response：

If you're just calling your delayGrab() function inside your onClicked handler, that still won't work. You're delaying the work but not allowing the UI thread to continue running while it's waiting. If your function takes a long time, a worker thread would be preferable. But for fairly short tasks, a timer will work. The timer should look something like this:

Rectangle {
    ...
    Rectangle {
        ...
        ToolButton {
            onClicked: {
                isTopToolBarAreaVisible = false // hide the inner rectangle
                myTimer.start();
            }
        }

        Timer {
            id: myTimer
            interval: 10 // Adjust this as needed
            onTriggered: {
                window.grabToImage(function(result) {
                    result.saveToFile(fileName);
                    }, Qt.size(window.width*2,window.height*2));
                isTopToolBarAreaVisible = true // show the inner rectangle again
            }
        }
    }
}