Тип QML Column

Располагает своих дочерние элементы в столбце. Подробнее...

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

Свойства

• add : Переход
• bottomPadding : вещественный
• leftPadding : вещественный
• move : Переход
• padding : вещественный
• populate : Переход
• rightPadding : вещественный
• spacing : вещественный
• topPadding : вещественный

Сигналы

• positioningComplete()

Методы

• forceLayout()

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

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

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

Column {
    spacing: 2

    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }
}

Column автоматически размещает эти элементы в вертикальном формате, как показано ниже:

Если элемент внутри Column не виден или имеет ширину или высоту 0, элемент не будет выложен и не будет виден в столбце. Кроме того, поскольку Column автоматически располагает свои дочерние элементы вертикально, дочерний элемент внутри Column не должен устанавливать своё положение по оси y или вертикально привязываться с помощью якорей top, bottom, anchors.verticalCenter, fill или centerIn. Если вам необходимо выполнить эти действия, рассмотрите возможность размещения элементов без использования Column.

Обратите внимание, что элементы в Column могут использовать свойство Positioner, чтобы получить дополнительную информацию о своем положении в Column.

Дополнительную информацию о работе с Column и другими типами позиционеров см. в разделе Позиционеры элементов.

Использование переходов

Column анимирует элементы с помощью определённых переходов при добавлении элементов в Column или перемещении их внутри него.

Например, в следующем Column свойство move задано для определённого перехода:

Column {
    spacing: 2

    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { id: greenRect; color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }

    move: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }

    focus: true
    Keys.onSpacePressed: greenRect.visible = !greenRect.visible
}

Когда нажимается клавиша пробела, значение visible зелёного прямоугольника Rectangle изменяется. При появлении и исчезновении синего прямоугольника Rectangle перемещается внутри Column, и переход move автоматически применяется к синему прямоугольнику Rectangle:

См. также Row, Grid, Flow, Positioner, ColumnLayout и Примеры Qt Quick — Позиционеры.

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

Эти свойства содержат отступы вокруг содержимого.

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

add : Переход

Это свойство содержит переход, который необходимо выполнить для элементов, добавляемых в этот позиционер. Для позиционера это относится к:

• Элементам, которые создаются или перепривязываются в качестве дочерних элементов позиционера после создания позиционера
• Дочерним элементам, которые изменяют свойство Item::visible с false на true и, следовательно, становятся видимыми

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

Примечание: Этот переход не применяется к элементам, которые уже являются частью позиционера на момент его создания. В этом случае применяется переход populate.

См. также populate, ViewTransition и Примеры Qt Quick — Позиционеры.

move : Переход

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

• Дочерним элементам, которые перемещаются, когда они смещаются из-за добавления, удаления или перестановки других элементов в позиционере
• Дочерним элементам, которые перемещаются из-за изменения размеров других элементов в позиционере

Переход может использовать свойство ViewTransition, чтобы получить больше информации об элементе, который перемещается. Однако обратите внимание, что для этого перехода перемещения списки ViewTransition.targetIndexes и ViewTransition.targetItems устанавливаются только тогда, когда этот переход запускается добавлением других элементов в позиционер; в других случаях эти списки будут пустыми. Дополнительную информацию и примеры использования этих переходов можно найти в документации по ViewTransition.

См. также add, populate, ViewTransition и Примеры Qt Quick — Позиционеры.

populate : Переход

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

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

См. также add, ViewTransition и Примеры Qt Quick — Позиционеры.

spacing : вещественный

Отступ — это количество пикселей, оставленных пустыми между соседними элементами. Значение по умолчанию — 0.

См. также Grid::spacing.

Документация по сигналам

[since 5.9] positioningComplete()

Этот сигнал испускается, когда позиционирование завершено.

Примечание: Соответствующий обработчик — onPositioningComplete.

Этот сигнал был введён в Qt 5.9.

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

[since 5.9] forceLayout()

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

Этот метод заставляет Column немедленно отреагировать на все ожидающие изменения в дочерних элементах.

Примечание: методы, как правило, следует вызывать только после завершения компонента.

Этот метод был введён в Qt 5.9.