Основные элементы QML

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

Сейчас мы сосредоточимся на основных визуальных элементах, таких как Item, Rectangle, Text, Image и MouseArea. Однако с помощью модуля Qt Quick Controls 2 можно создавать пользовательские интерфейсы, построенные из стандартных компонентов платформы, таких как кнопки, метки и ползунки.

Элемент Item

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

• Геометрия – x и y для определения положения сверху cлева , width и height для размеров элемента и z для порядка наложения, чтобы поднимать или опускать элементы от их естественного порядка.
• Обработка макета – якоря anchors (слева, справа, сверху, снизу, по центру по вертикали и по горизонтали) для позиционирования элементов относительно других элементов с необязательными отступами margins.
• Обработка клавиатуры – прикрепленные свойства Key и KeyNavigation для управления обработкой нажатий клавиш и свойство focus, чтобы, в первую очередь, включить обработку клавиатуры.
• Преобразование – преобразования масштабирования scale и поворота rotate и общее списочное свойство transform для преобразования x, y, z, а также точка transformOrigin.
• Визуализация – opacity для управления прозрачностью, visible для отображения/скрытия элементов, clip для ограничения операций рисования по границе элемента и smooth для повышения качества рендеринга.
• Определение состояния – списочное свойство states с поддерживаемым списком состояний, свойство текущего состояния state и списочное свойство переходов transitions для анимации изменений состояния.

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

Элемент Rectangle

Rectangle расширяет Item и добавляет к нему цвет заливки. Кроме того, он поддерживает границы, определяемые свойствами border.color и border.width. Для создания прямоугольников со скругленными углами вы можете использовать свойство radius.

Rectangle {
    id: rect1
    x: 12; y: 12
    width: 76; height: 96
    color: "lightsteelblue"
}
Rectangle {
    id: rect2
    x: 112; y: 12
    width: 76; height: 96
    border.color: "lightsteelblue"
    border.width: 4
    radius: 8
}

color: Qt.rgba( Math.random(), Math.random(), Math.random(), 1 )

Помимо цвета заливки и границы, прямоугольник также поддерживает пользовательские градиенты:

Rectangle {
    id: rect1
    x: 12; y: 12
    width: 176; height: 96
    gradient: Gradient {
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 1.0; color: "slategray" }
    }
    border.color: "slategray"
}

Градиент определяется последовательностью остановок градиента. Каждая остановка имеет позицию и цвет. Позиция отмечает положение по оси Y (0 = вверху, 1 = внизу). Цвет GradientStop отмечает цвет в этой позиции.

Элемент Text

Для отображения текста можно использовать элемент Text. Наиболее заметным его свойством является свойство text типа string. Элемент вычисляет свою начальную ширину и высоту на основе заданного текста и используемого шрифта. На шрифт можно повлиять с помощью группы свойств шрифта (например, font.family, font.pixelSize, …). Чтобы изменить цвет текста, просто используйте свойство color.

Text {
    text: "The quick brown fox"
    color: "#303030"
    font.family: "Ubuntu"
    font.pixelSize: 28
}

Текст можно выровнять по каждой стороне и по центру с помощью свойств horizontalAlignment и verticalAlignment. Для дальнейшего улучшения рендеринга текста вы можете использовать свойства style и styleColor, которые позволяют вам отображать текст в контурном, приподнятом и вдавленном режиме.

Для более длинного текста часто требуется определить позицию разрыва, например, A very … long text, этого можно добиться с помощью свойства elide. Свойство elide позволяет вам установить положение многоточия слева, справа или в середине вашего текста.

Если вы не хотите, чтобы «…» режима elide появлялось, и всё же хотите видеть полный текст, вы также можете обернуть текст, используя свойство wrapMode (работает только тогда, когда ширина задана явно):

Text {
    width: 40; height: 120
    text: 'A very long text'
    // '...' должно появиться посередине
    elide: Text.ElideMiddle
    // стиль красного утопленного текста
    style: Text.Sunken
    styleColor: '#FF4444'
    // выравниваем текст по верхнему краю
    verticalAlignment: Text.AlignTop
    // имеет смысл только тогда, когда нет режима elide
    // wrapMode: Text.WordWrap
}

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

Элемент Image

Элемент Image может отображать изображения в различных форматах (например, PNG, JPG, GIF, BMP, WEBP). Полный список поддерживаемых форматов изображений смотрите в документации Qt. Помимо свойства source для предоставления URL-адреса изображения, он содержит свойство fillMode, которое управляет поведением изменения размера.

Image {
    x: 12; y: 12
    // width: 72
    // height: 72
    source: "assets/triangle_red.png"
}
Image {
    x: 12+64+12; y: 12
    // width: 72
    height: 72/2
    source: "assets/triangle_red.png"
    fillMode: Image.PreserveAspectCrop
    clip: true
}

Элемент MouseArea

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

Rectangle {
    id: rect1
    x: 12; y: 12
    width: 76; height: 96
    color: "lightsteelblue"
    MouseArea {
        id: area
        width: parent.width
        height: parent.height
        onClicked: rect2.visible = !rect2.visible
    }
}

Rectangle {
    id: rect2
    x: 112; y: 12
    width: 76; height: 96
    border.color: "lightsteelblue"
    border.width: 4
    radius: 8
}

Теги