Текст

Текст — это фундаментальный элемент любого пользовательского интерфейса, используемый для передачи информации и взаимодействия с пользователями. В разработке приложений эффективное представление текста может значительно улучшить пользовательский опыт, делая информацию доступной и взаимодействия интуитивными. Для отображения текста в FlutterFlow обычно используются два виджета: Text и RichText. Каждый из них предназначен для конкретных задач и предоставляет разные возможности для интеграции текста в приложение.

Виджет Text

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

Например, на этом экране виджет Text применяется для четкого и эффективного представления различных фрагментов информации. Виджеты Text отображают название продукта «Men's Harrington Jacket», его цену «$148» и подробное описание продукта. Эти виджеты Text стилизованы по-разному, чтобы подчеркнуть конкретные фрагменты информации.

Виджет Text можно найти в вкладке Base Elements в Widget Palette. Его можно перетащить в нужное место на экране или вставить напрямую через дерево виджетов.

После выбора виджета Text в панели свойств справа активируются опции, позволяющие настроить стилизацию вашего виджета Text. Здесь можно регулировать различные атрибуты, такие как размер шрифта, цвет, выравнивание и многое другое, чтобы адаптировать внешний вид под требования дизайна.

Виджет RichText

Виджет RichText предлагает более сложные возможности форматирования по сравнению с базовым виджетом Text. Он позволяет комбинировать несколько стилей в одной последовательности текста, что дает возможность создавать стилизованный текстовый контент.

Этот виджет использует дерево объектов TextSpan для определения опций расширенного форматирования, включая разные шрифты, размеры и цвета для различных частей текста. RichText особенно полезен в приложениях с большим объемом текста, где требуется встроенная стилизация и связывание, например, в отформатированной статье или просмотрщике документов.

Виджет RichText можно найти в вкладке Base Elements в Widget Palette. Его можно перетащить в нужное место на экране или вставить напрямую через дерево виджетов.

При добавлении виджета RichText в дерево виджетов FlutterFlow автоматически создает два дочерних объекта RichTextSpan. Вы можете изменить значение текста и стилизацию каждого объекта, чтобы создать несколько стилей в пределах одного абзаца.

Чтобы изменить объекты RichTextSpan, ознакомьтесь с быстрым демо ниже:

Общие свойства стилизации текста

подсказка

Для обеспечения единообразия рекомендуется определять типографику и пользовательские стили текста в Theme Settings > Typography & Icons перед созданием экранов.

Несколько важных моментов:

• Line Height: Устанавливает высоту текста (например, значение 1.5 сделает высоту строки на 50% больше размера шрифта.

• Text Align: Определяет, как текст позиционируется внутри контейнера: обычно слева, справа, по центру или по ширине.

Расширенные свойства для виджета Text

• Max Lines: Это свойство указывает максимальное количество строк, которое может занимать текст. Если содержимое превышает установленное количество строк, оно будет обрезано или завершится многоточием в зависимости от конфигурации. Это полезно для поддержания чистой и последовательной компоновки, где пространство для текста ограничено.

• Auto Size

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

  • Configure Parent Widget Dimensions

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

    1. Выберите виджет Text.

    2. Проверьте родительский виджет.

    3. Убедитесь, что ширина и высота явно заданы.

       warning

       Без заданных размеров функция Auto Size может работать не так, как ожидалось.

  • Behavior Scenarios

    Ниже приведены примеры, иллюстрирующие, как ведет себя Auto Size в разных конфигурациях контейнера:

    • Контейнер с шириной infinity и высотой 100px, Auto Size отключена. Текст может выйти за пределы контейнера.

    • Контейнер с шириной infinity и высотой 100px, Auto Size включена. Размер шрифта подстраивается под заданную высоту.

    • Контейнер с шириной 30% и без заданной высоты, Auto Size включена. Функция не оказывает видимого эффекта из-за отсутствия ограничения по высоте.

    • Контейнер с шириной 70% и высотой 50px, Auto Size включена. Текст изменяется до минимально допустимого размера шрифта, чтобы уместиться в контейнере.

      

подсказка

Используйте Auto Size с размерами на основе процентов для лучшей адаптивности. Например, задайте ширину контейнера как 30% и включите Auto Size, чтобы размер текста подстраивался под изменение размера экрана.

примечание

Функция Auto Size имеет пороговое значение минимального размера шрифта. Если контейнер становится слишком маленьким, текст может обрезаться или переполняться, когда дальнейшее изменение размера невозможно.

Настройка замены переполнения текста

Возможно, вы захотите ограничить количество отображаемых символов внутри виджета Text и заменить лишние символы многоточием или полностью скрыть их.

Важно

Эта опция доступна только если значение задано из переменной.

Чтобы настроить замену переполнения текста:

1. Выберите виджет Text, перейдите в Properties Panel > Text Properties > и введите значение для Max character, чтобы ограничить количество символов.

2. Установите Text Overflow Replacement в Clip/Cutoff или Ellipsis (...)

Добавление градиентного цвета

Условные свойства

Обратите внимание, что включение опции Gradient отключает AutoSize и установку Max Lines для вашего Text.

Добавление градиентного цвета к тексту придает ему современный вид и ощущение. Вы можете использовать готовые шаблоны или создать градиент с нуля.

Вот как это сделать:

1. Выберите виджет Text, перейдите в Properties Panel > Text Properties > и включите переключатель Gradient.

2. Чтобы добавить свои цвета:

   1. Выберите Type среди Linear и Radial. Linear распределяет цвета горизонтально, в то время как Radial распространяет цвет круговым образом.

   2. Если выбрано Linear, укажите Direction, а для Radial — Radius.

   3. Добавьте/удалите или настройте существующие цвета.

к сведению

Вы также можете добавить градиентные цвета из предустановленного шаблона, как показано в видео-демо.

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

Возможно, вы захотите отформатировать большие числа для лучшей читаемости. Отображение числа как 2,354,000 или 4,356,634,444 вместо 2354000 или 4356634444 улучшает пользовательский опыт.

Например, clearer показывать население как 1,200,000 вместо 1200000 и значения валюты как $2K или $5M вместо $2000 или $5000000.

Типы форматирования

Ниже приведены поддерживаемые типы форматирования:

• Decimal: Отображает числа в десятичном формате (например, 1,200,000 и 1.200.000).
• Percent: Отображает числа в процентном формате (например, 28%, 99.99%).
• Scientific: Отображает числа в научном формате (например, 1e3, 1E6).
• Compact: Отображает числа в компактном формате (например, 2.1K, 2.3M, 5B).
• Compact Long: Отображает числа в компактном длинном формате (например, 2.1 thousand, 2.3 million, 5 billion).
• Custom: Если предоставленные опции форматирования не подходят, вы можете указать собственный формат.

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

Используйте инструкции ниже, чтобы отформатировать число:

1. Выберите виджет Text, перейдите в Properties Panel > Set from Variable > отобразите значение из переменной типа Integer или Double. (например, App State > App State Variable Name).

2. После выбора переменной установите Available Options в Number Format и Number Format Options в требуемый тип.

   1. Если выбрано Decimal, также установите Decimal Type. Десятичные значения могут отображаться двумя способами: 1,200 (с запятой) и 1.200 (с точкой).

      1. Выберите Automatic, чтобы отображать десятичное значение в зависимости от страны пользователя.

      2. Выберите Period for Decimal, чтобы отображать десятичное значение с точкой (например, 1.200).

      3. Выберите Comma for Decimal, чтобы отображать десятичное значение с запятой (например, 1,200).

   2. Если выбрано Custom:

      1. Найдите поле Custom Format и введите формат. Например, ввод ###,###.### преобразует число 123456.789 в 123,456.789, а 000.00 — число 12.786 в 012.79.

      2. В поле Locale введите локаль, в которой хотите отображать число. (Если оставить это свойство пустым, локаль автоматически устанавливается в соответствии с местоположением пользователя). Подробнее о форматировании чисел читайте здесь.

3. Чтобы отобразить это число как валюту, включите переключатель Display as Currency и укажите Currency Symbol.

4. Нажмите Confirm.