Тип QML Item

Базовый визуальный тип QML Подробнее...

• Список всех членов, включая унаследованные

Свойства

• activeFocus : bool
• activeFocusOnTab : bool
• anchors
  • anchors.top : AnchorLine
  • anchors.bottom : AnchorLine
  • anchors.left : AnchorLine
  • anchors.right : AnchorLine
  • anchors.horizontalCenter : AnchorLine
  • anchors.verticalCenter : AnchorLine
  • anchors.baseline : AnchorLine
  • anchors.fill : Item
  • anchors.centerIn : Item
  • anchors.margins : real
  • anchors.topMargin : real
  • anchors.bottomMargin : real
  • anchors.leftMargin : real
  • anchors.rightMargin : real
  • anchors.horizontalCenterOffset : real
  • anchors.verticalCenterOffset : real
  • anchors.baselineOffset : real
  • anchors.alignWhenCentered : bool
• antialiasing : bool
• baselineOffset : int
• children : list<Item>
• childrenRect
  • childrenRect.x : real
  • childrenRect.y : real
  • childrenRect.width : real
  • childrenRect.height : real

Методы

• childAt(real x, real y)
• bool contains(point point)
• forceActiveFocus(Qt::FocusReason reason)
• forceActiveFocus()
• bool grabToImage(callback, targetSize)
• object mapFromItem(Item item, real x, real y, real width, real height)
• object mapFromItem(Item item, real x, real y)
• object mapToItem(Item item, real x, real y, real width, real height)
• object mapToItem(Item item, real x, real y)
• nextItemInFocusChain(bool forward)

Подробное описание

Тип Item — базовый тип для всех визуальных элементов в Qt Quick.

Все визуальные элементы в Qt Quick наследуются от Item. Хотя объект Item не имеет визуального представления, он определяет все атрибуты, общие для визуальных элементов, такие как положение x и y, ширина и высота, привязка и поддержка обработки клавиш.

Тип Item может быть полезен для группировки нескольких элементов под одним корневым визуальным элементом. Например:

import QtQuick 2.0

Item {
    Image {
        source: "tile.png"
    }
    Image {
        x: 80
        width: 100
        height: 100
        source: "tile.png"
    }
    Image {
        x: 190
        width: 100
        height: 100
        fillMode: Image.Tile
        source: "tile.png"
    }
}

Обработка клавиш

Обработка клавиш доступна для всех визуальных типов, основанных на Item, через свойство Keys attached property. Свойство attached property Keys предоставляет базовые сигналы, такие как pressed и released, а также сигналы для определённых клавиш, такие как spacePressed. В примере ниже объекту назначается фокус клавиатуры, и обрабатывается левая клавиша через общий onPressed обработчик, а клавиша Enter — через onReturnPressed обработчик:

import QtQuick 2.0

Item {
    focus: true
    Keys.onPressed: {
        if (event.key == Qt.Key_Left) {
            console.log("move left");
            event.accepted = true;
        }
    }
    Keys.onReturnPressed: console.log("Pressed return");
}

См. подробную документацию по свойству Keys.

Зеркальное отображение макета

Макеты Item можно зеркально отображать с помощью присоединенного свойства LayoutMirroring. Это приводит к горизонтальному изменению направления привязок, а также к изменению направления макетов элементов, которые компонуют или позиционируют своих потомков (например, ListView или Row).

См. LayoutMirroring для получения более подробной информации.

Слои элементов

Элемент Item обычно отображается непосредственно в окне, к которому он принадлежит. Однако, установив layer.enabled, можно делегировать элемент и всё его поддерево на отдельную поверхность вне экрана. Затем только поверхность вне экрана, текстура, будет отображаться в окне.

Если требуется размер текстуры, отличающийся от размера элемента, это возможно с помощью layer.textureSize. Для отображения только части элемента на текстуре используйте layer.sourceRect. Также возможно задать layer.sourceRect так, чтобы он выходил за пределы элемента. В этом случае внешний вид будет заполнен прозрачными пикселями.

