テキストフィールドの編集エリアを移動する

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