Text 自定义文本编辑，当文本输入变宽时如何隐藏文本输入

我试图使用

TextInput

元素创建自定义文本字段（我需要它来使用验证器和自定义样式）。但我无法隐藏

TextInput

内容扩展的一部分（见图）。我对其他元素也有类似的问题，虽然它有根项（容器）包含其他项，但如果子项放在容器坐标之外，则可以看到它们。如果儿童的部分不在根容器中，我如何使其隐藏

这里有代码，但实际上它只是一个模板，我尝试了uze

z

属性，但没有成功

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

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

谢谢你的帮助。我已经查看了

TextInput

文档，但是如果您知道我应该学习什么主题，请告诉我

---

好吧，我真的很想知道什么时候找到了

层

属性组。我刚刚打开了

图层。启用了
，我的目标就实现了。Qt文档中缺少一些信息。不幸的是，以前不知道
层的目的

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

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文档：

项目层

项目通常会直接呈现到它所属的窗口中。>但是，通过设置layer.enabled，可以将项目和>其整个子树委托到屏幕外表面。然后，只有屏幕外表面a>纹理将被绘制到窗口中

更新：

使用
Item
的
clip
属性进行注释，成本更低

剪辑：布尔

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

如果启用了“剪裁”，则项目会将其自己的绘画以及其子项的绘画剪裁到其边界矩形

所以，我只是把它放在那里，相信它可以帮助其他人解决同样的问题。
只需添加
剪辑：对
在文本输入中。这将解决您的问题。
为什么要显式设置
implicitWidth
和
implicitHeight
？您的意思是什么？我应该如何设置这个？我需要预定义的小部件大小，一旦它放置在我的
应用程序窗口上。如果我设置
width
和
height
这两种行为没有区别。如果您想要更易于使用的东西，您应该在QtQuick Controls中查看。谢谢，但我的实际目标是将任何验证器设置为文本。如我所见，只需使用
TextInput
Nope即可完成，正确的答案是将
：true
添加到
根目录中。默认情况下，剪裁为false，因此根据您的经验绘制父边界。使用
Layers
是可行的，但成本更高。是的，我尝试将
clip:true
添加到
input
中，它也可行。无论如何，当我只查看元素文档而不是检查
Item
type成员时，我错了。感谢您的评论。我遇到了这个问题，并使用clip:true来修复它，但现在我希望TextInput显示从字符串的开头开始，而不是从字符串的结尾开始。有什么建议吗？