移动文本字段编辑区域

Posted 2023-02-16

【中文标题】移动文本字段编辑区域

【英文标题】：shift the textfield edit area

【发布时间】：2017-10-25 13:01:07

【问题描述】：

我有一个基于 qml 的应用程序，其中有一个搜索字段。该字段还有一个图标，表明它是一个搜索框。问题是当我输入文本时它会与图标重叠，我想基本上将文本输入区域限制在不包含图像的文本字段中。

qml代码如下：

TextField 
        id: searchBox
        font.pixelSize: 18
        background: Rectangle 
            radius: 6
            border.color: "#707070"
            border.width: 1

            Image 
                source: "../images/search.png"
                anchors.left: parent.left
                anchors.leftMargin: 12
                anchors.verticalCenter: parent.verticalCenter
            
        
    

生成的组件如下渲染：

如您所见，文本输入区域与图像重叠。有没有办法确保文本输入区域被剪裁或在这种情况下向右移动，并且用户无法在呈现图像的位置添加文本？​​

【参考方案1】：

您可以使用填充属性

rightPadding: 30
leftPadding: 24