Как следует из названия, RichText
предоставляет больше возможностей для отображения text
на экране.
Свойство style
виджета text
используется для применения различных стилей к тексту, но его ограничение заключается в том, что стиль применяется ко всему тексту независимо от того, является ли текст однострочным или многострочным. Рассмотрим приведенный ниже фрагмент для отображения одной строки текста на экране:
Container( padding: EdgeInsets.all(10), child: Center( child: Text( 'The future belongs to those who prepare for it today.') ) )
С приведенным выше кодом, если мы применим fontSize
как 20, fontStyle
как italic
, стиль будет применен ко всему тексту, как показано ниже.
Но что, если мы хотим только подчеркнуть слово в тексте выше или показать определенные слова текста жирным/курсивом или другим цветом а остальной текст как обычный текст?
Виджет RichText
помогает ответить и достичь вышеуказанных случаев.
Структура RichText
RichText
использует TextSpan
как родительский объект, который имеет собственное свойство style
вместе с параметром text
, в который мы можем вводить фактический текст. Затем родительский объект может иметь несколько объектов TextSpan
в качестве дочерних, у которых есть собственное свойство style
, которое можно применить к соответствующему тексту.
С приведенным выше базовым обзором виджета RichText давайте теперь посмотрим, как мы можем использовать этот виджет в реальном времени.
Сценарий 1:
Большинство приложений имеют экран входа в систему и возможность создать учетную запись. Раздел create account
обычно представляет собой комбинацию обычного текста, за которым следует цветной текст, например экран входа StackOverflow, как показано ниже:
Текст Don't have an account? Sign up
представляет собой однострочный текст, последняя часть которого является кликабельным словом, которое ведет пользователя к экрану регистрации.
Подход
Мы разделим текст на две части. В первой части мы будем использовать родительский объект TextSpan
и введем обычный текст Don't have an account?
со свойством цвета Colors.black
.
child: Center( child: RichText( text: TextSpan( text: 'Don\'t have an account?', style: TextStyle(color: Colors.black, fontSize: 18),
Во второй части мы будем использовать дочерние объекты TextSpan
для ввода текста Sign up
и передавать свойство цвета как Colors.blue
.
children: <TextSpan>[ TextSpan(text: ' Sign up', style: TextStyle(color: Colors.blueAccent, fontSize: 18) ) ]
Результат:
Еще одна замечательная особенность использования виджета RichText
заключается в том, что TextSpan
объект поставляется со своим собственным TapGestureRecognizer()
, который помогает реализовать действие onTap()
в определенных частях текста по мере необходимости. В нашем примере, поскольку пользователь может нажать на текст Sign up
, чтобы перейти к нужному экрану, мы будем использовать свойство recognizer
, которое делает текст доступным для нажатия, как показано во всем фрагменте кода ниже:
Примечание. Перед использованием
TapGestureRecognizer()
нам потребуетсяimport ‘package:flutter/gestures.dart’;
Container( padding: EdgeInsets.all(10), child: Center( child: RichText( text: TextSpan( text: 'Don\'t have an account?', style: TextStyle( color: Colors.black, fontSize: 18), children: <TextSpan>[ TextSpan(text: ' Sign up', style: TextStyle( color: Colors.blueAccent, fontSize: 18), recognizer: TapGestureRecognizer() ..onTap = () { // navigate to desired screen } ) ] ), ), ) )
Используя свойство recognizer
, нам не нужно будет оборачивать виджет RichText
другим виджетом, таким как GestureDetector
, чтобы выставить и использовать tap()
для навигации.
Сценарий использования 2:
Так же, как раздел sign up
, как мы видели выше, также есть раздел для отображения user agreement
на различных экранах входа, например, Xoom (приложение для онлайн-перевода денег) имеет следующий пользовательский интерфейс:
Чтобы реализовать последний раздел, мы можем разделить текст на три части, как показано ниже:
- Первая часть: родитель
TextSpan
с текстом (при входе) и стилем (Colors.black)
child: RichText( text: TextSpan( text: 'By Logging In,', style: TextStyle( color: Colors.black, fontSize: 15),
- Вторая часть: первый из дочерних элементов объекта
TextSpan
с текстом (вы принимаете Xoom) и стилем (Colors.black)
children: <TextSpan>[ TextSpan(text: ' you accept the Xoom', style: TextStyle( color: Colors.black, fontSize: 15) ),
- Третья часть: вторая из дочерних элементов объекта
TextSpan
с текстом (Пользовательское соглашение) и стилем (Colors.blue и fontWeight выделены полужирным шрифтом) и распознавателем для касания.
TextSpan( text: ' User Agreement', style: TextStyle(color: Colors.blueAccent, fontWeight: FontWeight.bold), recognizer: TapGestureRecognizer() ..onTap = () { // navigate to desired screen } )
Выход:
Случай использования 3:
Здесь мы будем использовать многострочный текст/абзац, в котором некоторые слова будут подчеркнуты другим цветом. Рассмотрим экран входа в систему github, который имеет текстовый абзац, как показано ниже:
Подход
Поскольку текст, кроме open source
и business
, является простым текстом, мы сосредоточимся на реализации только приведенных выше слов, а не обычного текста.
Внутри объекта TextSpan
мы будем использовать свойство style
и назначим белый цвет терминам open source
и business
соответственно вместе с TextDecoration.underline
для достижения ожидаемого стиля, как показано ниже:
TextSpan(text: 'open source', style: TextStyle( color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold, decoration: TextDecoration.underline), recognizer: TapGestureRecognizer() ..onTap = () { // open desired screen } ),TextSpan( text: 'business,', style: TextStyle( color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold, decoration: TextDecoration.underline), recognizer: TapGestureRecognizer() ..onTap = () { // open desired screen } ),
Весь фрагмент кода выглядит следующим образом:
Container( color: Colors.black, padding: EdgeInsets.all(10), child: Center( child: RichText( text: TextSpan( text: 'GitHub is a development platform inspired by the way you work. From ', style: TextStyle( color: Colors.grey, fontSize: 20, fontWeight: FontWeight.bold), children: <TextSpan>[ TextSpan(text: 'open source', style: TextStyle( color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold, decoration: TextDecoration.underline), recognizer: TapGestureRecognizer() ..onTap = () { // open desired screen } ), TextSpan( text: ' to ', style: TextStyle(color: Colors.grey, fontSize: 20, fontWeight: FontWeight.bold) ), TextSpan( text: 'business,', style: TextStyle( color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold, decoration: TextDecoration.underline), recognizer: TapGestureRecognizer() ..onTap = () { // open desired screen } ), TextSpan( text: ' you can host and review code, manage projects, and build software alongside 36 million developers.', style: TextStyle(color: Colors.grey, fontSize: 20, fontWeight: FontWeight.bold) ) ] ), ) ) )
И вывод:
Мы увидели, как RichText
помогает сделать внешний вид и функциональность текста более эффективными и дает разработчикам больше возможностей для реализации текста определенным образом, независимо от того, является ли текст однострочным или абзацным, и может достичь количества таких вариантов использования в тексте, а не ограничивается только экранами входа в различные приложения, но может быть полезен и в других функциях/экранах приложений.
Это все, что у меня есть в этой статье. Спасибо за чтение и не стесняйтесь комментировать ниже свои мысли или любые предложения / отзывы об этой статье. Я доступен на LinkedIn и Github.