Тип QML Column

Размещает своих потомков в колонке. Подробнее...

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

Свойства

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

Сигналы

• positioningComplete()

Методы

• forceLayout()

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

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 }
}

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

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

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

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

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

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

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

Эта документация была добавлена в 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.

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

positioningComplete()

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

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

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

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

forceLayout()

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

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

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

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