Элемент будет использовать линейную интерполяцию для масштабирования, если layer.smooth установлено в true и будет использовать мип-мапинг для уменьшения масштаба, если layer.mipmap установлено в true. Мип-мапинг может улучшить качество визуального отображения уменьшенных элементов. Для мип-мапинга отдельных элементов Image используйте Image::mipmap.

Непрозрачность слоя против непрозрачности элемента

При применении непрозрачности к иерархии элементов непрозрачность применяется к каждому элементу индивидуально. Это может привести к нежелательным визуальным результатам при применении непрозрачности к поддереву. Рассмотрим следующий пример:

Неслойная непрозрачность Item { id: nonLayered opacity: 0.5 width: 100 height: 100 Rectangle { width: 80; height: 80; border.width: 1 } Rectangle { x: 20; y: 20; width: 80; height: 80; border.width: 1 } }

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

Вот тот же пример со включённым слоем:

Item {
    id: layered

    opacity: 0.5

    layer.enabled: true

    width: 100
    height: 100

    Rectangle { width: 80; height: 80; border.width: 1 }
    Rectangle { x: 20; y: 20; width: 80; height: 80; border.width: 1 }
}

Комбинирование с ShaderEffects

Установка layer.enabled в true преобразует элемент в поставщика текстуры, что позволяет использовать элемент напрямую как текстуру, например, в сочетании с типом ShaderEffect.

Можно применить эффект к слою во время выполнения, используя layer.effect:

