Qt 5.15.2 item disappear when used in StackView
-
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 } }
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() } } } }
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 -
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.
-
@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?
-
How do you make your buttons visible?
-
-
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. -
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.
-
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;
} -
Thank you all guys!
I implemented @GrecKo solution and now it's working!
The BottomBar.qml file now look like thisimport 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() } } } }
-