QML - 在重叠的 Text 和 TextArea 之间动态交换可见性/不透明度

Posted 2023-03-05

【中文标题】QML - 在重叠的 Text 和 TextArea 之间动态交换可见性/不透明度

【英文标题】：QML - Dynamically swap the visibility/opacity between overlapping Text and TextArea

【发布时间】：2015-01-21 04:19:43

【问题描述】：

我想在 QML 中有一个小部件，它具有以下行为的组合：

1) 多行编辑 2）当我点击换行符时自动滚动内容。 （当我在底部输入新内容时，页面顶部的内容会不断上升） 3) 具有占位符文本功能。

据我所知，只有 Text 和 TextField 具有占位符文本属性，并且只有 TextArea 具有多行编辑和自动滚动功能。但是，如果有任何这样的小部件具有所有组合，那么我的问题“在重叠的 Text 和 TextArea 之间动态交换可见性/不透明度”将是无效的。

如果没有这样的小部件（我想知道为什么），我想有一个矩形，它同时具有 Text 和 TextArea 重叠，并且基于以下逻辑，我希望将可见性/不透明度/焦点放在其中一个上：

如果文本区域为空（0 个字符），则使前景中的文本具有焦点并使用占位符文本“输入一些文本”。但是一旦用户开始输入，文本应该失去焦点、不透明度并进入背景，而 TextArea 应该获得焦点并进入前台并开始接受多行输入。同样，当 TextArea 位于前台且为空（0 个字符）并且当用户单击我的 Rectangle 之外的任何其他小部件时，Text 应该再次获得焦点，来到前台并再次显示占位符。

我试图从这个code 中获得灵感，但惨遭失败，如果有人能帮我写几行代码或给我一些关于如何解决这个问题的建议，那将会很有帮助。

【参考方案1】：

您可以为TextArea 实现placeholderText，就像Qt 在TextField 中所做的那样。来源可以在这里找到：TextField.qml

当您删除所有 cmets 和属性时，您基本上有一个背景，在此基础上还有一个 MouseArea、placeholderText Text 和一个 TextInput。由于您需要在 TextArea 下方直观地显示占位符，因此您必须具有透明背景：

PlaceholderTextArea.qml

import QtQuick 2.3
import QtQuick.Controls 1.2

Rectangle 
    property alias placeholderText: placeholder.text

    id: background
    width: 640
    height: 480
    color: "#c0c0c0"

    Text 
        id: placeholder
        anchors.fill: parent
        renderType: Text.NativeRendering
        opacity: !textArea.text.length && !textArea.activeFocus ? 1 : 0
    

    TextArea 
        id: textArea
        anchors.fill: parent
        backgroundVisible: false
    

并使用您的组件：

PlaceholderTextArea 
    placeholderText: qsTr("Hello World")
    anchors.fill: parent

【讨论】：

这非常接近我想要的，但缺少我的要求之一。如您所见，当我开始输入时占位符消失了，但我希望占位符在我单击小部件的那一刻消失（有输入的动机）。以下顺序是我所期待的。单击后，占位符应该消失并且光标应该闪烁以允许我输入只要焦点在 textarea 上，但是如果我访问另一个页面或另一个选项卡，甚至单击任何其他小部件并且当我重新访问时textarea 如果文本区域仍然是空的，占位符应该重新出现。

【参考方案2】：

这是一个替代实现，对我来说效果更好：

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Item

    property alias placeholderText: placeholder.text

    property bool __shouldShowPlaceholderText:
        !textArea.text.length && !textArea.activeFocus

    // This only exists to get at the default TextFieldStyle.placeholderTextColor
    // ...maybe there is a better way?
    TextField
    
        visible: false
        style: TextFieldStyle
        
            Component.onCompleted: placeholder.textColor = placeholderTextColor
        
    

    TextArea
    
        id: placeholder
        anchors.fill: parent
        visible: __shouldShowPlaceholderText
        activeFocusOnTab: false
    

    TextArea
    
        id: textArea
        anchors.fill: parent
        backgroundVisible: !__shouldShowPlaceholderText