Item {
    id: layerRoot
    layer.enabled: true
    layer.effect: ShaderEffect {
        fragmentShader: "
            uniform lowp sampler2D source; // this item
            uniform lowp float qt_Opacity; // inherited opacity of this item
            varying highp vec2 qt_TexCoord0;
            void main() {
                lowp vec4 p = texture2D(source, qt_TexCoord0);
                lowp float g = dot(p.xyz, vec3(0.344, 0.5, 0.156));
                gl_FragColor = vec4(g, g, g, p.a) * qt_Opacity;
            }"
    }

В этом примере мы реализуем эффект шейдера вручную. Модуль Qt Graphical Effects содержит набор готовых эффектов для использования с Qt Quick.

См. ShaderEffect для получения дополнительной информации об использовании эффектов.

Примечание: layer.enabled на самом деле — просто более удобный способ использования ShaderEffectSource.

Память и производительность

Когда слой элемента включен, граф сцены выделит память в GPU, равную width x height x 4. В конфигурациях с ограниченной памятью следует с осторожностью использовать большие слои.

В мире QPainter / QWidget иногда выгодно кэшировать сложное содержимое в pixmap, image или texture. В Qt Quick из-за техник, уже применённых рендерером графа сцены, в большинстве случаев это не требуется. Чрезмерные вызовы отрисовки уже уменьшены за счёт кэширования, и кэш в большинстве случаев будет смешивать больше пикселей, чем исходное содержимое. Поэтому накладные расходы на рендеринг на отдельный экран и смешивание, связанные с отрисовкой полученной текстуры, часто оказываются более дорогостоящими, чем просто разрешение элемента и его дочерних элементов быть отображенными обычно.

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

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

Документация по свойствам

activeFocus : bool

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

Если activeFocus имеет значение true, то этот элемент либо получает ввод с клавиатуры в данный момент, либо это FocusScope предок элемента, который получает ввод с клавиатуры в данный момент.

Обычно активный фокус приобретается путём установки focus на элементе и его окружающих объектах FocusScope. В следующем примере у объектов input и focusScope будет активный фокус, в то время как у корневого объекта прямоугольника его не будет.

import QtQuick 2.0

Rectangle {
    width: 100; height: 100

    FocusScope {
        id: focusScope
        focus: true

        TextInput {
            id: input
            focus: true
        }
    }
}

См. также focus и Фокус клавиатуры в Qt Quick.

activeFocusOnTab : bool

Это свойство содержит значение, указывающее, хочет ли элемент быть в цепочке фокуса при нажатии клавиши Tab. По умолчанию оно установлено в false.

Цепочка фокуса при нажатии клавиши Tab проходит по элементам, сначала посещая родителя, а затем его потомков в порядке их появления в свойстве children. Нажатие клавиши Tab на элементе в цепочке фокуса переместит фокус клавиатуры на следующий элемент в цепочке. Нажатие клавиши BackTab (обычно Shift+Tab) переместит фокус на предыдущий элемент.

Для настройки цепочки фокуса при нажатии клавиши Tab вручную см. KeyNavigation. События нажатия клавиши Tab, используемые Keys или KeyNavigation, имеют приоритет над поведением цепочки фокуса; игнорируйте события в других обработчиках клавиш, чтобы позволить им распространяться.

anchors.top : AnchorLine

Привязки обеспечивают способ позиционирования элемента, указав его отношение к другим элементам.

Отступы применяются к привязкам top, bottom, left, right и fill. Свойство anchors.margins можно использовать для установки всех различных отступов сразу, к одному значению. Оно не будет переопределять конкретный отступ, который был установлен ранее; чтобы очистить явный отступ, установите его значение в undefined. Обратите внимание, что отступы привязаны к конкретным привязкам и не применяются, если элемент не использует привязки.

Смещения применяются к горизонтальным центрированным, вертикальным центрированным и привязкам к базовой линии.

Item {
    Image {
        id: pic
        // ...
    }
    Text {
        id: label
        anchors.horizontalCenter: pic.horizontalCenter
        anchors.top: pic.bottom
        anchors.topMargin: 5
        // ...
    }
}

Item {
    Image {
        id: pic
        // ...
    }
    Text {
        id: label
        anchors.left: pic.right
        anchors.leftMargin: 5
        // ...
    }
}

anchors.fill предоставляет удобный способ, чтобы один элемент имел такую же геометрию, как и другой элемент, и эквивалентен подключению всех четырёх привязок.

Чтобы очистить значение привязки, установите его в undefined.

anchors.alignWhenCentered (по умолчанию true) заставляет центрированные привязки выравниваться по целому пикселю; если элемент, который центрируется, имеет нечётную ширину или высоту, элемент будет размещён по целому пикселю, а не по половинному. Это гарантирует, что элемент будет нарисован чётко. Существуют случаи, когда это нежелательно, например, при повороте элемента, могут быть заметны подёргивания, поскольку центр будет округлен.

Примечание: Вы можете привязать элемент только к своим братьям и сёстрам или к родителю.

Для получения дополнительной информации см. Расположение якорей.

antialiasing : bool

Используется визуальными элементами для определения, следует ли использовать сглаживание или нет. В некоторых случаях элементы с антиалиасингом требуют больше памяти и, возможно, медленнее отрисовываются (см. Антиалиасинг для получения более подробной информации).

По умолчанию значение равно false, но может быть переопределено производными элементами.

baselineOffset : int

Определяет положение базовой линии элемента в локальных координатах.

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

Для элементов, не являющихся текстом, используется смещение базовой линии по умолчанию 0.

children : list<Item>

Свойство children содержит список визуальных дочерних элементов этого элемента. Свойство resources содержит невизуальные ресурсы, которые вы хотите использовать по имени.

Обычно нет необходимости ссылаться на эти свойства при добавлении дочерних элементов или ресурсов, так как свойство data по умолчанию автоматически назначит дочерние объекты свойствам children и resources соответственно. См. документацию по свойству data для получения подробной информации.

childrenRect.x : real

Это свойство хранит коллективное положение и размер дочерних элементов элемента.

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

clip : bool

Это свойство содержит значение, определяющее, включено ли обрезка. Значение clip по умолчанию равно false.

Если обрезка включена, элемент обрежет собственное рисование, а также рисование своих дочерних элементов, к своему прямоугольнику ограничительной рамки.

[default] data : list<Object>

Свойство data позволяет свободно смешивать визуальные дочерние элементы и ресурсы в элементе. Если вы назначите визуальный элемент в список data, он станет дочерним элементом, а если вы назначите любой другой тип объекта, он будет добавлен как ресурс.

Таким образом, вы можете написать:

Item {
    Text {}
    Rectangle {}
    Timer {}
}

вместо:

Item {
    children: [
        Text {},
        Rectangle {}
    ]
    resources: [
        Timer {}
    ]
}

Обычно не нужно ссылаться на свойство data, так как это свойство по умолчанию для Item, и поэтому все дочерние элементы автоматически назначаются этому свойству.

enabled : bool

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

Прямое изменение этого свойства влияет на значение enabled дочерних элементов. При установке в значение false, значения enabled всех дочерних элементов также становятся false. При установке в значение true, значения enabled дочерних элементов возвращаются к true, если они не были явно установлены в false.

Установка этого свойства в значение false автоматически приводит к установке activeFocus в значение false, и этот элемент больше не будет получать события клавиатуры.

См. также visible.

focus : bool

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

В следующем примере input получит активный фокус, когда scope получит активный фокус:

import QtQuick 2.0

Rectangle {
    width: 100; height: 100

    FocusScope {
        id: scope

        TextInput {
            id: input
            focus: true
        }
    }
}

В целях этого свойства вся сцена предполагается действующей как область фокусировки. На практике это означает, что следующий QML даст активный фокус элементу input при запуске.

Rectangle {
    width: 100; height: 100

    TextInput {
          id: input
          focus: true
    }
}

См. также activeFocus и Фокус клавиатуры в Qt Quick.

height : real

Определяет положение и размер элемента.

Положение (x, y) относительно родителя.

Item { x: 100; y: 100; width: 100; height: 100 }

implicitHeight : real

Определяет естественную высоту элемента, если не указана ширина или высота.

По умолчанию неявный размер большинства элементов — 0x0, однако некоторые элементы имеют неявный размер, который нельзя переопределить, например, Image и Text.

Установка неявного размера полезна для определения компонентов, имеющих предпочтительный размер, основанный на их содержимом, например:

// Label.qml
import QtQuick 2.0

Item {
    property alias icon: image.source
    property alias label: text.text
    implicitWidth: text.implicitWidth + image.implicitWidth
    implicitHeight: Math.max(text.implicitHeight, image.implicitHeight)
    Image { id: image }
    Text {
        id: text
        wrapMode: Text.Wrap
        anchors.left: image.right; anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
    }
}

Примечание: Использование implicitWidth для Text или TextEdit и явное задание ширины влечет за собой снижение производительности, так как текст должен быть выровнен дважды.

implicitWidth : real

Определяет естественную ширину элемента, если не указана ширина или высота.

По умолчанию неявный размер большинства элементов — 0x0, однако некоторые элементы имеют неявный размер, который нельзя переопределить, например, Image и Text.

Установка неявного размера полезна для определения компонентов, имеющих предпочтительный размер, основанный на их содержимом, например:

// Label.qml
import QtQuick 2.0

Item {
    property alias icon: image.source
    property alias label: text.text
    implicitWidth: text.implicitWidth + image.implicitWidth
    implicitHeight: Math.max(text.implicitHeight, image.implicitHeight)
    Image { id: image }
    Text {
        id: text
        wrapMode: Text.Wrap
        anchors.left: image.right; anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
    }
}

Примечание: Использование implicitWidth для Text или TextEdit и явное задание ширины влечет за собой снижение производительности, так как текст должен быть выровнен дважды.

layer.effect : Component

Хранит эффект, применяемый к этому слою.

Эффект обычно является компонентом ShaderEffect, хотя может быть назначен любой компонент Item. Эффект должен иметь свойство source texture с именем, соответствующим layer.samplerName.

См. также layer.samplerName и Слои элементов.

layer.enabled : bool

Содержит значение, определяющее, является ли элемент слоистым. Слоирование по умолчанию выключено.

Слоистый элемент отрисовывается на внеэкранной поверхности и кешируется до тех пор, пока он не изменится. Включение слоирования для сложных иерархий QML-элементов может иногда быть оптимизацией.

Ни одно из других свойств слоя не оказывает никакого влияния при отключении слоя.

См. также Слои элементов.

layer.format : перечисление

Это свойство определяет внутренний формат OpenGL текстуры. Изменение этого свойства имеет смысл, когда также указан layer.effect. В зависимости от реализации OpenGL это свойство может позволить сэкономить некоторую память текстуры.

• ShaderEffectSource.Alpha - GL_ALPHA;
• ShaderEffectSource.RGB - GL_RGB
• ShaderEffectSource.RGBA - GL_RGBA

Примечание: ShaderEffectSource.RGB и ShaderEffectSource.Alpha следует использовать с осторожностью, так как поддержка этих форматов в базовом оборудовании и драйвере часто отсутствует.

См. также Слои элементов.

layer.mipmap : bool

Если это свойство равно true, для текстуры генерируются mipmap.

Примечание: Некоторые реализации OpenGL ES 2 не поддерживают mipmap для текстур, не являющихся степенью двойки.

См. также Слои элементов.

layer.samplerName : строка

Хранит имя свойства source texture эффекта.

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

См. также layer.effect, ShaderEffect и Слои элементов.

layer.smooth : bool

Содержит значение, определяющее, плавно ли преобразуется слой.

См. также Слои элементов.

layer.sourceRect : прямоугольник

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

См. также Слои элементов.

layer.textureMirroring : перечисление

Это свойство определяет, как должна быть отражена сгенерированная OpenGL-текстура. Значение по умолчанию — ShaderEffectSource.MirrorVertically. Настройка отражения может быть полезна, если сгенерированная текстура напрямую используется пользовательскими шейдерами, такими как те, что указаны в ShaderEffect. Если для слоистого элемента не указан эффект, отражение не влияет на представление элемента в пользовательском интерфейсе.

• ShaderEffectSource.NoMirroring - Отсутствие отражения
• ShaderEffectSource.MirrorHorizontally - Сгенерированная текстура отображается перевернутой по оси X.
• ShaderEffectSource.MirrorVertically - Сгенерированная текстура отображается перевернутой по оси Y.

Это свойство QML было добавлено в Qt 5.6.

layer.textureSize : size

Это свойство хранит запрашиваемый размер текстуры слоя в пикселях. Если оно пустое (что является значением по умолчанию), используется размер элемента.

Примечание: На некоторых платформах есть ограничение на минимальный размер буферов фреймов, что означает, что фактический размер текстуры может быть больше, чем запрашиваемый размер.

См. также Слои элементов.

layer.wrapMode : перечисление

Это свойство определяет режимы обрезки OpenGL, связанные с текстурой. Изменение этого свойства имеет смысл, когда указан параметр layer.effect.

• ShaderEffectSource.ClampToEdge - GL_CLAMP_TO_EDGE по горизонтали и вертикали
• ShaderEffectSource.RepeatHorizontally - GL_REPEAT по горизонтали, GL_CLAMP_TO_EDGE по вертикали
• ShaderEffectSource.RepeatVertically - GL_CLAMP_TO_EDGE по горизонтали, GL_REPEAT по вертикали
• ShaderEffectSource.Repeat - GL_REPEAT по горизонтали и вертикали

Примечание: Некоторые реализации OpenGL ES 2 не поддерживают режим обрезки GL_REPEAT с текстурами, не являющимися степенями двойки.

См. также Слои элементов.

opacity : вещественное

Это свойство хранит непрозрачность элемента. Непрозрачность задается числом от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный). Значение по умолчанию — 1.0.

