Flutter scaffold что это
Русские Блоги
Содержание статьи
Предисловие
При разработке Flutter компоненты с несколькими дочерними элементами включают в себя: Scaffold, AppBar, Row, Column, Stack, IndexedStack, ListView, GridView, Flow, Table, Flex, Wrap, CustomScrollView, CustomMultiChildLayout и т. Д. Следующие блоггеры по очереди расскажут, как их использовать. (В этой статье можно добиться следующих эффектов)
Scaffold
Согласно приведенному выше коду, мы видим, что структура Scaffold наследует за нас AppBar, FloatingActionButton и другие элементы управления. Давайте сначала познакомимся с ними, а после введения других компонентов мы будем использовать их более подробно в следующих главах.
AppBar
Завершив разработку Android, вы сможете сразу определить, что это компонент строки заголовка, используемый для управления маршрутом приложения, отображения строки заголовка и отображения некоторых панелей операций справа. Область рисования обычно находится в верхней части экрана, давайте посмотрим на общую карту области распространения AppBar: 
Из приведенного выше изображения мы видим, что область интерлиньяжа по умолчанию скрыта, но она будет отображаться, если есть левый ползунок. И, когда этот интерфейс переходит к предыдущему интерфейсу, здесь будет отображаться кнопка возврата, давайте посмотрим на конкретный используемый код:
Таким образом, мы настроили ведущую кнопку. Эффект от объединения двух приведенных выше фрагментов кода выглядит следующим образом: 
Строка и столбец
Разобравшись в свойствах компонента Row, давайте взглянем на его код:
ListView
ListView построен следующим образом:
Давайте посмотрим, как он используется, код такой:
Это самый простой способ его использования, и он показан следующим образом: 
Необходимо пояснить два атрибута. Здесь itemExtent представляет высоту дочернего элемента. Если ListView отображается горизонтально, он представляет ширину дочернего элемента. Обратите особое внимание на установку этого параметра в максимально возможной степени, поскольку он не требует динамического Расчет, код выполняется эффективно, как и для других атрибутов, смотрите следующую таблицу:
Затем давайте посмотрим на использование ListView.builder (ListView.builder используется для создания повторяющихся макетов подэлементов):
Затем давайте взглянем на ListView.separated. Его роль заключается в том, чтобы «сегментировать», то есть включать другие элементы в список элементов. Основная структура кода следующая:
separatorBuilder в основном похож на itemBuilder. В нашей реальной практике проекта нам может потребоваться использовать разделительную линию для разделения каждого элемента списка, на этот раз ListView.separated пригодится. Однако в separatorBuilder не обязательно передавать только разделительную линию, но и другие вещи, например изображения, давайте посмотрим на его эффект:
Эффект отображения показан на рисунке ниже: 
Наконец, давайте взглянем на ListView.custom. Он может получать IndexedWidgetBuilder через SliverChildListDelegate и генерировать элементы списка для ListView, чтобы реализовать пользовательские функции. Я не буду вдаваться в подробности здесь и представлю их подробно в последующей практике.
Выше приведены различные способы создания ListView. Теперь мы собираемся произвести интересный эффект, здесь нам нужно использовать ScrollPhysics. Это свойство задается для физики в ListView, включая NeverScrollablePhysics (эффект без прокрутки), BouncingScrollPhysics (эффект IOS), ClampingScrollPhysics (эффект Anroid), FixedExtentScrollPhysics (эффект прокрутки фиксированного диапазона) и т. Д. Для FixedExtentScrollPhysics используется следующий код:
Эффект отображения этого кода такой же, как эффект анимации в начале этого поста. На этом пост в блоге с несколькими компонентами подэлементов заканчивается, а в следующем посте блога будут представлены остальные компоненты.
Scaffold class Null safety
Implements the basic material design visual layout structure.
This class provides APIs for showing drawers and bottom sheets.
To display a persistent bottom sheet, obtain the ScaffoldState for the current BuildContext via Scaffold.of and use the ScaffoldState.showBottomSheet function.
Scaffold layout, the keyboard, and display «notches»
The scaffold will expand to fill the available space. That usually means that it will occupy its entire window or device screen. When the device’s keyboard appears the Scaffold’s ancestor MediaQuery widget’s MediaQueryData.viewInsets changes and the Scaffold will be rebuilt. By default the scaffold’s body is resized to make room for the keyboard. To prevent the resize set resizeToAvoidBottomInset to false. In either case the focused widget will be scrolled into view if it’s within a scrollable container.
The MediaQueryData.padding value defines areas that might not be completely visible, like the display «notch» on the iPhone X. The scaffold’s body is not inset by this padding value although an appBar or bottomNavigationBar will typically cause the body to avoid the padding. The SafeArea widget can be used within the scaffold’s body to avoid areas like display notches.
Troubleshooting
Nested Scaffolds
The Scaffold is designed to be a top level container for a MaterialApp. This means that adding a Scaffold to each route on a Material app will provide the app with Material’s basic visual layout structure.
It is typically not necessary to nest Scaffolds. For example, in a tabbed UI, where the bottomNavigationBar is a TabBar and the body is a TabBarView, you might be tempted to make each tab bar view a scaffold with a differently titled AppBar. Rather, it would be better to add a listener to the TabController that updates the AppBar
Although there are some use cases, like a presentation app that shows embedded flutter content, where nested scaffolds are appropriate, it’s best to avoid nesting scaffolds.
Flutter для Android-разработчиков. Как создавать UI для Activity, используя Flutter
Эта статья написана для Android-разработчиков, которые хотят применить свои существующие знания для создания мобильных приложений с помощью Flutter. В этой статье мы рассмотрим эквивалент Activity во Flutter.
Предварительные требования
Предполагается, что вы уже настроили Flutter на своём ПК и можете запустить приложение «Hello World». Если нет, то сделайте это.
Dart основан на концепции ООП, поэтому Android-разработчику не составит труда начать использовать его.
В конце статьи мы сможем создавать пользовательский интерфейс для Activity, используя Flutter-виджеты, который будет выглядеть так:
Scaffold
Scaffold — это набор виджетов, которые визуально представляют собой пользовательский интерфейс для Activity. Как правило, Activity используется для отображения одного экрана, который состоит из многих View-компонентов, таких как тулбар, меню, боковое меню, снэк-бар, FAB и т.д. А FrameLayout используется как контейнер для фрагментов в Activity. В scaffold всё это представлено в виде виджетов.
Изображение выше наглядно демонстрирует составляющие scaffold, который предоставляет API для отображения боковых меню, нижней панели, тулбара, области контента.
Поскольку scaffold — это material-виджеты, то они должны наследоваться от каких-то других material-компонентов, но мы обсудим это более подробно в других статьях. Сейчас мы сосредоточимся на создании scaffold-виджета.
Когда вы запустите этот код, вы увидите белый пустой экран, потому что вы ещё ничего не добавили в scaffold. Поэтому давайте определим цвет фона при помощи свойства backgroundColor и установим жёлтый цвет:
Теперь вы увидите полностью жёлтый экран вашего приложения. Вы можете поиграться с другими свойствами scaffold, полный список которых можете найти в официальной документации.
Теперь мы знаем, как создать scaffold. Давайте исследуем его основные свойства одно за другим.
1. AppBar (Toolbar)
leading: виджет, который отображается перед заголовком. Это может быть иконка гамбургер-меню или кнопка «Назад».
flexibleSpace: этот виджет используется для создания эффекта CollapsingToolbarLayout (схлопывающегося тулбара).
Таким образом, вы можете создать простой Appbar с иконкой, заголовком и меню:
Это полученный результат. Выглядит точно так же, как обычный тулбар, который мы используем обычно. Вы можете поэкспериментировать с добавлением или удалением виджетов, добавлением стиля или цвета конкретному виджету.
В качестве практического упражнения можете изучить остальные свойства AppBar и поработать с ними.
2. Body (контейнер для любого View-компонента)
Это главная составляющая scaffold. Она работает так же, как Fragment Container в Android. Для отображения в области контейнера требуется виджет. Это область, где мы отображаем пользователю основной контент. В нашем примере для простоты мы добавим красный цвет в body. В реальной жизни кроме цвета фона используется множество других виджетов, например, ListView, Row, Column, Stack и т.д.
Body отображается позади AppBar, FAB и бокового меню. Несмотря на то, что мы применили желтый фон к scaffold, на экране отображается красный цвет body, перекрывающий фон scaffold.
3. Drawer (DrawerLayout)
Этот виджет представляет собой DrawerLayout в Android, который выезжает из левой части Activity для отображения навигационных ссылок приложения.
Дочерним компонентом виджета Drawer обычно является ListView, чей первый элемент — DrawerHeader, который отображает информацию о текущем пользователе. Остальные элементы списка, как правило, создаются с помощью ListTiles. Следующий код показывает, каким образом создаётся Drawer:
Вот такой результат вы должны получить. Стоит отметить, что при добавлении в scaffold виджета Drawer в AppBar автоматически добавляется иконка гамбургер-меню, поэтому все другие иконки стоит удалить.
Для получения дополнительной информации об этом виджете вы можете ознакомиться с практическим примером из документации или посвящённой этой теме отдельной статье.
4. BottomNavigationBar (BottomNavigationView)
Material-виджет, отображаемый в нижней части приложения, BottomNavigationBar состоит из нескольких элементов в виде текста и иконок.
BottomNavigationBar обычно применяется при помощи свойства Scaffold.bottomNavigationBar.
Теперь у нас есть BottomNavigationBar с двумя пунктами меню.
Для обработки клика и изменения контента в scaffold нужен виджет поддерживающий сохранение состояния и некоторая ручная работа. Эта тема выходит за рамки этой статьи, но вы можете почитать об этом в официальной документации.
Кроме того, давайте добавим FAB в scaffold. Ниже представлен полный код для создания нашего пользовательского интерфейса Activity с помощью scaffold.
Сейчас в FAB метод onPressed не определён. Поэтому кнопка не будет реагировать на касания. При необходимости вы можете добавить обработку этого события.
Наконец, мы получили результат, о котором говорили в начале этой статьи.
Заключение
Flutter — мощный инструмент для быстрой разработки качественного, красивого пользовательского интерфейса. Он предоставляет множество виджетов для создания гибкого интерфейса с привлекательной анимацией. Scaffold — один из них, и это всего лишь верхушка айсберга. В следующих статьях рассмотрим другие темы.
Правила компоновки во Flutter, которые должен знать каждый
Не надо так делать
Сначала объясните, что Flutter компоновка очень отличается от HTML компоновки (особенно, если говорите с веб-разработчиком), а затем скажите, что необходимо запомнить следующее правило:
Ограничения для виджетов объявляются в родителях. Размеры (желаемые) задаются в самом виджете. Позиция виджета на экране устанавливается родителем
На мой взгляд, это правило нужно изучить, как можно раньше, так как без него по-настоящему понять компоновку во Flutter нельзя.
Например, виджет, похожий на столбец с некоторыми отступами, хочет расположить два дочерних элемента:
Виджет: Родитель, каковы мои ограничения?
Родитель: Ты должен быть от 90 до 300 пикселей в ширину и от 30 до 85 в высоту.
Виджет: Хм, так как я хочу иметь 5 пикселей отступа, то мои дети могут иметь не более 290 пикселей ширины и 75 пикселей высоты.
Виджет: Первый ребенок, вы должны быть от 0 до 290 пикселей в ширину и от 0 до 75 в высоту.
Первый ребенок: Хорошо, тогда я хочу быть 290 пикселей в ширину и 20 пикселей в высоту.
Виджет: Хм, поскольку я хочу поместить своего второго ребенка ниже первого, это оставляет только 55 пикселей высоты для моего второго ребенка.
Виджет: Эй, второй ребенок, ты должен быть от 0 до 290 в ширину и от 0 до 55 в высоту.
Второй ребенок: Хорошо, я хочу быть 140 пикселей в ширину и 30 пикселей в высоту.
Виджет: Родитель, я решил, что мой размер будет 300 пикселей в ширину и 60 пикселей в высоту.
Ограничения
В результате вышеописанного правила механизм компоновки Flutter имеет несколько важных ограничений:
Примеры
Чтобы посмотреть, как работают примеры, можно:
Пример 1
Итак, Container полностью заполняет видимую область, и та становится красной.
Примечание переводчика. У автора говорится, что «screen» определяет ограничения, но самом деле родителем виджета-примера является
Примечание к примечанию. Если проверять приведенные примеры следующим образом
то поведение соответствуют описанному автором.
Пример 2
Красный Container хочет быть 100 × 100, но он не может, потому что «экран» приводит его к своим размерам.
Таким образом, Container заполняет экран.
Пример 3
Пример 4
Пример 5
Пример 6
Пример 7
Красный Container говорит своему дочернему виджету, что тот может быть любого размера, но не больше «экрана».
Пример 8
Размер красного Container будет соответствовать размеру своих детей, но в этот раз необходимо учесть собственные отступы (padding). Так что итоговый размер красного Container будет 30 × 30 плюс отступы. Благодаря отступам красный цвет будет виден, а зеленый Container будет того же размера, что и в предыдущем примере.
Пример 9
Вы могли бы предположить, что размер Container должен быть от 70 до 150 пикселей, но это не так. ConstrainedBox только накладывает дополнительные ограничения к тем, что она получила от своего родителя.
В данном случае «экран» приводит ConstrainedBox к своему размеру, поэтому дочерний Container также будет получит размеры «экрана», игнорируя полученные ограничения.
Пример 10
Пример 11
Пример 12
Пример 13
«Экран» приводит UnconstrainedBox к своему размеру. Как бы то ни было, UnconstrainedBox позволяет дочернему Container быть желаемого размера, в данном случае 20 × 50.
Пример 14
«Экран» приводит UnconstrainedBox к своему размеру. Как бы то ни было, UnconstrainedBox позволяет дочернему Container быть желаемого размера (4000 × 50).
Пример 15
«Экран» приводит OverflowBox к своему размеру. Как бы то ни было, OverflowBox позволяет дочернему Container быть желаемого размера (4000 × 50).
Пример 16
На экране ничего не отобразистя, и вы получите ошибку в консоли.
UnconstrainedBox позволяет своему ребенку иметь любой размер, который он хочет, однако, у его дочернего виджета Container ширина бесконечна ( width: double.infinity ).
Пример 17
Пример 18
«Экран» приводит FittedBox к своему размеру. Text будет иметь некоторую естественную ширину (также называемую его intrinsic width), которая зависит от количества текста, его размера шрифта и т.д.
Пример 19
Пример 20
Пример 21
Пример 22
Пример 23
«Экран» приводит Row к своему размеру.
Пример 24
Пример 25
Когда у Row дочерний элемент обернут в Expanded виджет, то Row больше не позволяет этому дочернему элементу определять свою ширину.
Вместо этого он будет определять ширину Expanded в соответствии с другими дочерними элементами, и затем Expanded приводит ширину исходного дочернего элемента к своей.
Пример 26
Пример 27
Пример 28
«Экран» приводит Scaffold к своему размеру. Так что Scaffold заполняет весь «экран».
Примечание: когда виджет сообщает своему дочернему элементу, что он может быть меньше определенного размера, мы говорим, что виджет предоставляет «loose» (пер. свободные) ограничения своему дочернему элементу. Но об этом чуть позже.
Пример 29
Примечание: когда виджет сообщает своему дочернему элементу, что он должен иметь определенный размер, мы говорим, что виджет предоставляет «tight» (пер. жесткие) ограничения своему дочернему элементу.
Tight × Loose ограничения
Очень часто можно услышать, что некоторые ограничения являются «tight» или «loose», поэтому стоит знать, что это значит.
tight ограничение предполагает только точный размер. Другими словами, tight ограничение определяет свою максимальную ширину, равную его минимальной ширине, и определяет свою максимальную высоту, равную его минимальной высоте.
loose ограничение, с другой стороны, устанавливает максимальную ширину/высоту, но позволяет виджету быть таким маленьким, каким он хочет. Другими словами, loose ограничение определяет минимальную ширину/высоту равной нулю:
Если вы вернетесь к Примеру 3, то увидите, что Center позволяет красному Container быть меньше, но не больше «экрана». Center делает так, передавая loose ограничения контейнеру. В конечном счете, сама цель центра Center в том, чтобы преобразовать tight ограничения, которые он получил от своего родителя («экрана»), в loose ограничения для своего потомка ( Container ).
Изучение правил компоновки для конкретных виджетов
Знание общего правила компоновки необходимо, но его недостаточно.
Каждый виджет имеет большую свободу в рамках общего правила, поэтому нет никакого способа узнать, что будет делать виджет, просто прочитав его имя.
Если вы попытаетесь угадать, то, скорее всего, ошибетесь. Вы не можете точно знать, как будет вести себя виджет, если не прочитали его документацию или не изучили исходный код.
Исходный код обычно сложен, поэтому, вероятно, лучше просто прочитать документацию. Однако, если вы решили изучить код, то его легко найти, используя навигационные возможности ваших IDE.
Спасибо Simon Lightfoot за помощь в написании данной статьи.
Пакеты для компоновки за моим авторством
Еще мои Flutter пакеты
Обо мне
PS Всю критику, вопросы и предложения по переводу буду рад услышать в (личных) сообщениях.
PSS Ещё раз ссылка на оригинальную статью Flutter: The Advanced Layout Rule Even Beginners Must Know от Marcelo Glasberg
Основы адаптивного дизайна на Flutter
Из этого руководства вы узнаете, как с помощью Flutter создавать приложения, которые автоматически подстраиваются под изменение размера и положения экрана пользовательского устройства.
Версии программного обеспечения: Dart 2, Flutter 1.7, Android Studio 3.5
Внешний вид приложения может изменяться при запуске на мобильном устройстве. Пользователь может поворачивать смартфон, вызывать всплывающую клавиатуру. Чтобы программой было одинаково удобно пользоваться как на больших, так и на маленьких дисплеях, верстка приложения должна автоматически приспосабливаться к изменению параметров экрана пользовательского устройства. Если приложение разработано с учетом концепции адаптивного дизайна, проблем с отображением на различных экранах не возникнет.
В этом руководстве мы рассмотрим следующие темы:
Примечание: это руководство предполагает, что читатель уже знаком с базовыми приемами разработки на Flutter. Если это не так, начните изучение фреймворка со статьи «Начинаем работать с Flutter». Также понадобятся навыки использования Android Studio в связке с Flutter.
Что такое адаптивный дизайн
Концепция адаптивного дизайна заключается в использовании кода, который соответствующим образом подстраивается под различные изменения макета страницы. Собственные наборы средств разработки (SDK) мобильных платформ iOS и Android решают эту проблему с помощью универсальных макетов верстки.
Универсальные макеты адаптируют верстку страниц приложения под различные параметры экранов с помощью системы ограничений и автоматического масштабирования элементов пользовательского интерфейса. Существует целый ряд причин для того, чтобы дизайн приложений был адаптивным.
Поддержка различных типов устройств и параметров дисплея
Пользователи могут запустить ваше Flutter-приложение на самых разных устройствах – смартфонах, планшетах, телевизорах и умных часах (когда в них появится поддержка подобных программ). Даже среди смартфонов существует достаточно большой разброс по размерам и разрешению экрана. Разработчику нужно удостовериться в том, что приложение будет корректно работать на любом устройстве, с любыми параметрами экрана. Кроме того, можно предусмотреть различные дизайны интерфейса для разных пользовательских устройств и размеров дисплея.
С учетом всех этих требований к интерфейсу, Flutter предоставляет несколько виджетов и классов для создания адаптивного дизайна. Часть этих виджетов мы рассмотрим в данном руководстве.
Адаптация интерфейса к всплывающей клавиатуре
Обработка изменений положения экрана
Общеизвестный факт – пользователи любят вертеть свои смартфоны и так, и эдак. Реагирование приложения на изменение ориентации экрана можно отключить, заморозив интерфейс в горизонтальном или вертикальном положении. Но в этом случае приложение станет неудобным, и это может серьезно испортить пользовательский опыт.
Мы выяснили причины для использования адаптивной концепции в дизайне, теперь пора переходить к рассмотрению вопроса о том, как виджеты Flutter помогают в разработке подобного интерфейса.
Приступаем к работе
Загрузите стартовый проект, нажав на кнопку « Скачать материалы ». Затем откройте проект в Android Studio 3.4 или выше. Если вы пользуетесь средой разработки VS Code, некоторые инструкции будут отличаться.
У вас должна быть установлена версия Flutter, 1.5 или выше. Не забудьте установить все нужные зависимости; в случае их отсутствия Android Studio продемонстрирует сообщение «Packages get’ has not been run» (« Нужные пакеты не были установлены »).
Как вы обнаружите, стартовый пакет уже включает в себя заготовки для различных частей чат-приложения.
Использование MediaQuery для управления макетом
Сначала мы попробуем использовать MediaQuery для адаптации интерфейса. Это всего лишь один из возможных вариантов реализации адаптивного дизайна, мы рассмотрим другие методы чуть позже.
Этот код задает адаптивный дизайн для страницы чата, используя MediaQuery. Рассмотрим подробнее, как именно это происходит:
Запустите выполнение проекта, и вы увидите вот такую страницу в вертикальном положении:
И такую страницу при горизонтальной ориентации экрана:
Как видите, макет страницы выглядит по-разному при горизонтальном и вертикальном положении смартфона. Также попробуйте запустить проект на планшете.
Использование виджетов в адаптивном дизайне
Как уже отмечалось выше, есть и другие виджеты, которые помогают добиться такого же эффекта, как и MediaQuery. Например, LayoutBuilder позволяет делать то же самое, как вы сейчас увидите. Кроме того, на этом этапе мы сможем исправить некоторые недостатки приложения – к примеру, сейчас надписи на аватарах пользователей не масштабируются.
Применение LayoutBuilder и OrientationBuilder
LayoutBuilder и OrientationBuilder – альтернатива MediaQuery в части адаптации к ориентации экрана пользовательского устройства. Рассмотрим, как именно они работают. Начнем с LayoutBuilder.
Приведенный выше код заново определяет макет страницы, в этот раз с использованием LayoutBuilder. Рассмотрим подробнее, что именно мы только что сделали:
Запустите сборку и выполнение проекта. Как и на предыдущем этапе, вы получите различные макеты страниц при различной ориентации экрана.
Если вы также хотите опробовать OrientationBuilder, замените строки, относящиеся к объявлению LayoutBuilder и настройкам hasDetailPage на следующий код:
Это незначительное изменение обеспечивает точно такой же эффект. Вместо получения ширины родительского виджета код считывает ориентацию этого виджета из конструктора. Если ориентация горизонтальная, вы получаете параметры страницы.
Запустите сборку и выполнение кода. Вы получите такой же интерфейс, как и раньше. Как видите, любой из использованных нами приемов обеспечивает одинаковое решение проблемы с ориентацией и размером экрана.
Далее мы исправим текст, который не масштабируется вместе с аватаром.
Автоматическое масштабирование текста с помощью родительских виджетов
Использование FittedBox
Запустите сборку и выполнение проекта. В горизонтальной ориентации вы получите такой макет страницы:
Как видите, теперь текст масштабируется правильно. Для других случаев вы можете использовать другие типы BoxFit. Скриншот, приведенный ниже, показывает различные варианты масштабирования:
Ограничения для вложенных виджетов
В приложении есть иконка скрепки – нажатие на нее должно открывать фотогалерею, из которой можно выбрать изображение для прикрепления к сообщению. Как правило, пользователи хотят, чтобы галерея открывалась поверх чата, не скрывая его из виду полностью.
Пока что такой функции в нашем приложении нет. Нажмите на иконку вложения, и при вертикальном положении экрана вы увидите следующее:
В горизонтальном варианте экран выглядит так:
Использование соотношения сторон AspectRatio
Виджет галереи не отображается потому, что сейчас он является вложенным элементом Column и к тому же не имеет параметров для определения собственного размера. Для исправления этой ситуации оберните виджет в AspectRatio для установки соотношения сторон. Замените строку SquareGallery() на следующий код:
Теперь виджет галереи имеет установленные ограничения по соотношению сторон: ширина всегда будет в три раза больше высоты. Кроме того, AspectRatio будет отслеживать изменения размеров родительского виджета, и адаптировать размеры галереи соответственно. Если AspectRatio не обнаружит ограничений по размерам со стороны родительского виджета, размер галереи может выйти за границы окна приложения.
Запустите сборку и выполнение программы. Теперь после нажатия на иконку вложения вы получите следующий интерфейс в вертикальном положении экрана:
И следующий дизайн в горизонтальной ориентации:
Примите поздравления: вы исправили все недочеты, связанные с масштабированием. Дизайн чат-приложения стал полностью адаптивным.
Использование макета CustomMultiChildLayout
Посмотрите на этот код:
Здесь вы объявляете CustomMultiChildLayout с делегацией функций. Делегатом может быть объект класса, какпоказано ниже:
Вот что делает этот код:
Что еще будет полезно изучить
Все материалы руководства можно скачать, нажав на кнопку « Скачать материалы ».
Также вам может пригодиться изучение особенностей масштабирования текста на мобильных платформах. Надеюсь, это руководство вам понравилось. Если у вас есть вопросы или замечания, сообщите о них в комментариях.