Многострочное текстовое поле TextEdit и TextArea

Элементы TextEdit и TextArea представляют многострочное текстовое поле. Тип TextArea наследуется от TextEdit, поэтому все, что касается TextEdit, будет справедливо и для TextArea.

Простейшее многострочное поле:

import QtQuick

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    TextEdit {
        anchors.fill: parent
        text: "Hello World"
    }
}

Весь введенный текст хранится в свойстве text:

Стоит отметить, что TextEdit позволяет отображать содержимое с форматированием, как например, код html. Для установки типа отображения содержимого применяется свойство textFormat, которое может принимать следующие значения:

• TextEdit.PlainText: содержимое интерпретируется как простой текст (значение по умолчанию)

• TextEdit.AutoText: тип содержимого определяется автоматически

• TextEdit.RichText: содержимое рассматривается как код HTML 4

• TextEdit.MarkdownText: содержимое интерпретируется как разметка Markdown

Пример использования:

import QtQuick

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    Column {
        TextEdit {
            font.pointSize: 16
            textFormat: TextEdit.AutoText
            text: "<b>Hello</b> <i>World!</i>"
        }
        TextEdit {
            font.pointSize: 16
            textFormat: TextEdit.RichText
            text: "<b>Hello</b> <i>World!</i>"
        }
        TextEdit {
            font.pointSize: 16
            textFormat: TextEdit.PlainText
            text: "<b>Hello</b> <i>World!</i>"
        }
        TextEdit {
            font.pointSize: 16
            textFormat: TextEdit.MarkdownText
            text: "**Hello** *World!*"
        }
    }
}

Рассмотрим остальные основные возможности TextEdit.

Установка шрифта

Для настройки шрифта применяется ряд свойств:

• color: устанавливает цвет текста

• font.bold: устанавливает выделение жирным при значении true

• font.capitalization: устанавливает режим перевода в верхний регистр. Возможные значения:

  • Font.MixedCase: регистр символов не изменяется

  • Font.AllUppercase: весь текст переводится в верхний регистр

  • Font.AllLowercase: весь текст переводится в нижний регистр

  • Font.SmallCaps: текст отображается прописными буквами

  • Font.Capitalize: первая буква каждого слова переводится в верхний регистр

• font.family: устанавливает применяемое семейство шрифтов

• font.italic: устанавливает выделение курсивом при значении true

• font.letterSpacing: устанавливает отступы между буквами

• font.pixelSize: устанавливает высоту шрифта в пикселях

• font.pointSize: устанавливает высоту шрифта в точках

• font.strikeout: устанавливает зачеркивание текста при значении true

• font.styleName: устанавливает имя стиля шрифта

• font.underline: устанавливает подчеркивание текста при значении true

• font.weight: устанавливает вес текста

• font.wordSpacing: устанавливает отступы между словами

Применение некоторых свойств:

import QtQuick

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    TextEdit {
        anchors.fill: parent
        text: "Hello World"
        color: "navy"
        font.family: "Verdana"
        font.pixelSize: 16
        font.capitalization: Font.Capitalize
    }
}

Перенос текста

Для управления переносом текста применяется свойство wrapMode, которое может принимать следующие значения:

• TextEdit.NoWrap: (значение по умолчанию) перенос не будет выполняться, а текст уйдет за границы элемента

• TextEdit.WordWrap: перенос выполняется только по границам слов. Если слово слишком длинное, то текст уйдет за границы элемента.

• TextEdit.WrapAnywhere: перенос выполняется в любой точке строки, даже в середине слова.

• TextEdit.Wrap: перенос по возможности происходит на границе слова. Если это не возможно, то в соответствующем месте строки, даже в середине слова.

Например, возьмем следующий код:

import QtQuick

Window {
    width: 280
    height: 350
    visible: true
    title: "METANIT.COM"

    Column{
        anchors.fill: parent
        spacing: 8
        Text{
            text: "TextEdit.WordWrap"
            font.pixelSize: 16
        }
        TextEdit{
            text: "После одного из заседаний мирового съезда судьи собрались в совещательной комнате, чтобы снять свои мундиры, минутку отдохнуть и ехать домой обедать."
            wrapMode: TextEdit.WordWrap
            width: parent.width
        }
        Text{
            text: "TextEdit.WrapAnywhere"
            font.pixelSize: 16
        }
        TextEdit{
            text: "После одного из заседаний мирового съезда судьи собрались в совещательной комнате, чтобы снять свои мундиры, минутку отдохнуть и ехать домой обедать."
            wrapMode: TextEdit.WrapAnywhere
            width: parent.width
        }
        Text{
            text: "TextEdit.Wrap"
            font.pixelSize: 16
        }
        TextEdit{
            text: "После одного из заседаний мирового съезда судьи собрались в совещательной комнате, чтобы снять свои мундиры, минутку отдохнуть и ехать домой обедать."
            wrapMode: TextEdit.Wrap
            width: parent.width
        }
    }
}

Для демонстрации здесь три элемента TextEdit содержат один и тот же текст, но с разным значением wrapMode:

Выделение текста

Для управления выделением текста элемент TextEdit предоставляет ряд свойств:

