Тип QML Column

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

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

Свойства

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

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

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 зеленого прямоугольника переключается. По мере появления и исчезновения синего прямоугольника происходит перемещение внутри Column, и переход move автоматически применяется к синему прямоугольнику:

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

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

add : Transition

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

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

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

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

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

bottomPadding : вещественное число

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

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

leftPadding : вещественное число

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

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

move : Transition

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

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

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

Примечание: В Qt Quick 1 этот переход применялся ко всем элементам, которые были частью позиционера во время его создания. С Qt Quick 2 и далее позиционеры применяют переход populate к этим элементам вместо этого.

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

padding : вещественное число

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

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

populate : Transition

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

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

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

rightPadding : вещественное число

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

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

spacing : вещественное число

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

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

topPadding : вещественное число

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

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