QML TextField placeholderText disappear after push in StackView - qt

Question

//main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
StackView {
id: stackView
anchors.fill: parent
initialItem: page1
}
Item {
id: page1
Column {
height: parent.height * 0.2
width: parent.width * 0.5
anchors.centerIn: parent
spacing: height * 0.04
TextField {
height: parent.height * 0.48
width: parent.width
placeholderText: qsTr("Placeholder 1")
}
Button {
height: parent.height * 0.48
width: parent.width
text: qsTr("Next")
onClicked: stackView.push(page2)
}
}
}
Item {
id: page2
Column {
height: parent.height * 0.2
width: parent.width * 0.5
anchors.centerIn: parent
spacing: height * 0.04
TextField {
height: parent.height * 0.48
width: parent.width
placeholderText: qsTr("Placeholder 2")
}
Button {
height: parent.height * 0.48
width: parent.width
text: qsTr("Back")
onClicked: stackView.pop()
}
}
}
}
Hi everybody, I have a problem with the placehoderText property of TextField.
If i do the sequence -> "Next" on page1 -> "Back" on page2 -> "Next" on page1, then page2 is actually displayed but the placeholderText of the TextField is not visible anymore.
Is this a Qt bug or am I doing something wrong?

Answer 1

StackView's goal is not that you tried to use ...
you should use SwipeView if you want prevent destroying items.
for your porpuse you can use a little customized SwipeView:
//main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
SwipeView {
id: swipView
anchors.fill: parent
interactive: false;
property int stackIndex: -1;
function popIndex(){
return (--stackIndex);
}
function pushIndex(){
return (++stackIndex);
}
Component.onCompleted: {
if(swipView.contentChildren.length>0)
{
swipView.stackIndex=0;
}
}
Item {
id: page1
Column {
height: parent.height * 0.2
width: parent.width * 0.5
anchors.centerIn: parent
spacing: height * 0.04
TextField {
height: parent.height * 0.48
width: parent.width
placeholderText: qsTr("Placeholder 1")
}
Button {
height: parent.height * 0.48
width: parent.width
text: qsTr("Next")
onClicked: swipView.currentIndex=swipView.pushIndex();
}
}
}
Item {
id: page2
Column {
height: parent.height * 0.2
width: parent.width * 0.5
anchors.centerIn: parent
spacing: height * 0.04
TextField {
height: parent.height * 0.48
width: parent.width
placeholderText: qsTr("Placeholder 2")
}
Button {
height: parent.height * 0.48
width: parent.width
text: qsTr("Back")
onClicked: swipView.currentIndex=swipView.popIndex();
}
}
}
}
}

Answer 2

The issue is that by using Items that are parented to the Window like that, they don't get destroyed when they get popped. In the case of page2, that causes it to have a null parent and it resizes to 0x0. That then causes all of the other controls in that page to resize to 0 and that's a problem for the placeholder text (a situation they likely didn't expect).
If instead you use components, they will be sized correctly each time because they are created new at the right size and destroyed as needed.
//main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
StackView {
id: stackView
anchors.fill: parent
initialItem: page1
}
Component {
id: page1
Item {
Column {
height: parent.height * 0.2
width: parent.width * 0.5
anchors.centerIn: parent
spacing: height * 0.04
TextField {
height: parent.height * 0.48
width: parent.width
placeholderText: qsTr("Placeholder 1")
}
Button {
height: parent.height * 0.48
width: parent.width
text: qsTr("Next")
onClicked: stackView.push(page2)
}
}
}
}
Component {
id: page2
Item {
Column {
height: parent.height * 0.2
width: parent.width * 0.5
anchors.centerIn: parent
spacing: height * 0.04
TextField {
height: parent.height * 0.48
width: parent.width
placeholderText: qsTr("Placeholder 2")
}
Button {
height: parent.height * 0.48
width: parent.width
text: qsTr("Back")
onClicked: stackView.pop()
}
}
}
}
}