Свойство contentItem в Qml - PullRequest
Новая
       11

Свойство contentItem в Qml

0 голосов
/ 14 ноября 2018

Следующий код Qml дает следующий вывод (ожидаемый): 

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Window 2.11

Window {
    height: 200
    width: 200
    visible: true

    Button {
        id: root
        text: "Text"
        anchors.centerIn: parent

        Item {
            anchors.fill: parent
            Text {
                text: "Item.Text"
                color: "red"
            }
        }
    }
}

enter image description here

Следующий код (используя contentItem ) создает другой вывод: 

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Window 2.11

Window {
    height: 200
    width: 200
    visible: true

    Button {
        id: root
        text: "Text"
        anchors.centerIn: parent

        contentItem: Item {
            anchors.fill: parent
            Text {
                text: "Item.Text"
                color: "red"
            }
        }
    }
}

enter image description here

Документация Qt не очень понятна, по крайней мере для меня. Вопрос в том, что делает свойство contentItem ? Когда его следует использовать?

1 Ответ

0 голосов
/ 14 ноября 2018

Краткий ответ: contentItem предназначен для настройки элемента управления и заменяет существующую реализацию элемента визуального переднего плана вашим текстом.

Длинный ответ:

A Quick Item имеет так называемое «свойство по умолчанию» - свойство data. По определению, если вы добавляете элемент в качестве дочернего элемента другого элемента, он вместо этого назначается свойству по умолчанию. Что означает следующий пример: 

Item {
    Text { text: "test1"} 
}

Фактически идентичен: 

Item {
    data: [
        Text { text: "test2"}
    ]
}

Если вы знаете, посмотрите на ваш пример, в первом варианте вы просто добавляете дочерний элемент к корневой кнопке. Поскольку никакой дополнительной информации не предоставлено, она помещается в координаты (0,0) в пределах своего родителя.

Однако свойство contentItem определяется в документации следующим образом:

Это свойство содержит элемент визуального содержимого.

В случае Button это внутренне используемый Label для отображения свойства text кнопки. Он существует для изменения внешнего вида кнопки.

Во втором примере вы «настраиваете» кнопку, заменяя внутреннюю метку собственной Text, но без какого-либо кода для правильного позиционирования или заполнения элемента. Правильный способ объявления элемента содержимого можно найти в руководстве по настройке : 

Button {
    id: control
    text: qsTr("Button")

    contentItem: Text {
        text: control.text
        font: control.font
        opacity: enabled ? 1.0 : 0.3
        color: control.down ? "#17a81a" : "#21be2b"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    // ...
}

Вы можете либо определить его как часть пользовательского стиля, либо создать MyButton.qml, где делать именно это, и затем использовать MyButton в других файлах QML, предоставляя вам кнопку с пользовательским стилем, сохраняя при этом API без изменений (например, возможность устанавливать текст с помощью свойства text и т. д.)

Надеюсь, этого было достаточно, чтобы помочь вам понять, как это работает.

...