QML TextField placeholderText 在 StackView 中推送后消失

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

大家好，我对 TextField 的 placehoderText 属性有疑问。
如果我执行序列 -> 第 1 页上的“下一步” -> 第 2 页上的“返回” -> 第 1 页上的“下一步”，那么实际上会显示第 2 页，但 TextField 的 placeholderText 不再可见。
这是 Qt 错误还是我做错了什么？

Answer 1

问题是，通过像这样使用 Window 的父项，它们在弹出时不会被销毁。在 page2 的情况下，这导致它有一个 null 父级并且它调整为 0x0。然后，这会导致该页面中的所有其他控件的大小调整为 0，这对占位符文本来说是一个问题（他们可能没有预料到的情况）。

如果您改为使用组件，它们每次都会正确调整大小，因为它们是以正确的大小创建的，并根据需要销毁。

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

Answer 2

StackView 的目标不是您尝试使用... 如果你想防止破坏物品，你应该使用 SwipeView。

对于您的 porpuse，您可以使用一些自定义的 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();
                }
            }
        }
    }

}

QML TextField placeholderText 在 StackView 中推送后消失

QML TextField placeholderText disappear after push in StackView

qt

qml