QML-在重叠的Text和TextArea之间动态交换可见性/不透明度 [英] QML - Dynamically swap the visibility/opacity between overlapping Text and TextArea

问题描述

我想在QML中拥有一个具有以下行为组合的小部件:

I want to have a widget in QML which has combination of the following behaviors:

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

1) Multi line edit 2) Auto scroll the content as and when I hit newline. (The content on top of the page keeps going up as and when I enter new content at the bottom) 3) Have a placeholder text functionality.

据我所知，只有Text和TextField具有占位符text属性，只有TextArea具有多行编辑和自动滚动.但是，如果有所有此类组合的小部件，那么我的问题在重叠的Text和TextArea之间动态交换可见性/不透明度"将是无效的.

As far as I know, only Text and TextField are having placeholder text property and only TextArea is having a multi line edit plus auto scroll. But If there is any such widget with all the combinations then, my question "Dynamically swap the visibility/opacity between overlapping Text and TextArea " would be invalid.

如果没有这样的小部件(我想知道为什么)，我正在考虑有一个矩形，该矩形的Text和TextArea都重叠，并且基于以下逻辑，我希望对其中一个具有可见性/不透明性/焦点:

In case there is no such widget (I wonder why), I am thinking to have a rectangle which has both Text and TextArea overlapping and based on the below logic I want to have the visibility/opacity/focus on one of them:

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

If the Text Area is empty (0 characters), then have the Text in the foreground with focus and with the placeholder text "Enter some text". But as soon as the user starts typing, the Text should lose the focus, opacity and go to background and the TextArea should gain the focus and come to the foreground and start accepting multi line input. Similarly, when TextArea is in the foreground and is empty (0 characters) and when the user click on any other widget outside my Rectangle, the Text should again gain the focus, come to the foreground and display the placeholder again.

我试图从代码中获得灵感，但不幸的是，它失败了如果有人可以通过几行代码为我提供帮助，或者为我提供一些有关如何解决此问题的指导，那么该功能将对您有所帮助.

I tried to get inspiration from this code, but failed miserably, it would be helpful if anyone can help me with a few lines of code or give me some pointers on how to solve this.

推荐答案

您可以为Q1在TextField中实现TextArea的方式实现placeholderText.可以在此处找到源: TextField.qml

You can implement placeholderText for TextArea the same way Qt does in TextField. The source can be found here: TextField.qml

删除所有注释和属性时，基本上都有一个背景，并在该背景的最上方是MouseArea，placeholderText Text和TextInput.由于您需要在TextArea下方可视地放置占位符，因此必须具有透明背景:

When you remove all the comments and properties, you basically have a background and on top of that a MouseArea, the placeholderText Text and a TextInput. Since you need to have the placeholder visually below the TextArea, you must have a transparent background:

PlaceholderTextArea.qml

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
}

这篇关于QML-在重叠的Text和TextArea之间动态交换可见性/不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！