Подробный обзор виджета TextStyle

Мы собираемся использовать старое доброе стартовое приложение (приложение счетчика) как средство для проверки и демонстрации виджета TextStyle в этой статье. Однако я удалил почти весь исходный код, оставив только предложение: «Вы нажимали кнопку столько раз:« Идея в том, что мы затем представим в этой статье варианты изменения » стиль текста и получите представление о том, что виджет TextStyle может сделать для вас и ваших собственных приложений. Ниже представлен снимок экрана «урезанного» приложения счетчика, в котором теперь явно не определен стиль.

Мне нравятся скриншоты. Нажмите «Подписи к спискам».

Как всегда, я предпочитаю использовать в своих статьях скриншоты, а не суть, чтобы показать концепции, а не просто показать код. Откровенно говоря, я считаю, что с ними легче работать. Тем не менее, вы можете щелкнуть или коснуться их подписей, чтобы увидеть код в сущности или в Github. Коснитесь или щелкните сами снимки экрана, чтобы увеличить их.

Давай начнем.

Теперь, когда тема явно не указана, вы обнаружите, что это предложение внезапно появляется с большим, красным и желтым подчеркиванием текста на черном фоне. См. ниже. Так получилось, что я удалил виджет Scaffold из примера приложения, и, помимо его более очевидных функций, он также предоставляет тему.

Тем не менее, я по-прежнему хочу свести код к минимуму и просто сосредоточиться на аспекте «текстового стиля» приложения. Итак, другой подход - предоставить вместо этого виджет Материал. Это StatefulWidget, и вы можете увидеть его функцию build () (снимок экрана ниже), когда не указан textStyle, используется предварительно определенный стиль bodyText2, в результате в более скромной теме, как показано на скриншоте ниже справа.

Кстати, на первом снимке экрана ниже показан ужасный красно-желтый текстовый стиль. Это переменная «высокого уровня», определенная в начале файла библиотеки, app.dart. Как вы видите на втором снимке экрана, он буквально передается как стиль текста приложения. Главный экран вашего собственного приложения будет поддеревом этого приложения, и если вы не определите стиль для своего домашнего экрана и т.п., вы получите именно такой стиль текста. Как указано в документации по коду, он призван побудить разработчиков явно указывать стиль.

Параметры стиля

Ниже приведен список всех параметров, составляющих виджет TextStyle. С первого взгляда вы можете легко сказать, что этот виджет - это стиль и презентация.

Наследовать стиль

Первый именованный параметр, наследовать, используется для определения того, как описанный стиль будет передан, в частности, текстовому виджету. Виджет «Текст», конечно, имеет именованный параметр style, который принимает объект TextStyle, но использует объект «DefaultTextStyle», если параметр стиля имеет значение NULL. При передаче объект TextSytle «объединяется» с объектом «DefaultTextStyle», но только в том случае, если для свойства «наследовать» объекта TextStyle установлено значение True. Если false, «стиль текста по умолчанию» просто заменяется предоставленным объектом TextStyle.

Цвет спереди и сзади

Следующие два параметра относительно просты: color и backgroundcolor. Ниже приведены два примера. В первом текст отображается красным цветом. В следующем примере фон текста синий:

1) child: const Text('You have pushed the button this many times:',
     style: const TextStyle(
      color: Colors.red,
    )),
2) child: const Text(
    'You have pushed the button this many times:',
    style: TextStyle(backgroundColor: Colors.blue),
  ),

Цвет текста

Цвет текста во Flutter по умолчанию - черный. Опять же, вам предоставляется список предварительно определенных значений констант, которые можно назначить параметру color. Ниже находится файл colors.dart со многими из этих значений.

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

Насколько непрозрачен ваш текст

Вы можете дополнительно настроить непрозрачность отдельного цвета - насколько прозрачен цвет. Каждый объект Color имеет функцию withOpacity (), которая принимает двойное значение от 0,0 до 1,0.

У них есть еще один дополнительный цвет, который называется transparent. Можно сказать, что это совсем не цвет, он совершенно невидимый. По иронии судьбы, это первая константа, определенная в классе, Colors.

Увеличить размер

Ваш выбор цветов был нелепым, но теперь давайте поговорим о размере текста. Размеры шрифтов рассчитываются Flutter автоматически в зависимости от настроек ОС устройства. Размер текста по умолчанию во Flutter - 14 (в логических пикселях). Конечно, вы можете уменьшить или увеличить это значение. В рамках поддержки специальных возможностей Flutter доступны очень большие шрифты. Как видно ниже, параметр fontSize виджета TextStyle принимает двойное числовое значение для указания размера.

Указанный размер дополнительно умножается на текущий textScaleFactor (традиционно 1.0). Это означает, что ваш текст может быть любого размера, который вы себе представляете. Будет ли он доступен для чтения предполагаемому пользователю - решать вам. Например, в бесплатной статье Мухаммеда Салиха Гулера Глубокое погружение в виджеты доступности Flutter было отмечено, что явное назначение textScaleFactor может мешать работе любых виджетов доступности, которые вы, возможно, также реализовали. (Спасибо Скотту Столлу за лакомый кусочек)

Конечно, с помощью виджета TextStyle вы можете делать некоторые элементарные вещи, например выделять текст полужирным или курсивом:

