移动文本字段编辑区域答案

【问题标题】：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
            }
        }
    }

生成的组件如下渲染：

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

【问题讨论】：

标签： qt qml qt5 qtquick2 qtquickcontrols2

【解决方案1】：

您可以使用填充属性

rightPadding: 30
leftPadding: 24

【讨论】：