При установке этого свойства указанная непрозрачность также применяется к дочерним элементам индивидуально. В некоторых случаях это может иметь непредвиденный эффект. Например, во второй группе прямоугольников ниже, красный прямоугольник имеет непрозрачность 0,5, которая влияет на непрозрачность его синего дочернего прямоугольника, даже если у дочернего прямоугольника непрозрачность не указана.

Item {
    Rectangle {
        color: "red"
        width: 100; height: 100
        Rectangle {
            color: "blue"
            x: 50; y: 50; width: 100; height: 100
        }
    }
}

Item {
    Rectangle {
        opacity: 0.5
        color: "red"
        width: 100; height: 100
        Rectangle {
            color: "blue"
            x: 50; y: 50; width: 100; height: 100
        }
    }
}

Изменение непрозрачности элемента не влияет на получение им событий пользовательского ввода. (В отличие от этого, установка свойства visible в false останавливает события мыши, а установка свойства enabled в false останавливает события мыши и клавиатуры, а также снимает активный фокус с элемента.)

См. также visible.

parent : Item

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

Примечание: Понятие визуального родителя отличается от понятия родителя QObject. Визуальный родитель элемента может не совпадать с его родителем по объекту. Подробнее см. Концепции - Визуальный родитель в Qt Quick.

