Text

Элемент 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"            // цвет текста

    }
}

Форматирование в стиле html

Свойство 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}
        }
    }
}