• Свойство mouseSelectionMode указывает, как будет выделяться текст, и для этого может принимать одно из двух значений:

  • TextEdit.SelectCharacters: можно выделять отдельные символы (значение по умолчанию)

  • TextEdit.SelectWords: можно выделять только по словам

  Стоит отметить, что это свойство применяется, если только другое свойство - selectByMouse равно true.

• Свойство persistentSelection указывает, должно ли текстовое поле сохранять выделение текста после потери фокуса. По умолчанию значение false (выделение текста сбрасывается)

• Свойство selectByMouse указывает, можно ли выделять мышью текст. Текст выделяется при значении true, которое является значением по умолчанию

• Свойство selectByKeyboard указывает, можно ли выделять текст с помощью клавиш клавиатуры. Текст выделяется при значении true, которое является значением по умолчанию

• Свойство selectedText возвращает выделенный текст

• Свойство selectedTextColor устанавливает цвет выделенного текста

• Свойство selectionColor устанавливает цвет фона выделенного текста

Применение некоторых свойств:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    Column{
        anchors.fill: parent
        padding: 10
        spacing: 10
        TextEdit {
            id: input
            width: 200
            font.family: "Verdana"
            font.pixelSize: 16
            persistentSelection: true   // сохраняем выделение после потери фокуса
            selectionColor: "red"       // цвет фона выделения
            selectedTextColor: "yellow" // цвет выделенного текста
        }
        Button{
            width: 80
            height: 25
            text: "Click"
            onClicked: {
                output.text = input.selectedText
            }
        }
        Text{
            id: output
        }
    }
}

В данном случае текст выделяется желтым цветом, а его фон - красным. При потере фокуса сохраняем выделение, а при нажатии на кнопку отображаем выделение в элементе Text:

Установка внешних отступов и выравнивания

Ряд свойств позволяют задать отступы:

• textMargin: устанавливает отступ вокруг текста от границ TextEdit

• padding: внутренний отступ от четырех сторон

• leftPadding: внутренний отступ слева

• topPadding: внутренний отступ сверху

• bottomPadding: внутренний отступ снизу

• rightPadding: внутренний отступ справа

Свойство horizontalAlignment устанавливает выравнивание текста по горизонтали и может принимать следующие значения:

• TextEdit.AlignLeft: выравнивание по левому краю (по умолчанию)

• TextEdit.AlignRight: выравнивание по правому краю с неровными краями слева.

• TextEdit.AlignHCenter: выравнивание по центру

• TextEdit.AlignJustify: равномерное распределение текста по всей ширине.

Свойство verticalAlignment устанавливает выравнивание текста по горизонтали и может принимать следующие значения:

• TextEdit.AlignTop: выравнивание по верху (по умолчанию).

• TextEdit.AlignBottom: выравнивание по нижней стороне

• TextEdit.AlignVCenter: выравнивание по центру

Применение некоторых свойств:

import QtQuick

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    TextEdit{
        anchors.fill: parent
        textMargin: 10
        horizontalAlignment: TextEdit.AlignJustify
        wrapMode: TextEdit.WrapAnywhere
        font.family: "Verdana"
        font.pixelSize: 16
        text: "После одного из заседаний мирового съезда судьи собрались в совещательной комнате, чтобы снять свои мундиры, минутку отдохнуть и ехать домой обедать."
    }
}

Методы TextEdit

Для элемента TextEdit доступен ряд методов, которые позволяют управлять содержимым:

• append(string text): добавляет текст в текстовое поле

• clear(): очищает текстовое поле

• copy(): копирует выделенный текст в буфер обмена

• cut(): вырезает выделенный текст

• deselect(): отменяет выделение

• string getText(int start, int end): получает текст между определенными индексами

• insert(int position, string text): вставляет текст на определенную позицию

• paste(): вставляет текст из буфера обмена

• redo(): восстанавливает последнее отмененное действие

• remove(int start, int end): удаляет текст между индексами start и end

• select(int start, int end): выделяет текст между индексами start и end

• selectAll(): выделяет весь текст

• selectWord(): выделяет слово, ближайшее к курсору

• undo(): отменяет последнее действие

Например, определим кнопку, которая удаляет введенный текст:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    Column{
        anchors.fill: parent
        padding: 10
        spacing: 10
        TextEdit {
            id: input
            width: parent.width
            height: 150
            font.family: "Verdana"
            font.pixelSize: 16
        }
        Button{
            width: 80
            height: 25
            text: "Clear"
            onClicked: { input.clear() }    // удаляем текст
        }
    }
}

TextArea

Тип TextArea добавляет к унаследованному функционалу ряд свойств. Отмечу основные:

• background: фон в виде объекта Item

• placeholderText: текст-приглашение к вводу

• leftInset: отступ слева

• topInset: отступ сверху

• bottomInset: отступ снизу

• rightInset: отступ справа

Например, установим темный фон элемента:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    TextArea{
        anchors.fill: parent
        font.family: "Verdana"
        color: "#44bd32"
        text: "Hello World"
        font.pixelSize: 16
        background: Rectangle{
            color: "#2f3640"
        }
    }
}