resources : список<Объект>

Свойство children содержит список визуальных дочерних элементов этого элемента. Свойство resources содержит невизуальные ресурсы, к которым вы хотите получить доступ по имени.

Обычно нет необходимости ссылаться на эти свойства при добавлении дочерних элементов или ресурсов, так как свойство data по умолчанию автоматически назначит дочерние объекты свойствам children и resources соответственно. См. документацию к data для получения подробностей.

rotation : вещественное

Это свойство хранит угол поворота элемента в градусах по часовой стрелке вокруг transformOrigin.

Значение по умолчанию — 0 градусов (то есть, без поворота).

Rectangle {
    color: "blue"
    width: 100; height: 100
    Rectangle {
        color: "red"
        x: 25; y: 25; width: 50; height: 50
        rotation: 30
    }
}

См. также Преобразование и Поворот.

scale : вещественное

Это свойство хранит коэффициент масштабирования для этого элемента.

Масштаб меньше 1.0 приводит к отображению элемента в меньшем размере, а масштаб больше 1.0 — в большем размере. Отрицательный масштаб приводит к отображению элемента перевернутым.

Значение по умолчанию — 1.0.

Масштабирование применяется от transformOrigin.

import QtQuick 2.0

Rectangle {
    color: "blue"
    width: 100; height: 100

    Rectangle {
        color: "green"
        width: 25; height: 25
    }

    Rectangle {
        color: "red"
        x: 25; y: 25; width: 50; height: 50
        scale: 1.4
    }
}

