Интересно, есть ли простой способ установить небольшое изображение внутри TextField в стиле Material - без переопределения всего элемента управления TextField?

Question

Интересно, есть ли простой способ установить небольшое изображение внутри TextField в стиле Material - без переопределения всего элемента управления TextField? Я пытаюсь создать поисковый ящик.

Answer 1

Вы можете манипулировать свойством background элемента TextField. Посмотрите на этот пример:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12
import "qrc:/"

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Material.theme: Material.Dark
    TextField{
        width: 128
        height: 32
        rightPadding: 32
        background: Rectangle{
            border.color: "black"
            border.width: 1
            Image {
                anchors{
                    right: parent.right
                    verticalCenter: parent.verticalCenter
                }
                width: 32
                height: 32
                source: "qrc:/zoom.png"
            }
        }
    }
}

Это самый простой способ, который я знаю для этой задачи без создания пользовательского элемента. Дело в том, что вам нужно сделать некоторые дополнительные настройки, чтобы он снова выглядел материально, потому что фон заменяет другие вещи.

Answer 2

Лучший способ - создать свой собственный компонент и установить все, что вам нужно внутри. В этом случае создайте Item (или Rectangle), закрепите текстовое поле с одной стороны и прикрепите значок к другой. Это будет работать без каких-либо сюрпризов. В общем, это лучший способ решения таких проблем.