Внимательный читатель заметит, что эти два стиля продиктованы двумя разными именованными параметрами, fontWeight, и fontStyle -, позволяющими вашему тексту быть как полужирным, так и курсивным. Вы найдете большинство параметров виджета TextStyle в виде списка заранее определенных постоянных значений. Например, такие значения параметров fontWeight и fontStyle находятся в файле text.dart.

Отдавая немного места

Вы можете указать расстояние (в логических пикселях) между каждой буквой.
Обратите внимание, что при отрицательном значении буквы будут ближе друг к другу.

wordSpacing

Также можно указать количество пробелов (в логических пикселях) между каждым словом. Опять же, отрицательное значение сближает слова.

textBaseline

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

Базовая линия алфавита - это линия, на которой расположены буквы в таких алфавитах, как английский. Вы можете видеть, что английские буквы хорошо вписываются в линию, но она прорезает китайские иероглифы. Однако, когда вы используете идеографический вариант, базовая линия находится внизу текстовой области. Обратите внимание, что китайские иероглифы на самом деле не попадают прямо в строку. Скорее, строка находится в самом низу текстовой строки . - В чем разница между буквенным и идеографическим обозначениями в перечислении Flutter TextBaseline (источник: stackoverflow.com)

рост

По умолчанию высота текста просто определяется размером шрифта. Параметр высоты позволяет вручную отрегулировать эту высоту, кратную размеру шрифта.

Какой у вас регион?

Используется редко, но при необходимости позволяет сохранить текстовые символы для определенного региона в Мире. Например, передача цены с использованием наименования определенного региона, в то время как остальная часть интерфейса остается локальной. Чтобы продемонстрировать это, мне нужно будет реализовать локализацию на этом простом примере, поэтому я оставлю это вашему воображению.

Что на переднем плане?

Этот параметр принимает объект Paint. Другими словами, текст «нарисован» на экране. Конечно, это позволяет вам быть более подробным. Например, тексту можно придать градиентный цвет, постепенно меняющий один цвет на другой. Обратите внимание, что параметр color должен иметь значение null, чтобы это работало. Эти два параметра являются взаимоисключающими (нельзя использовать оба). Это также верно для параметров backgroundColor, и background. Либо одно, либо другое.

Тень знает!

Вы можете буквально добавить массив теней к вашему тексту с помощью именованного параметра shadows. Он принимает… ну… массив теней. В приведенном ниже примере две тени: одна зеленая; один красный. Чем больше радиус размытия, тем больше размытость. Чем больше смещение, тем дальше тень от надписи.

Есть функции шрифта

Разработчик Flutter по имени Сурагч написал отличную статью, в основном посвященную именованному параметру fontFeatures. Это намного лучше, чем я мог бы здесь сделать. Ссылка ниже.

Декоративный текст

Именованный параметр, «украшение», указывает, где «линия» размещается вместе с отображаемым текстом. Существует четыре предопределенных «местоположения». Последние три показаны на скриншотах ниже.

Декоративный со стилем

Есть еще пять предопределенных настроек не для того, «где» линия отображается, а для того, «как» линия будет представлена ​​рядом с отображаемым текстом. Это включает следующий именованный параметр, decorationStyle. См. ниже.

Толщина его

Толщина украшения зависит от размера шрифта. Однако у вас есть параметр decorationThickness для изменения толщины независимо от собственного определения шрифта.

Обозначьте свое развитие

Параметр debugLabel предназначен для отслеживания стиля текста в приложении. «Стиль» текста вашего приложения традиционно «переносится» несколькими способами: слияние, копирование, изменение или интерполяция - с использованием одной или нескольких из следующих четырех функций: merge (), copyWith (), apply () или lerp (). Следовательно, при отладке и разработке функция assert () используется во всех четырех функциях для записи того, «как» возник текущий стиль.

Семейство шрифтов

Следующий параметр называется fontFamily. В общем, шрифты по умолчанию зависят от операционной системы устройства. Однако при прочих равных в интерфейсе дизайна MaterialApp по умолчанию используется шрифт Google «roboto». Для Купертино (iOS) шрифтом по умолчанию является шрифт «San Francisco». Кстати, «резервный шрифт» (если шрифт НЕ предоставляется вообще) - это моноширинный:

Семейный пакет

Последний параметр в виджете TextStyle называется package и используется, когда явно «семейство шрифтов» предоставляется приложению Flutter в конкретном пакете Dart.

Семейство шрифтов Google

Мне дважды рекомендовали использовать собственный пакет Google, google_fonts, для всех шрифтов, которые могут мне понадобиться. По последним подсчетам их осталось до 977 шрифтов, и я включил их в свой пример приложения для вашего обзора.

Есть общая тема

Наконец, вам доступно около тринадцати «текстовых тем». Объект State «тема» вашего приложения имеет свойство textTheme с его конечным списком.

Боюсь, вам придется предоставить «текстовую тему», будь то виджет Scaffold, подразумевающий один, или явно указав стиль с помощью виджета TextStyle. В остальном все черное, красное и желтое.

Ваше здоровье

* Исходный код по состоянию на 2 ноября 2020 г.
+ Исходный код по состоянию на 20 ноября 2020 г.