См. также Преобразование и Масштабирование.

smooth : логическое

В основном используется в элементах на основе изображений, чтобы определить, нужно ли использовать сглаживание при отрисовке элемента. Сглаживание выполняется с помощью линейной интерполяции, а отсутствие сглаживания — с помощью ближайшего соседа.

В Qt Quick 2.0 это свойство оказывает минимальное влияние на производительность.

По умолчанию это свойство установлено в true.

state : строка

Это свойство хранит имя текущего состояния элемента.

Если элемент находится в своём состоянии по умолчанию, то есть, не было установлено явного состояния, то это свойство содержит пустую строку. Аналогично, вы можете вернуть элемент в исходное состояние, установив это свойство в пустую строку.

См. также Состояния Qt Quick.

states : список<State>

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

Это свойство задается как список объектов State. Например, ниже представлен элемент с состояниями "red_color" и "blue_color":

import QtQuick 2.0

Rectangle {
    id: root
    width: 100; height: 100

    states: [
        State {
            name: "red_color"
            PropertyChanges { target: root; color: "red" }
        },
        State {
            name: "blue_color"
            PropertyChanges { target: root; color: "blue" }
        }
    ]
}

См. Состояния Qt Quick и Анимация и переходы в Qt Quick для получения более подробной информации об использовании состояний и переходов.

