移动文本字段编辑区域

Question

我有一个基于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
            }
        }
    }

生成的组件呈现如下：

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

Answer 1

您可以使用填充属性

rightPadding: 30
leftPadding: 24