自定义TextEdit，如何在变宽时隐藏TextInput [英] Custom TextEdit, how to hide TextInput when it goes wide

问题描述

我试图使用 TextInput 元素创建自定义文本字段（我需要使用它来使用验证器和自定义样式）。但是我无法隐藏 TextInput 扩展内容的一部分（见图）。我对其他元素也有类似的问题，尽管它具有包含其他项目的根项目（容器），但是如果将它们放置在容器坐标之外，则可以看到子项。如果孩子的部件不在根容器中，我该如何隐藏它们？

I've trying to create custom text field using TextInput element (I need it to use validator and custom style). But I can't hide part of TextInput content expanding (see image). I have similar problem with other elements, while it have root item (container) what contains other items, childrens can be seen if they are placed out of container coordinates. How can I make childrens parts hidden if they're out of root container?

有代码，但实际上只是模板，我试图用 z 属性，但没有成功。

There is the code, but it's actually just template, I've tried to uze z attribute, with no success.

BreezeQuickLineInput.qml

import QtQuick 2.4

Item {
    id: root
    property int fontSize: 18
    property BreezeQuickPalette palette: BreezeQuickPalette
    property string text: "Type here..."
    implicitHeight: input.font.pixelSize*2
    implicitWidth: 196
    Rectangle{
        id: body
        color: "transparent"
        anchors.fill: parent
        border {
            color: palette.plasmaBlue
            width: 1
        }
        TextInput{
            id: input
            anchors {
                fill: parent
            }
            font.pointSize: fontSize
            color: palette.normalText
            selectByMouse: true
        }
    }
}

感谢任何帮助。我已经检查了 TextInput 文档，但是如果您知道我应该学习的主题，请告诉我。

Appreciated any help. I've checked TextInput documentation, but if you know what topic I should learn please let me know.

< img src = https://i.stack.imgur.com/8DuUT.png alt =在此处输入图片描述>

推荐答案

好吧，真的很想知道何时找到 layer 属性组。我刚刚打开 layer.enabled ，我的目标已经实现。 Qt文档中缺少一些信息。不幸的是以前不知道 layer 组的用途。

Well, really wondered when found layer attribute group. I've just turned on layer.enabled and my goal was accomplished. There is some lack of info in Qt documents. Unfortunatelly didn't know the purpose of layer group previously.

BreezeQuickLineInput.qml

import QtQuick 2.4

Item {
    id: root
    property int fontSize: 18
    property BreezeQuickPalette palette: BreezeQuickPalette
    property string text: "Type here..."
    implicitHeight: input.font.pixelSize*2
    implicitWidth: 196
    Rectangle{
        id: body
        color: "transparent"
        anchors.fill: parent
        border {
            color: palette.plasmaBlue
            width: 1
        }
        TextInput{
            id: input
            anchors {
                fill: parent
            }
            font.pointSize: fontSize
            color: palette.normalText
            selectByMouse: true
            layer.enabled: true
        }
    }
}

更新：

我很糟糕，Qt做得很好。我的回答是在项目描述中。从Qt文档：

My bad, Qt doing business well. My answer was in Item description. From Qt docs:

项目层

Item Layers

项目通常会直接渲染进入它所属的窗口。 >但是，通过设置layer.enabled，可以将项目及其整个子树委托到屏幕外表面。然后仅将屏幕外的表面>纹理绘制到窗口中。

An Item will normally be rendered directly into the window it belongs to. >However, by setting layer.enabled, it is possible to delegate the item and >its entire subtree into an offscreen surface. Only the offscreen surface, a >texture, will be then drawn into the window.

更新：

后跟 BaCaRoZzo 使用剪辑进行评论 Item 的属性便宜。

Following by BaCaRoZzo comment using clip attribute of Item is less expensive.

clip：bool

clip : bool

此属性保存是否启用裁剪。裁剪的默认值为false。

This property holds whether clipping is enabled. The default clip value is false.

如果启用了裁剪，则一个项目会将其自己的绘画以及其子代的绘画裁剪到其边界矩形。 / p>

If clipping is enabled, an item will clip its own painting, as well as the painting of its children, to its bounding rectangle.

所以，我就把它留在那里，相信它可以帮助其他有相同问题的人。

So, I just left it there, believe it can help others with same question.

这篇关于自定义TextEdit，如何在变宽时隐藏TextInput的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！