См. также переходы.

transform : список<Преобразование>

Это свойство содержит список преобразований, которые нужно применить.

Дополнительная информация см. в Преобразование.

transformOrigin : перечисление

Это свойство хранит точку начала преобразования, вокруг которой применяются масштабирование и поворот.

Доступно девять точек начала преобразования, как показано на изображении ниже. Значение по умолчанию для transform origin — Item.Center.

В данном примере изображение поворачивается вокруг нижнего правого угла.

Image {
    source: "myimage.png"
    transformOrigin: Item.BottomRight
    rotation: 45
}

Чтобы задать произвольную точку начала преобразования, используйте типы преобразований Масштабирование или Поворот со свойством transform.

transitions : список<Переход>

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

Это свойство задается как список объектов Переход. Например:

import QtQuick 2.0

Item {
    transitions: [
        Transition {
            //...
        },
        Transition {
            //...
        }
    ]
}

См. Состояния Qt Quick и Анимация и переходы в Qt Quick для получения более подробной информации об использовании состояний и переходов.

См. также состояния.

visible : логическое

Это свойство указывает, виден ли элемент. По умолчанию это значение true.

Прямая установка этого свойства влияет на значение visible дочерних элементов. При установке в false, значения visible всех дочерних элементов также становятся false. При установке в true, значения visible дочерних элементов возвращаются к true, если они не были явно установлены в false.

(Из-за этого поведения использование свойства visible может не иметь ожидаемого эффекта, если привязка свойства должна реагировать только на явные изменения свойств. В таких случаях может быть лучше использовать свойство opacity.)

Если это свойство установлено в false, элемент больше не будет получать события мыши, но будет продолжать получать события клавиатуры и сохранит фокус клавиатуры, если он был установлен. (В отличие от этого, установка свойства enabled в false останавливает как события мыши, так и клавиатуры, а также снимает фокус с элемента.)

Примечание: Значение этого свойства изменяется только при изменении этого свойства или свойства родителя visible. Оно не изменяется, например, если этот элемент перемещается за пределы экрана или если значение opacity изменяется на 0.

См. также прозрачность и активность.

visibleChildren : список<Элемент>

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

width : вещественное

Определяет положение и размер элемента.

Положение (x,y) относительно родительского элемента.

Item { x: 100; y: 100; width: 100; height: 100 }

x : вещественное

Определяет положение и размер элемента.

Положение (x,y) относительно родительского элемента.

Item { x: 100; y: 100; width: 100; height: 100 }

y : вещественное

Определяет положение и размер элемента.

Положение (x,y) относительно родительского элемента.

Item { x: 100; y: 100; width: 100; height: 100 }

z : вещественное

Устанавливает порядок следования элементов-братьев. По умолчанию порядок следования равен 0.

Элементы с большим значением порядка следования выводятся поверх элементов с меньшим значением порядка. Элементы с одинаковым значением порядка следования выводятся снизу вверх в порядке их появления. Элементы с отрицательным значением порядка следования выводятся под содержимым родительского элемента.

Следующий пример демонстрирует различные эффекты порядка следования.

Item {
    Rectangle {
        color: "red"
        width: 100; height: 100
    }
    Rectangle {
        color: "blue"
        x: 50; y: 50; width: 100; height: 100
    }
}

Item {
    Rectangle {
        z: 1
        color: "red"
        width: 100; height: 100
    }
    Rectangle {
        color: "blue"
        x: 50; y: 50; width: 100; height: 100
    }
}

Item {
    Rectangle {
        color: "red"
        width: 100; height: 100
        Rectangle {
            color: "blue"
            x: 50; y: 50; width: 100; height: 100
        }
    }
}

Item {
    Rectangle {
        color: "red"
        width: 100; height: 100
        Rectangle {
            z: -1
            color: "blue"
            x: 50; y: 50; width: 100; height: 100
        }
    }
}

