QML TextEdit 中的占位符文本答案

【问题标题】：Placeholder text in QML TextEditQML TextEdit 中的占位符文本
【发布时间】：2016-11-01 08:39:45
【问题描述】：

我正在寻找一种方法来显示文本提示，将预期输入作为对用户的建议。以谷歌搜索栏为例：

是否有我缺少的属性，或者这是必须通过脚本实现的？

【问题讨论】：

标签： qml qt-quick

【解决方案1】：

Qt Quick 输入项上不存在该属性。您可以为功能投票here。

与此同时，您可以使用 Qt Quick Controls 2 中的TextArea。

如果您更愿意使用纯 Qt Quick，您可以执行与控件类似的操作，并在字段上方添加 Text 项：

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    width: 300
    height: 300
    visible: true

    TextEdit {
        id: textEdit
        width: 200
        height: 50

        property string placeholderText: "Enter text here..."

        Text {
            text: textEdit.placeholderText
            color: "#aaa"
            visible: !textEdit.text
        }
    }
}

【讨论】：

TextField 来自 Qt Quick Controls 1 也可以做到这一点。

【解决方案2】：

这有点旧，但我发现 Android 构建 的另一个必要性。由于 Android 仅在您在虚拟键盘中按 ok 后发送文本编辑信号，因此占位符仍然存在。所以为了避免它，我建议：

TextEdit {
    id: textEdit
    width: 200
    height: 50

    property string placeholderText: "Enter text here..."

    Text {
        text: textEdit.placeholderText
        color: "#aaa"
        visible: !textEdit.text && !textEdit.activeFocus // <----------- ;-)
    }
}

【讨论】：

【解决方案3】：

如果你想要一行输入，那么为什么不使用TextField 呢？

【讨论】：