0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>В активе фреймворка Flutter есть перечень мощных базовых виджетов. Рассмотрим некоторые их них.</p>
1
<p>В активе фреймворка Flutter есть перечень мощных базовых виджетов. Рассмотрим некоторые их них.</p>
2
<h2>Text</h2>
2
<h2>Text</h2>
3
<p>С помощью виджета "Text" вы сможете создать стилизованный текст внутри приложения.</p>
3
<p>С помощью виджета "Text" вы сможете создать стилизованный текст внутри приложения.</p>
4
<h2>Row, Column</h2>
4
<h2>Row, Column</h2>
5
<p>Это гибкие виджеты, позволяющие создавать разные компоновки в горизонтальном (Row) и в вертикальном направлении (Column). Дизайн при этом основывается на модели размещения флексбоксов в web-приложениях.</p>
5
<p>Это гибкие виджеты, позволяющие создавать разные компоновки в горизонтальном (Row) и в вертикальном направлении (Column). Дизайн при этом основывается на модели размещения флексбоксов в web-приложениях.</p>
6
<h2>Container</h2>
6
<h2>Container</h2>
7
<p>Данный виджет позволяет создавать прямоугольный визуальный элемент. При этом контейнер можно украсить декоративным элементом<strong>BoxDecoration</strong>(фон, рамка, тень). Также Container может иметь поля, отступы и ограничения, которые накладываются на его размер. Еще Container можно преобразовать в 3-мерное пространство посредством матрицы.</p>
7
<p>Данный виджет позволяет создавать прямоугольный визуальный элемент. При этом контейнер можно украсить декоративным элементом<strong>BoxDecoration</strong>(фон, рамка, тень). Также Container может иметь поля, отступы и ограничения, которые накладываются на его размер. Еще Container можно преобразовать в 3-мерное пространство посредством матрицы.</p>
8
<p>Давайте посмотрим на то, как выглядят и<strong>сочетаются друг с другом</strong>некоторые простые виджеты в коде:</p>
8
<p>Давайте посмотрим на то, как выглядят и<strong>сочетаются друг с другом</strong>некоторые простые виджеты в коде:</p>
9
<p>Тут важно убедиться, что в файле<em>pubspec.yaml</em>в разделе flutter есть строка<em>use-material-design: true</em>-- это позволит использовать предопределенный перечень иконок<em>Material</em>. Также, если вы пользуетесь библиотекой Materials, неплохо было бы включить следующую строку:</p>
9
<p>Тут важно убедиться, что в файле<em>pubspec.yaml</em>в разделе flutter есть строка<em>use-material-design: true</em>-- это позволит использовать предопределенный перечень иконок<em>Material</em>. Также, если вы пользуетесь библиотекой Materials, неплохо было бы включить следующую строку:</p>
10
<p>Для правильного отображения многие виджеты Material Design должны находиться внутри MaterialApp, что позволит им унаследовать соответствующие темы.</p>
10
<p>Для правильного отображения многие виджеты Material Design должны находиться внутри MaterialApp, что позволит им унаследовать соответствующие темы.</p>
11
<h2>MyAppBar</h2>
11
<h2>MyAppBar</h2>
12
<p>Идем дальше. Виджет<strong>MyAppBar</strong>создает Container с высотой 56 пикселей и с внутренним отступом 8 пикселей, причем и слева, и справа. Внутри контейнера MyAppBar применяет компоновку Row, что позволяет организовывать children. Средний child, виджет заголовка title, помечается как Expanded -- это значит, что он расширяется для заполнения любого оставшегося свободного места, которое не занято другими children. Также можно иметь несколько дочерних процессов Expanded и определять соотношение, в котором эти процессы потребляют доступное пространство, применяя аргумент flex для Expanded.</p>
12
<p>Идем дальше. Виджет<strong>MyAppBar</strong>создает Container с высотой 56 пикселей и с внутренним отступом 8 пикселей, причем и слева, и справа. Внутри контейнера MyAppBar применяет компоновку Row, что позволяет организовывать children. Средний child, виджет заголовка title, помечается как Expanded -- это значит, что он расширяется для заполнения любого оставшегося свободного места, которое не занято другими children. Также можно иметь несколько дочерних процессов Expanded и определять соотношение, в котором эти процессы потребляют доступное пространство, применяя аргумент flex для Expanded.</p>
13
<h2>MyScaffold</h2>
13
<h2>MyScaffold</h2>
14
<p>Следующий момент -- виджет<strong>MyScaffold</strong>. Он организовывает своих children в вертикальном столбце. В верхней части колонки помещается экземпляр MyAppBar, который передает в панель приложения виджет Text для применения его в качестве заголовка. Вообще, передача виджетов в роли аргументов каким-нибудь другим виджетам -- это мощная техника, позволяющая создавать общие виджеты, а они, в свою очередь, могут повторно использоваться самыми различными способами. В конце концов, MyScaffold использует Expanded, что необходимо для заполнения оставшегося пространства своим body, которое состоит из центрированного сообщения.</p>
14
<p>Следующий момент -- виджет<strong>MyScaffold</strong>. Он организовывает своих children в вертикальном столбце. В верхней части колонки помещается экземпляр MyAppBar, который передает в панель приложения виджет Text для применения его в качестве заголовка. Вообще, передача виджетов в роли аргументов каким-нибудь другим виджетам -- это мощная техника, позволяющая создавать общие виджеты, а они, в свою очередь, могут повторно использоваться самыми различными способами. В конце концов, MyScaffold использует Expanded, что необходимо для заполнения оставшегося пространства своим body, которое состоит из центрированного сообщения.</p>
15
<p>Пожалуй, на этом можно закругляться. Если нужна дополнительная информация, вам<a>сюда</a>.</p>
15
<p>Пожалуй, на этом можно закругляться. Если нужна дополнительная информация, вам<a>сюда</a>.</p>
16
<p><em>Источник: https://flutterdocs.ru/.</em></p>
16
<p><em>Источник: https://flutterdocs.ru/.</em></p>
17
17