Элемент Text представляет метку для вывода текста, в том числе с форматированием. Для настройки отображения данный элемент предоставляет множество свойств, главным образом, для управдения шрифтом. Рассмотрим только основные:
antialiasing: представляет тип bool
и устанавливает сглаживание (сглаживание применяется, если равно true
)
bottomPadding: представляет тип real
и устанавливает отступ текста от нижней границы элемента
color: представляет тип color
и устанавливает цвет текста элемента
contentHeight: представляет тип real
и возвращает высоту текста
contentWidth: представляет тип real
и возвращает ширину текста
elide: устанавливает, как текст будет вписываться в элемент по ширине
font.bold: представляет тип bool
и устанавливает, будет ли текст выделяться жирным
font.capitalization: устанавливает, будет ли текст содержать заглавные буквы
font.family: представляет тип string
и устанавливает используемое семейство шрифтов
font.italic: представляет тип bool
и устанавливает курсив текста
font.letterSpacing: представляет тип real
и устанавливает пространство между символами
font.pixelSize: представляет тип int
и устанавливает размер шрифта в пикселях
font.pointSize: представляет тип real
и устанавливает размер шрифта в точках
font.strikeout: представляет тип bool
и устанавливает, будет ли текст зачеркнут
font.styleName: представляет тип string
и устанавливает имя стиля шрифта
font.underline: представляет тип bool
и устанавливает, будет ли текст подчеркнут
font.overline: представляет тип bool
и устанавливает, будет ли текст надчеркнут
font.weight: представляет тип int
и устанавливает вес шрифта
font.wordSpacing: представляет тип real
и устанавливает пространство между словами
fontInfo.bold: возвращает значение bool
, которое указывает, выделен ли текст жирным
fontInfo.family: возвращает используемое семейство шрифтов в виде строки
fontInfo.italic: возвращает значение bool
, которое указывает, применяется ли для текста курсив
fontInfo.pixelSize: возвращает размер шрифта в пикселях в виде строки
fontInfo.pointSize: возвращает размер шрифта в точках в виде числа
fontInfo.styleName: возвращает имя стиля текста в виде строки
fontInfo.weight: возвращает вес шрифта в виде числа
fontSizeMode: устанавливает режим размера шрифта
horizontalAlignment: устанавливает выравнивание по горизонтали
hoveredLink: представляет тип string
и устанавливает текст, который появляется при наведении на ссылку в элементе Text
leftPadding: представляет тип real
и устанавливает отступ текста от левой границы элемента
lineCount: возвращает количество строк
lineHeight: представляет тип real
и устанавливает высоту строки
lineHeightMode: устанавливает режим высоты строки
linkColor: представляет тип color
и устанавливает цвет ссылки
maximumLineCount: представляет тип int
и устанавливает максимальное количество строк
minimumPixelSize: представляет тип int
и устанавливает минимальный размер шрифта в пикселях
minimumPointSize: представляет тип int
и устанавливает минимальный размер шрифта в точках
padding: представляет тип real
и устанавливает отступы содержимого от границ элемента
rightPadding: представляет тип real
и устанавливает отступ текста от правой границы элемента
style: устанавливает стиль шрифта
styleColor: представляет тип color
и устанавливает дополнительный цвет элемента, который применяется для подчеркивания или для создания тени текста
text: представляет тип string
и устанавливает отображаемый текст
textFormat: устанавливает параметры форматирования и может принимать следуюшие значения:
Text.AutoText
: значение по умолчанию
Text.PlainText
: все теги стилизации рассматриваются как простой текст
Text.StyledText
: стилизованный текст по аналогии с HTML 3.2
Text.RichText
: текст с форматированием в соответствии с HTML 4
Text.MarkdownText
: текст, который допускает применение разметки Markdown
topPadding: представляет тип real
и устанавливает отступ содержимого от верхней границы элемента
verticalAlignment: устанавливает выравнивание содержимого по вертикали
wrapMode: устанавливает режим переноса текста.
Простейший элемент Text:
import QtQuick Window { width: 250 height: 150 visible: true title: "METANIT.COM" Text{ anchors.centerIn: parent text: "Hello METANIT.COM" } }
Стилизуем текст:
import QtQuick Window { width: 250 height: 150 visible: true title: "METANIT.COM" Text{ anchors.centerIn: parent text: "Hello METANIT.COM" font.family: "Verdana" // семейство шрифтов font.pixelSize: 18 // высота шрифта color: "#2980b9" // цвет текста } }
Свойство textFormat позволяет установить рендеринг текста как html-содержимого. Для этого свойству передаются значения
Text.StyledText
и Text.RichText
:
import QtQuick Window { width: 250 height: 150 visible: true title: "METANIT.COM" Text{ text: " <h1>Hello METANIT.COM</h1> <h2>Hello World</h2> <h3>Hello Qt</h3> <p>Основной текст раздела</p> " font.family: "Arial" textFormat: Text.RichText } }
Значение Text.MarkdownText
позволяет использовать текст в формате Markdown:
import QtQuick Window { width: 250 height: 150 visible: true title: "METANIT.COM" Text{ text: " # Hello METANIT.COM ## Hello World ### Hello Qt Основной текст раздела" font.family: "Arial" textFormat: Text.MarkdownText } }
С помощью свойства wrapMode можно установить режим переноса текста. Это свойство может принимать следующие значения:
Text.NoWrap
: (значение по умолчанию) перенос не будет выполняться. Если текст содержит недостаточное количество новых строк, то contentWidth
превысит установленную ширину.
Text.WordWrap
: перенос выполняется только по границам слов. Если слово слишком длинное, contentWidth превысит установленную ширину.
Text.WrapAnywhere
: перенос выполняется в любой точке строки, даже если он находится в середине слова.
Text.Wrap
: по возможности перенос происходит на границе слова; в противном случае это произойдет в соответствующем месте строки, даже в середине слова.
Важно отметить, что переносы устанавливаются, если явным образом задана ширина элемента. Например, возьмем следующий код:
import QtQuick Window { width: 300 height: 250 visible: true title: "METANIT.COM" Column{ anchors.fill: parent Text{ text: "Text.WordWrap" font.pixelSize: 16 } Text{ text: "После одного из заседаний мирового съезда судьи собрались в совещательной комнате, чтобы снять свои мундиры, минутку отдохнуть и ехать домой обедать." wrapMode: Text.WordWrap width: parent.width } Text{ text: "Text.WrapAnywhere" font.pixelSize: 16 topPadding: 8 } Text{ text: "После одного из заседаний мирового съезда судьи собрались в совещательной комнате, чтобы снять свои мундиры, минутку отдохнуть и ехать домой обедать." wrapMode: Text.WrapAnywhere width: parent.width } Text{ text: "Text.Wrap" font.pixelSize: 16 topPadding: 8 } Text{ text: "После одного из заседаний мирового съезда судьи собрались в совещательной комнате, чтобы снять свои мундиры, минутку отдохнуть и ехать домой обедать." wrapMode: Text.Wrap width: parent.width } } }
Для демонстрации здесь три элемента Text содержат один и тот же текст, но с разным значением wrapMode. Но при этом для каждого из этих трех элементов Text задается ширина:
width: parent.width
Свойство elide устанавливает, как текст будет вписываться в элемент по ширине. В частности, оно может установить многоточие вместо невмещающегося по ширине текста. Это свойство может принимать следующие значения:
Text.ElideNone
(значение по умолчанию - текст не сокращается)
Text.ElideLeft
(текст сокращается слева)
Text.ElideMiddle
(текст сокращается в центре)
Text.ElideRight
(текст сокращается справа)
Пример применения:
import QtQuick Window { width: 300 height: 250 visible: true title: "METANIT.COM" Column{ anchors.fill: parent Text{ text: "Text.ElideLeft" font.pixelSize: 15 } Text{ text: "После одного из заседаний мирового съезда судьи собрались в совещательной комнате, чтобы снять свои мундиры, минутку отдохнуть и ехать домой обедать." elide: Text.ElideLeft width: parent.width } Text{ text: "Text.ElideMiddle" font.pixelSize: 15 topPadding: 8 } Text{ text: "После одного из заседаний мирового съезда судьи собрались в совещательной комнате, чтобы снять свои мундиры, минутку отдохнуть и ехать домой обедать." elide: Text.ElideMiddle width: parent.width } Text{ text: "Text.ElideRight" font.pixelSize: 15 topPadding: 8 } Text{ text: "После одного из заседаний мирового съезда судьи собрались в совещательной комнате, чтобы снять свои мундиры, минутку отдохнуть и ехать домой обедать." elide: Text.ElideRight width: parent.width } } }
Но здесь опять же для элементов устанавливается ширина.
Если текст содержит символы перевода на новую строку ("\n"), то такой текст располагается на нескольких строках. Для этого в коде можно разместить различные части текста на разных строках:
import QtQuick Window { width: 280 height: 250 visible: true title: "METANIT.COM" Text{ anchors.fill: parent text: "После одного из заседаний мирового съезда судьи собрались в совещательной комнате, чтобы снять свои мундиры, минутку отдохнуть и ехать домой обедать." } }
Можно явным образом использовать символ перевода строки "\n", чтобы указать, где будет переноситься текст:
import QtQuick Window { width: 280 height: 250 visible: true title: "METANIT.COM" Text{ anchors.fill: parent text:"После одного из заседаний мирового съезда судьи собрались в совещательной комнате, \nчтобы снять свои мундиры, минутку отдохнуть и ехать домой обедать." } }
Установка переносов с помощью свойства wrapMode также фактически создает многострочный текст.
С помощью свойства maximumLineCount можно установить максимальное количество строк. По умолчанию это очень большое число. Но если мы его ограничим определенным числом, то текст, который расположен на остальных строках, не будет отображаться. Например:
import QtQuick Window { width: 280 height: 250 visible: true title: "METANIT.COM" Text{ anchors.fill: parent wrapMode: Text.Wrap maximumLineCount: 2 text: "После одного из заседаний мирового съезда судьи собрались в совещательной комнате, чтобы снять свои мундиры, минутку отдохнуть и ехать домой обедать." } }
Здесь в Text будет отображаться не более 2 строк, даже если текст занимает большее количество строк.
Свойство lineHeight позволяет установить высоту строки. Оно может принимать значение в пикселях или в виде множителя и зависит от свойства lineHeightMode, которое может принимать одно из двух значений:
Text.ProportionalHeight
: для установки высоты строки применяется множитель. Это значение по умолчанию, которое равно 1.0. Например, чтобы увеличить высоту строку в 2 раза,
то для lineHeight
надо установить значение 2.0
Text.FixedHeight
: значение устанавливается в пикселях
Например, увеличим высоту строку в полтора раза:
import QtQuick Window { width: 280 height: 250 visible: true title: "METANIT.COM" Text{ anchors.fill: parent wrapMode: Text.Wrap lineHeight: 1.5 text: "После одного из заседаний мирового съезда судьи собрались в совещательной комнате, чтобы снять свои мундиры, минутку отдохнуть и ехать домой обедать." } }
Пример установки строки в пикселях:
import QtQuick Window { width: 280 height: 250 visible: true title: "METANIT.COM" Text{ anchors.fill: parent wrapMode: Text.Wrap lineHeightMode: Text.FixedHeight lineHeight: 20 // высота - 20 пикселей text: "После одного из заседаний мирового съезда судьи собрались в совещательной комнате, чтобы снять свои мундиры, минутку отдохнуть и ехать домой обедать." } }
Для установки выравнивания по горизонтали применяется свойство horizontalAlignment, которое может принимать следующие значения:
Text.AlignLeft
: выравнивание по левому краю
Text.AlignRight
: выравнивание по правому краю
Text.AlignHCenter
: выравнивание по центру
Text.AlignJustify
: равномерно растяжение по всей ширине
Для установки выравнивания по вертикали применяется свойство verticalAlignment, которое может принимать следующие значения:
Text.AlignTop
: выравнивание по верхнему краю
Text.AlignBottom
: выравнивание по нижнему краю
Text.AlignVCenter
: выравнивание по центру
Пример выравнивания по горизонтали:
import QtQuick Window { width: 280 height: 250 visible: true title: "METANIT.COM" Column{ anchors.fill: parent Text{ horizontalAlignment: Text.AlignLeft text: "horizontalAlignment: Text.AlignLeft" anchors{ right: parent.right; left: parent.left} } Text{ horizontalAlignment: Text.AlignRight text: "horizontalAlignment: Text.AlignRight" anchors{ right: parent.right; left: parent.left} } Text{ horizontalAlignment: Text.AlignHCenter text: "horizontalAlignment: Text.AlignHCenter" anchors{ right: parent.right; left: parent.left} } Text{ horizontalAlignment: Text.AlignJustify text: "horizontalAlignment: Text.AlignJustify" anchors{ right: parent.right; left: parent.left} } } }