Windows forms text box

Case description

• QLineEdit is a control used to enter or edit a single line of text.

• It also has undo redo, cut, copy and drag functions.

• The example shows a QLineEdit and a QLabel.
  The text we input in QLineEdit will be displayed in QLabel control in real time.

demo.go

package main

import (
	"github.com/therecipe/qt/core"
	"github.com/therecipe/qt/gui"
	"github.com/therecipe/qt/widgets"
	"os"
)

/*
QLineEdit is a control used to enter or edit a single line of text.
 It also has undo redo, cut, copy and drag functions.

 The example shows a QLineEdit and a QLabel.
 The text we enter in QLineEdit will be displayed in QLabel control in real time.
*/

func InitUi() *widgets.QMainWindow {
	// Create window
	app := widgets.NewQMainWindow(nil, 0)

	// Set the title of the window
	app.SetWindowTitle("Qt Tutorial")

	// Set the position and size of the window
	app.SetGeometry2(300, 300, 300, 220)

	// Set the icon of the window, refer to the web.png picture in the current directory
	app.SetWindowIcon(gui.NewQIcon5("images/app.ico"))

	// Layout window component carrier
	widget := widgets.NewQWidget(app, core.Qt__Widget)
	//widget.SetGeometry(core.NewQRect4(300, 300, 300, 220))
	widget.SetGeometry2(0, 0, 300, 220)
	app.SetCentralWidget(widget)
	// Status Bar
	app.StatusBar()

	// label
	lbl := widgets.NewQLabel(widget, 0)
	lbl.Move2(60, 40)

	// text box
	qle := widgets.NewQLineEdit(widget)
	qle.Move2(60, 100)
	// When the content of the text box changes, the method will be called
	qle.ConnectTextChanged(func(text string) {
		//In the method, we set the text of the QLabel control as the input content.
		lbl.SetText(text)
		//Adjust the size of the QLabel control to the length of the text by calling the adjustSize() method.
		lbl.AdjustSize()
	})

	return app
}

func main() {
	// Create an application object
	// sys.argv parameter is a list, input parameters from the command line
	widgets.NewQApplication(len(os.Args), os.Args)

	// Initialize the window
	app := InitUi()

	// display component
	app.Show()

	// Ensure that the application exits cleanly
	widgets.QApplication_Exec()
}

Последнее обновление: 23.12.2023

К одним из наиболее используемых элементов относятся текстовые поля ввода. Для создания однострочного текстового поля применяется элемент TextField из
пакета «QtQuick.Controls». Простейшее текстовое поле:

import QtQuick
import QtQuick.Controls

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

    Column{
        anchors.fill: parent
        padding: 10
        TextField {
            width: 160
            height: 25
            text: "Hello World"
        }
    }
}

Основную часть функционала, связанного с вводом текста, элемент TextField наследует от типа TextInput. Рассмотрим основные
возможности TextField.

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

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

• 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
import QtQuick.Controls

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

    Column{
        anchors.fill: parent
        padding: 10
        TextField {
            width: 200
            height: 25
            color: "navy"
            text: "Hello world"
            font.family: "Verdana"
            font.pixelSize: 16
            font.capitalization: Font.Capitalize
        }
    }
}

Получение введенного текста

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

• text: собственно введенный текст

• placeholderText: приглашение к вводу, которое отображается при отсутствии текста

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

import QtQuick
import QtQuick.Controls

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

    Column{
        anchors.fill: parent
        padding: 10
        spacing: 10
        TextField {
            id: input
            width: 200
            height: 25
            placeholderText: "Введите текст"
            font.family: "Verdana"
            font.pixelSize: 16
        }
        Button{
            width: 80
            height: 25
            text: "Click"
            onClicked: {
                output.text = input.text
            }
        }
        Text{
            id: output
        }
    }
}

Здесь по нажатию на кнопку текст, введенный в текстовое поле ввода, выводится в элементе Text. Для обращения к этим элементам им назначены идентиикаторы с помощью свойства id

Картинка с сайта: metanit.com

Режим ввода текста

Свойство echoMode позволяет задать режим ввода текста и обычно применяется при вводе пароля или каких-то чуствительных данных, которые нажо визуально скрыть при вводе.
Это свойство может принимать следующие значения:

• TextInput.Normal: отображает текст как он введен в текстовое поле

• TextInput.Password: отображает символ маски, который скрывает введенный символ (символ маски зависит от платформы)

• TextInput.NoEcho: ничего не делает

• TextInput.PasswordEchoOnEdit: во время ввода отображает символы как есть, а после завершения ввода скрывает с помощью маски аналогично TextInput.Password

Причем через свойство text мы также сможем получить введенный текст:

import QtQuick
import QtQuick.Controls

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

    Column{
        anchors.fill: parent
        padding: 10
        spacing: 10
        TextField {
            id: input
            width: 200
            height: 25
            placeholderText: "Введите текст"
            echoMode: TextInput.Password  // применяем маску при вводе
            font.family: "Verdana"
            font.pixelSize: 16
        }
        Button{
            width: 80
            height: 25
            text: "Click"
            onClicked: {
                output.text = input.text
            }
        }
        Text{
            id: output
        }
    }
}

Дополнительно с помощью свойства passwordCharacter можно задать символ маски, если, к примеру, стандартные точки не устраивают. Например, зададим символ «!»

TextField {
    id: input
    width: 200
    height: 25
    placeholderText: "Введите пароль"
    echoMode: TextInput.Password  // применяем маску при вводе
    passwordCharacter: "!"      // символ маски
    font.family: "Verdana"
    font.pixelSize: 16
}

Определение маски ввода

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

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

import QtQuick
import QtQuick.Controls

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

    Column{
        anchors.fill: parent
        padding: 10
        spacing: 10
        TextField {
            id: input
            width: 200
            height: 25
            placeholderText: "Введите номер телефона"
            font.family: "Verdana"
            font.pixelSize: 16

            inputMask: "+9(999)-999-9999"
        }
        Button{
            width: 80
            height: 25
            text: "Click"
            onClicked: {
                output.text = input.text
            }
        }
        Text{
            id: output
        }
    }
}

В данном случае применяется маска «+9(999)-999-9999», то есть нам надо обязательно ввести 11 цифр (символ «9» подразумевает обязательный ввод цифрового символа). Для больше понимания я определил вывод введенного текста в элемент Text по нажатию кнопки.
В частности, мы можем увидеть, что в него также попадают дополнительные символы маски, как символы «+», «(«, «)» и «-» в примере выше:

Картинка с сайта: metanit.com

Если символы не являются цифровыми, то их нельзя будет ввести.

Если мы хотим, чтобы номер телефона начинался с какой-то конкретной цифры, то ее можно указать:

inputMask:"+7(999)-999-9999"

В данном случае номер всегда будет начинаться с цифры 7. Но что, если мы хотим, чтобы первая цифра телефона всегда представляла цифру 9? Поскольку «9» — это специальный символ, то его надо экранировать:

inputMask:"+\9(999)-999-9999"

Аналогично можно определять и другие маски с помощью других символов.

Максимальное количество символов

Свойство maximumLength устанавливает максимальное количество символов, которые можно ввести в поле. По умолчанию оно равно 32767. Если текст большей длины,
то он усекается

TextField {
    width: 200
    height: 25
    text: "Hello World"
    font.family: "Verdana"
    font.pixelSize: 16
    maximumLength: 5    // не более 5 символов
}

Реально введенное количество символов (включая символы маски) можно получить с помощью свойства length

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

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

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

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

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

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

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

• Свойство selectByMouse указывает, можно ли выделять мышью текст. Текст выделяется при значении 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
        TextField {
            id: input
            width: 200
            height: 25
            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:

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

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

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

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

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

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

Применение:

import QtQuick
import QtQuick.Controls

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

    Column{
        anchors.fill: parent

        TextField {
            width: parent.width
            font.family: "Verdana"
            font.pixelSize: 16
            // отступы от краев контейнера
            leftInset:10
            topInset: 10
            bottomInset:10
            rightInset: 8
        }
    }
}

События ввода

При вводе текста возникает ряд событий-сигналов. Прежде всего:

• pressed: возникает при нажатии на текстовое поле и обрабатывается обработчиком onPressed

• released: возникает при уходе с места ввода (на другую позицию в текстовом поле или на ждругой элемент) и обрабатывается обработчиком onReleased

• textEdited: возникает при каждом изменении введенных символов в поле за исключением программного изменения текста и обрабатывается обработчиком onTextEdited

• accepted: возникает при нажатии на Enter или кнопку возврата и обрабатывается обработчиком onAccepted

• editingFinished: возникает при нажатии на Enter или кнопку возврата или при потере фокуса и обрабатывается обработчиком onEditingFinished

Например, при обработаем сигнал released:

import QtQuick
import QtQuick.Controls

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

    Column{
        anchors.fill: parent
        padding: 10
        spacing: 10
        TextField {
            id: input
            width: 200
            height: 25
            font.family: "Verdana"
            font.pixelSize: 16
            onReleased: {output.text = text}
        }
        Text{
            id: output
        }
    }
}

Здесь при завершении ввода текст из поля ввода input копируется в элемент Text.

Методы текстового поля

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

• 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
        TextField {
            id: input
            width: 200
            height: 25
            font.family: "Verdana"
            font.pixelSize: 16
        }
        Button{
            width: 80
            height: 25
            text: "Clear"
            onClicked: { input.clear() }    // удаляем текст
        }
    }
}