Документация по методам

childAt(вещественное x, вещественное y)

Возвращает первый видимый дочерний элемент, найденный в точке (x, y) в системе координат данного элемента.

Возвращает null , если такого элемента нет.

логическое contains(точка point)

Возвращает true, если данный элемент содержит point в локальных координатах; в противном случае возвращает false.

forceActiveFocus(Qt::FocusReason reason)

Это перегруженный метод.

Вынуждает активный фокус элемента с заданным reason.

Этот метод устанавливает фокус на элемент и гарантирует, что все родительские объекты FocusScope в иерархии объектов также получат фокус.

Этот метод QML был добавлен в Qt 5.1.

См. также activeFocus и Qt::FocusReason.

forceActiveFocus()

Вынуждает активный фокус на элементе.

Этот метод устанавливает фокус на элемент и гарантирует, что все родительские объекты FocusScope в иерархии объектов также получат фокус.

Причина изменения фокуса будет Qt::OtherFocusReason. Используйте перегруженный метод для указания причины изменения фокуса, чтобы обеспечить более эффективную обработку изменения фокуса.

См. также activeFocus.

логическое grabToImage(callback, targetSize)

Захватывает элемент в изображение в оперативной памяти.

Захват происходит асинхронно, и функция JavaScript callback вызывается при завершении захвата. Функция обратного вызова принимает один аргумент, который является результатом операции захвата; объект ItemGrabResult.

Используйте targetSize для указания размера целевого изображения. По умолчанию результат будет иметь тот же размер, что и элемент.

Если захват не удалось инициировать, функция возвращает false.

Следующий фрагмент кода показывает, как захватить элемент и сохранить результаты в файл.

Rectangle {
    id: source
    width: 100
    height: 100
    gradient: Gradient {
        GradientStop { position: 0; color: "steelblue" }
        GradientStop { position: 1; color: "black" }
    }
}
    // ...
    source.grabToImage(function(result) {
                           result.saveToFile("something.png");
                       });

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

Image {
    id: image
}
    // ...
    source.grabToImage(function(result) {
                           image.source = result.url;
                       },
                       Qt.size(50, 50));

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

объект mapFromItem(Элемент item, вещественное x, вещественное y, вещественное width, вещественное height)

Преобразует точку (x, y) или прямоугольник (x, y, width, height), заданные в системе координат item, в систему координат данного элемента и возвращает соответствующую точку или прямоугольник.

Если item имеет значение null, это преобразует точку или прямоугольник из системы координат корневого элемента QML.

объект mapFromItem(Элемент item, вещественное x, вещественное y)

Преобразует точку (x, y) или прямоугольник (x, y, width, height), заданные в системе координат item, в систему координат данного элемента и возвращает соответствующую точку или прямоугольник.

Если item имеет значение null, это преобразует точку или прямоугольник из системы координат корневого элемента QML.

объект mapToItem(Элемент item, вещественное x, вещественное y, вещественное width, вещественное height)

Преобразует точку (x, y) или прямоугольник (x, y, width, height), заданные в системе координат данного элемента, в систему координат item и возвращает соответствующую точку или прямоугольник.

Если item имеет значение null, это преобразует точку или прямоугольник в систему координат корневого элемента QML.

объект mapToItem(Элемент item, вещественное x, вещественное y)

Преобразует точку (x, y) или прямоугольник (x, y, width, height), заданные в системе координат данного элемента, в систему координат item и возвращает соответствующую точку или прямоугольник.

Если item имеет значение null, это преобразует точку или прямоугольник в систему координат корневого элемента QML.

nextItemInFocusChain(логическое forward)

Возвращает следующий элемент в цепочке фокуса, относительно текущего элемента. Если forward имеет значение true, или не указано, это следующий элемент в прямом направлении. Если forward имеет значение false, это следующий элемент в обратном направлении.

Этот метод QML был добавлен в Qt 5.1.