Как следует из названия, 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.
