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

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

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

add : Переход

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

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

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

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

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

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

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

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

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

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

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

move : Переход

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

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

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

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

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

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

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

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

populate : Переход

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

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

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

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

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

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

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

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

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

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

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

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

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

positioningComplete()

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

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

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

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

forceLayout()

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

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

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

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