QML中实现输入框对超长输入内容的遮罩显示

嘿，我来帮你搞定这个QML输入框的遮罩需求！你想要让输入框（inputNameBox）作为文本的可视边界，超出范围的字符自动隐藏，其实有两种简单的实现方式，优先推荐用clip属性，比OpacityMask更直接高效。

方法一：使用clip属性（最简单） #

QML的Item类自带clip属性，设置为true后，所有子元素超出父容器边界的部分都会被自动裁剪掉，连圆角也能完美适配。只需要给你的inputNameBox添加一行代码就行：

Rectangle { 
    id: inputNameBox
    onVisibleChanged: if (visible) textNameInput.forceActiveFocus()
    anchors.verticalCenter: parent.verticalCenter
    anchors.horizontalCenter: parent.horizontalCenter
    color: 'grey'
    radius: 5
    height: parent.height/8
    width: parent.width/4
    clip: true // 关键：开启裁剪，子项超出区域自动隐藏

    TextInput { 
        id: textNameInput
        autoScroll: true // 保留这个属性，输入到末尾时文本会滚动到可视区域
        anchors.margins: inputNameBox.radius
        anchors.fill: inputNameBox
        font.pixelSize: inputNameBox.height/2
        maximumLength: 50
        horizontalAlignment: TextInput.AlignHCenter
        verticalAlignment: TextInput.AlignVCenter
    }
}

这样设置后，不管输入多少字符，只要超出inputNameBox的宽度范围，就会被容器的边界（包括圆角）裁剪掉，完全符合你的需求。

方法二：使用OpacityMask（备选方案） #

如果你一定要用OpacityMask实现，需要调整一下元素的层级结构——把TextInput和背景框放在同一个父容器下，再用背景框作为遮罩源。具体代码如下：

Item {
    anchors.verticalCenter: parent.verticalCenter
    anchors.horizontalCenter: parent.horizontalCenter
    height: parent.height/8
    width: parent.width/4

    // 背景框，作为遮罩的形状源
    Rectangle { 
        id: inputNameBox
        anchors.fill: parent
        color: 'grey'
        radius: 5
        onVisibleChanged: if (visible) textNameInput.forceActiveFocus()
    }

    // 输入框，放在背景框上方
    TextInput { 
        id: textNameInput
        anchors.fill: parent
        anchors.margins: inputNameBox.radius
        font.pixelSize: inputNameBox.height/2
        maximumLength: 50
        horizontalAlignment: TextInput.AlignHCenter
        verticalAlignment: TextInput.AlignVCenter
        autoScroll: true
    }

    // 遮罩：用inputNameBox的形状裁剪textNameInput
    OpacityMask {
        anchors.fill: textNameInput
        source: textNameInput
        maskSource: inputNameBox
    }
}

这里的核心是让OpacityMask的source指向TextInput，maskSource指向inputNameBox，这样输入框的文本就会被裁剪成背景框的形状，超出部分不可见。

内容的提问来源于stack exchange，提问作者antinomy