Qt 5.15.2 item disappear when used in StackView

Fausto01

I have this QML files

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

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

    Component {
        id: firstPage

        BasePage {
            color: "red"
            bottomBar.rightButton.text: qsTr("Next")
            bottomBar.rightButton.visible: true
            onBottomBarRightButtonClicked: stackView.push(secondPage)
        }
    }

    Component {
        id: secondPage

        BasePage {
            color: "blue"
            onBackKeyPressed: stackView.pop()
        }
    }

    StackView {
        id: stackView
        initialItem: firstPage
        anchors.fill: parent
    }
}

//BasePage.qml

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Page {
    default property alias content: contentItem.data
    property alias bottomBar: bottomBar
    property alias color: background.color
    signal bottomBarLeftButtonClicked()
    signal bottomBarCentralButtonClicked()
    signal bottomBarRightButtonClicked()
    signal backKeyPressed()

    id: basePageItem
    focusPolicy: Qt.ClickFocus

    Keys.onReleased: {
        if(event.key !== Qt.Key_Back && event.key !== Qt.Key_Escape)
            return;

        backKeyPressed()
        event.accepted = true
    }

    Rectangle {
        id: background
        anchors.fill: parent

        ColumnLayout {
            id: basePage
            anchors.fill: parent
            spacing: 0

            Item {
                id: contentItem
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            BottomBar {
                id: bottomBar
                Layout.preferredHeight: parent.height * 0.1
                Layout.preferredWidth: parent.width
                onLeftButtonClicked: bottomBarLeftButtonClicked()
                onCentralButtonClicked: bottomBarCentralButtonClicked()
                onRightButtonClicked: bottomBarRightButtonClicked()
            }
        }
    }
}

//BottomBar.qml

import QtQuick 2.9
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Rectangle {
    property alias leftButton: leftButton
    property alias centralButton: centralButton
    property alias rightButton: rightButton
    signal leftButtonClicked()
    signal centralButtonClicked()
    signal rightButtonClicked()

    id: bottomBar
    color: "#fafafa"
    visible: leftButton.visible || centralButton.visible || rightButton.visible

    Row {
        anchors.fill: parent
        spacing: width * 0.02

        Item {
            height: parent.height
            width: parent.width * 0.32

            Button {
                id: leftButton
                anchors.fill: parent
                visible: false
                onClicked: bottomBar.leftButtonClicked()
            }
        }

        Item {
            height: parent.height
            width: parent.width * 0.32

            Button {
                id: centralButton
                anchors.fill: parent
                visible: false
                onClicked: bottomBar.centralButtonClicked()
            }
        }

        Item {
            height: parent.height
            width: parent.width * 0.32

            Button {
                id: rightButton
                anchors.fill: parent
                visible: false
                onClicked: bottomBar.rightButtonClicked()
            }
        }
    }
}

When the program starts everything works well and the bottomBar of the first page is visible.
Then I click on the NEXT button -> second page is shown.
Then I go back to the first page and the bottom bar of the first page has disappeared.
Am I doing something wrong?
Note: everything works well if I use a Loader, the problem seems related to StackView in some way

Axel Spoerl

It’s a bug, although I don’t find a ticket describing this particular malfunction. A lot of stuff has been fixed in Qt 6, so you should consider an upgrade.

Fausto01

@Axel-Spoerl thank you Axel, I know I should upgrade Qt but in this particular case I can't. Do you have any suggestions to work around this bug?

Axel Spoerl

How do you make your buttons visible?

Fausto01

In main.qml

Component {
    id: firstPage

    BasePage {
        color: "red"
        bottomBar.rightButton.text: qsTr("Next")
        bottomBar.rightButton.visible: true
        onBottomBarRightButtonClicked: stackView.push(secondPage)
    }
}

You can find all the code in the first post

Axel Spoerl

I overlooked it, indeed. And I think I have to revoke my judgement, that it's a bug.
Without having run your code, I guess that the first page's buttons all become invisible when you return to it.
Probably the same thing happens to the second page, when you create three and return from the third.

Maybe you wanna throw in a few console.log()s to see how the button visibility changes.

GrecKo

That's because chidren visibility also depends on their parrent visibility. When the second page is pushed on the stack view, the first page is made invisible and all its descendants witg it. Including the bottom bar right button.

What I advise you to do is not to directly modify an item's visibility but to bind it to another property.

Add a displayNextButton property and don't do bottomBar.rightButton.visible for example.

Anlther idea would be to add a rightAction property and assign it an Action when needed. Showing a button only when the action isn't null.

dheerendra

In addition to what @GrecKo said, it is an issue with visibility of firstPage along with bottomBar when you pop the second. You are explicitly setting the bottomBar.rightButton.visible: true & this is pashed to view. Then you push the secondPage.
During this time, firstPage is set to false. So all children everything set to false. When you pop the second, first page is visible. However bottomBar is visible only if the any of the buttons are visible. This is where the issue exist.
@Axel-Spoerl - No bug as already said.

Some thing like this will help you.
onBackKeyPressed: {
console.log(" Pop the First Page Now.....")
stackView.pop();
var item = stackView.get(0)
item.bottomBar.visible = true;
}

Fausto01

Thank you all guys!
I implemented @GrecKo solution and now it's working!
The BottomBar.qml file now look like this

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Rectangle {
    property bool leftButtonVisible: false
    property bool centralButtonVisible: false
    property bool rightButtonVisible: false
    property alias rightButtonText: rightButton.text
    signal leftButtonClicked()
    signal centralButtonClicked()
    signal rightButtonClicked()

    id: bottomBar
    color: "#fafafa"
    visible: leftButtonVisible || centralButtonVisible || rightButtonVisible

    Row {
        anchors.fill: parent
        spacing: width * 0.02

        Item {
            height: parent.height
            width: parent.width * 0.32

            Button {
                id: leftButton
                anchors.fill: parent
                visible: bottomBar.leftButtonVisible
                onClicked: bottomBar.leftButtonClicked()
            }
        }

        Item {
            height: parent.height
            width: parent.width * 0.32

            Button {
                id: centralButton
                anchors.fill: parent
                visible: bottomBar.centralButtonVisible
                onClicked: bottomBar.centralButtonClicked()
            }
        }

        Item {
            height: parent.height
            width: parent.width * 0.32

            Button {
                id: rightButton
                anchors.fill: parent
                visible: bottomBar.rightButtonVisible
                onClicked: bottomBar.rightButtonClicked()
            }
        }
    }
}