Home > OS >  QML TextField placeholderText disappear after push in StackView
QML TextField placeholderText disappear after push in StackView

Time:02-06

//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?

CodePudding user response:

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()
                }
            }
        }
    }
}

CodePudding user response:

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();
                }
            }
        }
    }

}

  •  Tags:  
  • Related