Текст

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

Виджет Text

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

Например, на этом экране виджет Text используется для четкого и эффективного представления различных кусков информации. Виджеты Text отображают название продукта, "Мужская куртка Харрингтон", его цену, "$148", и подробное описание продукта. Эти виджеты Text оформлены по-разному для выделения конкретных кусков информации.

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

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

Виджет RichText

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

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

Виджет RichText можно найти во вкладке Базовые элементы на панели Палитра виджетов. Вы можете либо перетащить его на нужное место на экране, либо вставить напрямую через дерево виджетов.

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

Для изменения объектов RichTextSpan смотрите быстрые демонстрации ниже:

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

подсказка

Для соблюдения единообразия рекомендуем определить свою типографию и пользовательские стили текста из Настроек темы > Типография и иконки перед созданием любых экранов.

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

• Межстрочный интервал: Задает высоту текста (например, значение 1.5 увеличит межстрочный интервал на 50% больше размера шрифта).

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

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

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

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

Установка замены при переполнении текста

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

Важно

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

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

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

2. Установите Замену при переполнении текста на Обрезать/TRUNCATE или Многоточие (...)

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

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

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

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

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

1. Выберите Text виджет, перейдите к Панели свойств > Свойства текста > включите переключатель Градиент.

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

   1. Выберите Тип среди Линейный и Радиальный. Линейный распределяет цвета горизонтально, а Радиальный круговым образом распределяет цвет.

   2. Если вы выберете Линейный, укажите Направление, а для Радиального укажите Радиус.

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

к сведению

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

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

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

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

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

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

• Десятичное: Показывает числа в десятичном формате (например, 1,200,000 и 1.200.000).
• Процент: Отображает числа в процентном формате (например, 28%, 99.99%).
• Научное: Показывает числа в научном формате (например, 1e3, 1E6).
• Компактное: Показывает числа в компактном формате (например, 2.1K, 2.3M, 5B).
• Компактное длинное: Показывает числа в длинном компактном формате (например, 2.1 тысяча, 2.3 миллиона, 5 миллиардов).
• Пользовательское: Если предложенные варианты форматирования не удовлетворяют ваши требования, вы можете использовать пользовательский формат.

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

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

1. Выберите Text виджет, перейдите к Панели свойств > Установить из переменной > отобразите значение из переменной типа Integer или Double. (например, Состояние приложения > Имя переменной состояния приложения).

2. После выбора переменной установите Доступные опции на Формат числа и Опции формата числа на необходимый тип.

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

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

      2. Выберите Точка для десятичного разделителя, чтобы показать десятичное значение с точкой (например, 1.200).

      3. Выберите Запятая для десятичного разделителя, чтобы показать десятичное значение с запятой (например, 1,200).

   2. Если вы выбрали Пользовательское:

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

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

3. Чтобы отображать это число как валюту, включите переключатель Отобразить как валюту и укажите Символ валюты.

4. Нажмите Подтвердить.