MDC-102: структура и макет материала

Дизайн материала предлагает навигационные форматы, которые гарантируют большую простоту использования. Одним из наиболее заметных компонентов является верхняя часть применения.

Создать учетную запись разработчика Google Play

Сообщите вашей личной информации, адресу по вашему выбору и ваш пароль.

Принять общие условия продажи (GTC).

Добавьте красивое фото себя.

Создать учетную запись разработчика Google Play

Процедура создания учетной записи разработчика Google Play намного проще, чем в Apple.

Связаться со своим адресом Gmail.

Принять GTC.

Регулируйте регистрационные сборы: единый платеж в размере 25 евро, чтобы опубликовать все заявки по вашему выбору !

Информировать информацию, касающуюся вашей учетной записи: имя разработчика, адрес электронной почты и номер телефона.

Это ответило на ваш вопрос ?

Спасибо за комментарии, была проблема, чтобы отправить ваши комментарии. Пожалуйста, повторите попытку позже.

Последнее обновление 9 ноября 2021 года

Связанные статьи

• Создать приложение на консоли Google Play
• Создать сертификат Android P12
• Экспорт файла APK или AAB
• Опубликовать приложение для Android
• Опубликовать приложение для Android за пределами Play Store
• Публикуйте в Google Play Store

MDC-102: структура и макет материала

Материальные компоненты (MDC) помогают разработчикам реализовать дизайн материала. Разработанный командой инженеров и специалистов по пользователям в Google, MDC предлагает десятки элегантных и функциональных компонентов пользовательского интерфейса. Он доступен для Android, iOS, Интернета и трепета.материал.Io/развивать.

В семинаре по программированию MDC-101 вы использовали два элемента компонентов материала для создания страницы соединения: текстовые поля и кнопки, включающие анимацию «чернила». На этих базах давайте обогатим наше приложение, добавив навигацию, структуру и данные.

Цели семинара

В этом семинаре по программированию вы создадите домашний экран для Святыня, Заявка на электронную коммерцию для продажи одежды и предметов для дома. Этот экран будет содержать:

• Более высокая полоса применения
• Список продуктов в виде сетки

Обратите внимание, что этот семинар по программированию был заменен материалом 3, за исключением скриншотов. Тем не менее они передают ту же информацию.

Этот семинар по программированию является вторым из четырех семинаров, которые помогут вам создать заявку на продукт под названием Sanctuary. Мы рекомендуем вам следовать всем семинарам по программированию, чтобы немного продвигаться в задачах. Вы найдете свои семинары по программированию здесь:

• MDC-101 Flutter: основные принципы материалов компонентов
• MDC-103 Flutter: использование тем из дизайна материала (цвет, фигуры, высота и тип)
• MDC-104 Flutter: передовые компоненты дизайна материала

Материал Флэттер Материал Компоненты и подсистемы в этом семинаре по программированию

• Верхний
• Сетки
• Карты

В этом семинаре по программированию вы будете использовать компоненты по умолчанию, предоставленные Material Flutter. Вы научитесь настраивать их в разделе MDC-103: Использование тем из дизайна материала (цвет, фигуры, высота и тип).

Как бы вы оценили свой уровень опыта в разработке с Flutter ?

2. Настройте среду разработки Flutter

Для этого семинара вам нужно два программного обеспечения: Flutter SDK и издатель.

Вы можете запустить семинар по программированию на одном из следующих устройств:

• Android или физическое устройство iOS подключено к вашему компьютеру и установлено в режиме разработчика.
• Симулятор iOS (инструменты Xcode для установки).
• Эмулятор Android (который должен быть настроен в Android Studio).
• Браузер (хром требуется для отладки).
• Как Windows, Linux или MacOS Desktop. Вы должны разработать свое приложение на платформе, где планируете его развернуть. Например, если вы хотите разработать настольное приложение Windows, вы должны сделать это в Windows, чтобы получить доступ к соответствующей цепочке компиляции. Также узнайте о конкретных требованиях к операционным системам, которые подробно описаны на документах.разветвление.Dev/Desktop.

3. Загрузите приложение Departure для семинара по программированию

Вы уже следили за мастерской MDC-101 ?

Если вы закончили семинар по программированию MDC-101, ваш код должен быть готов начать этот семинар. Перейдите на следующий этап: Добавить более высокую строку применения.

Вы начинаете с нуля ?

Загрузите приложение для отправления начала семинара

Начальное приложение находится в материале-компоненте-флаттере-Codelabs-102-starter_and_101-complete/mdc_100_series .

… Или клонировать мастерскую от GitHub

Чтобы клонировать этот семинар по программированию из GitHub, запустите следующие команды:

Git clone https: // github.COM/Компоненты материала/Компоненты материала-флэттер-коделабс.GIT CD Материал-Компоненты-Флаттер-Коделябс/MDC_100_Series GIT Checkout 102-Starter_and_101-Complete

Для получения помощи см. Раздел клонирования от GitHub

Выберите правильную ветвь

Семинары по программированию MDC-101 на 104 полагаются друг на друга. Поэтому, когда вы заканчиваете код для семинара MDC-102, он становится начальным кодом семинара MDC-103. Код разделен на несколько ветвей, которые вы можете отобразить список, используя эту команду:

Git Branch -List

Чтобы отобразить готовый код, перейдите в филиал 103-starter_and_102-полного .

Откройте проект и выполните приложение

1. Откройте проект в издателе по вашему выбору.
2. Следуйте инструкциям, касающимся выбранного вами издателя. Они доступны для параграфа «Запустить приложение» (выполнить приложение) на странице GetDament> Test Drive (первые шаги> тест).

Успешная операция. Страница подключения святилища из семинара по программированию MDC-101 должна отображаться на вашем устройстве.

Теперь, когда экран соединения на месте, давайте добавим некоторые продукты в приложение.

4. Добавить более высокую строку применения

На данный момент, если вы нажмете кнопку «Далее», домашний экран отображается с сообщением », вы сделали это!”(Вам удалось.))). Идеальный. Тем не менее, нашему пользователю нечего делать и не знает, где он находится в приложении. Чтобы помочь вам, пришло время добавить навигацию.

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

Чтобы узнать больше, обратитесь к статье, посвященной навигации в инструкциях по проектированию материалов.

Дизайн материала предлагает навигационные форматы, которые гарантируют большую простоту использования. Одним из наиболее заметных компонентов является верхняя часть применения.

Вы можете знать этот элемент под названием «Навигационная панель» под iOS или просто «панель приложений» или «заголовок».

Чтобы предложить пользователям быстрый доступ к другим действиям, давайте добавим более высокую строку приложений.

Добавить виджет Appbar

Дома.Дарт, добавьте Appbar в «Скафолд», затем удалите Const, выделенные:

Вернуть каркас Const (// todo: добавить панель приложений (102) Appbar: appbar (// todo: добавить кнопки и заголовок (102)), 

ДобавлениеAppbar В поле Appbar: леса позволяют нам получить идеальную и свободную макет, оставляя полосу применения в верхней части страницы и ниже тела.

Строительные леса важный виджет в MaterialApps. Он обеспечивает практические API для отображения всех видов компонентов текущих вопросов, таких как панели, “Snackbar” Bars и нижние элементы листа. Это даже облегчает размещение кнопки плавающего действия.

Проконсультируйтесь с документацией Flutter, чтобы узнать больше о каркасе.

Запишите проект. Как только храм обновлен, нажмите Следующий (Следующее) для отображения главного экрана.

Элемент хорошо расположен, но ему не хватает заголовка.

Добавить текстовый виджет

Дома.Дарт, добавьте заголовок в строку приложений Appbar:

// todo: добавить панель приложений (102) Appbar: Appbar (// todo: добавить кнопки и заголовок (102) Название: const Text ('Shrine'), // todo: Добавить кнопки сцепления (102) 

Запишите проект.

Вы, возможно, заметили вариации для каждой платформы. Система разработки материалов учитывает, что каждая платформа (Android, iOS, Web) отличается, и что ожидания пользователя разные. Например, на iOS названия почти всегда сосредоточены. Это поведение по умолчанию, обеспечиваемое uikit. На Android они выстроены слева. Поэтому, если вы используете эмулятор или устройство Android, ваш заголовок должен быть выровнен слева. В случае симулятора или устройства iOS он должен быть центрирован.

Чтобы узнать больше, проконсультируйтесь с этой статьей о адаптации к различным платформам с дизайном материала.

Многие панели приложений имеют кнопку рядом с заголовком. Добавить значок меню в нашу приложение.

Добавьте кнопку иконаттона в начале линии

Всегда дома.Дарт, определите элемент икона для ведущего поля: из строки приложений Appbar. (Поместите его перед заголовком: в соответствии с началом от начала до конца линии):

 // todo: добавить кнопки и заголовок (102) Ведущий: Iconbutton (Icon: Const Icon (значки.Меню, Semanticlabel: «Меню»,), Onpressed: () < print('Menu button'); >, ))), 

Запишите проект.

Значок меню (также называемый «Гамбургер»), появляется в желаемом месте.

Класс Iconbutton Практический способ интегрировать материальные значки в ваше приложение. Она использует виджет Икона. Flutter имеет полную коллекцию икон в классе Значки. Значки автоматически импортируются в соответствии с отображением каналов «const».

Чтобы узнать больше о классе значков, см. В документации Flutter. Чтобы узнать больше о виджете значков, см. Документацию Flutter.

Вы также можете добавить кнопки в конце линии. В Flutter эти кнопки называются «действиями».

Условия начало И КОНЕЦ выразить значение чтения, независимо от заинтересованного языка. Когда вы работаете на языке, читающем слева направо, например, английский, начало означает Слева И КОНЕЦ означает Направо. На языке, который читается справа налево, как арабский язык, термин начало означает Направо, И КОНЕЦ означает Слева.

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

Добавить действия

Достаточно места для двух других элементов иконботтона.

Добавьте их в экземпляр Appbar после заголовка:

// TODO: Добавить кнопки сцепления (102) Действия: [Iconbutton (Icon: Const Icon (значки.Поиск, Semanticlabel: 'Search',), Ontpresd: () < print('Search button'); >, ), Iconbutton (значок: константный значок (значки.Tune, SemanticLabel: 'Filter',), Onpresd: () < print('Filter button'); >, ),], 

Запишите проект. Ваш домашний экран должен возникнуть следующим образом:

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

В классе иконы поле Semanticlabel это общий способ добавить информацию о доступности, чтобы трепетать. Это система, очень близкая к формулировке контента Android и функциональности UIAICESUBICALICE на доступности iOS . Вы найдете это во многих курсах.

Информация, содержащаяся в этом поле.

Если у виджета нет поля Semanticlabel:, вы можете инкапсулировать его в виджет Семантика. Чтобы узнать больше о виджете семантики, см. В документации Flutter.

5. Добавить лист в сетку

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

А карты независимые элементы, которые отображают контент и действия, связанные с данным предметом. Они предлагают гибкий способ представить аналогичный контент в форме коллекции.

Чтобы узнать больше, см. Статью, посвященную файлам в инструкциях по проектированию материалов.

Чтобы узнать больше о виджете карты (лист), проконсультируйтесь с статьей о создании макетов в Flutter.

Добавить виджет Gridview

Начнем с добавления листа под верхней панелью применения. В настоящее время виджет Карта (Лист) не содержит достаточно информации, чтобы заметно позиционировать себя. Поэтому мы инкапсулируем это в виджет Вид сетки.

Замените центр в теле элемента каркаса на виджет Gridview:

// todo: добавить сетку (102) Тело: Gridview.Счет (CrossaxIscOnt: 2, Padding: Const EdgeInsts.Все (16.0), ChildAspectratio: 8.0/9.0, // todo: построить сетку карт (102) Дети: [card ()],),), 

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

Переменная CrossaxIscount: указывает количество элементов на строку. Мы хотим получить два столбца.

L ‘поперечная ось В трепете соответствует оси, которую мы не прокручиваем. Чувство прокрутки называется Основная ось. Если вы используете вертикальную прокрутку, как и корпус по умолчанию с GridView, поперечная ось горизонтальна.

Чтобы узнать больше, посмотрите страницу, посвященную созданию макетов.

Поле заполнения: определяет свободное пространство на четырех сторонах виджета Gridview. Конечно, эта маржа не видна в результате элемента или под ним, потому что на данный момент не было установлено, что нет.

Поле ChildAspecto: определяет размер элементов в виде пропорций (ширина на высоте).

По умолчанию Gridview создает блоки одинакового размера.

У нас есть лист, но он пуст. Добавить детские виджеты в этот лист.

Поместите содержимое

Листы должны включать области для изображения, заголовок и вторичного текста.

Обновите детей из виджета Gridview:

// TODO: Создайте сетку карт (102) Дети: [Карта (Clipbehavior: Clip.Antialias, ребенок: колонка (CrossaxisAlignment: CrossaxAsalignment.Начало, дети: [Aspectratio (Aspectratio: 18.0/11.0, ребенок: изображение.Актив (активы/бриллиант.Png '),), Padding (Padding: Const EdgeInsts.от Lltrb (16.0, 12.0, 16.0, 8.0), ребенок: столбец (CrossaxisAlenment: CrossaxAsalignment.Начало, дети: [текст («Название»), Const -Sizebox (высота: 8.0), Text ('вторичный текст'),],),),],),)]]], 

Этот код добавляет виджет столбца (столбец), который позволяет иметь детские виджеты по вертикали.

Параметр CrossaxIsAlignment: Field указывает значение CrossAxAxAlignment.Начало, что означает «выровнять текст на« начале строки »« сторона ».

Виджет Соотношение сторон Определяет пропорции отображаемого изображения, независимо от типа предоставленного изображения.

Элемент Прокладка Определяет маржу для текста.

Два виджета Текст один над другим размещены и разделены восемью пустыми пространственными точками (Размер))). Мы создаем еще один элемент Столбец дать им внутреннюю маржу.

Запишите проект.

В этом обзоре вы можете видеть, что лист расположен с краем, его углы округлены и проецируют тень (представляющий его возвышение). Вся форма называется «контейнер» в системе проектирования материалов (не следует путать с классом виджетов, называемым контейнером).

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

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

Листы обычно отображаются в коллекции с другими простынями. Расположить их в форме коллекции в сетке.

6. Создать коллекцию файлов

Когда на экране присутствует несколько листов, они сгруппированы в одну или несколько коллекций. Файлы коллекции – Копланар: они имеют все одинаковые высоты в состоянии покоя (то есть, когда они не выбраны или не перемещены, что мы здесь не будем делать).

Создать коллекцию файлов

На данный момент наш лист расположен внутри детского поля: Gridview Grid. Это приводит к большому количеству вложенного кода, который может быть трудно прочитать. Давайте преобразуем эту часть кода в функцию, позволяющую генерировать столько пустых листов, сколько необходимо, и вернуть список файлов.

Создайте частную функцию выше функции Build () (помните, что функции, начинающиеся с линии подчеркивания, являются частными API):

// TODO: Сделайте сбор карт (102) Список _BuildGridcards (int cent) < Listcards = List.generate( count, (int index) < return Card( clipBehavior: Clip.antiAlias, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18.0 / 11.0, child: Image.asset('assets/diamond.png'), ), Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: const [ Text('Title'), SizedBox(height: 8.0), Text('Secondary Text'), ], ), ), ], ), ); >, ); Возвращаемые карты; > 

Назначьте файлы, сгенерированные в поле «Детское поле виджета Gridview. не забудь Замените все элементы, содержащиеся в виджете Gridview с этим новым кодом ::

// todo: добавить сетку (102) Тело: Gridview.Счет (CrossaxIscOnt: 2, Padding: Const EdgeInsts.Все (16.0), ChildAspectratio: 8.0/9.0, дети: _buildgridcards (10) // Заменить), 

Запишите проект.

Карты присутствуют, но на данный момент они ничего не отображают. Пришло время добавить данные о продукте.

Добавьте данные продукта

Приложение содержит некоторые продукты с изображениями, именами и ценами. Добавьте это в виджеты, уже присутствующие в файле

Затем в доме.DART, импортируйте новый пакет и некоторые файлы, предоставленные для модели данных:

Импорт 'Пакет: трепетание/материал.Дарт '; Импорт 'пакет: intl/intl.Дарт '; Импорт модели/продукт.Дарт '; Import 'model/products_repository.Дарт '; 

Наконец, измените _buildgridcards () для извлечения информации о продукте и использования этих данных в файлах:

// TODO: Сделайте коллекцию карт (102) // Заменить весь этот список методов _buildgridcards (контекст BuildContext) < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > Финальная темата тема = тема.(контекст); Final NumberFormat formatter = numberFormat.SimpleCurrent (Local: помещения.Локальный (контекст).нанизывать ()); Возвращать продукты.Карта ((продукт) < return Card( clipBehavior: Clip.antiAlias, // TODO: Adjust card heights (103) child: Column( // TODO: Center items on the card (103) crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18 / 11, child: Image.asset( product.assetName, package: product.assetPackage, // TODO: Adjust the box size (102) ), ), Expanded( child: Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( // TODO: Align labels to the bottom and center (103) crossAxisAlignment: CrossAxisAlignment.start, // TODO: Change innermost Column (103) children: [ // TODO: Handle overflowing labels (103) Text( product.name, style: theme.textTheme.titleLarge, maxLines: 1, ), const SizedBox(height: 8.0), Text( formatter.format(product.price), style: theme.textTheme.titleSmall, ), ], ), ), ), ], ), ); >))).К списку (); > 

ЗАМЕТИЛ : Подождите, прежде чем запустить компиляцию и выполнение. Остается модификация, чтобы сделать.

Чтобы форматировать текст, мы используем данные темы Темадата от значения BUILDCONTEXT текущий.

Чтобы узнать больше о форматировании текста, обратитесь к статье о типографике в инструкциях по проектированию материалов. Чтобы узнать больше о форматировании из темы, продолжитесь после этого мастер-класса программирования с MDC-103: использование тем из дизайна материала (цвет, формы, возвышение и тип).

Также измените функцию Build () для передачи значения BUILDCONTEXT at _buildgridcards () перед запуском компиляции:

// todo: добавить сетку (102) Тело: Gridview.Счет (CrossaxIscOnt: 2, Padding: Const EdgeInsts.Все (16.0), ChildAspectratio: 8.0/9.0, дети: _buildgridcards (контекст) // Изменение кода), 

Перезагрузить горячее приложение.

Вы можете заметить, что мы не добавляем вертикальное пространство между файлами. Потому что у них есть четыре поля вверху и снизу.

Запишите проект.

Полученные данные отображаются, но изображения окружены ненужным пространством. По умолчанию изображения нарисованы с полем Boxfit определенный .Scaledown (в этом случае). Заменить это значение на .FitWhidth, чтобы она могла увеличить и удалить ненужное пространство.

Добавить поле подгонки: как значение Boxfit.FitWhidth:

 // todo: отрегулировать размер коробки (102) Fit: boxfit.Филд, 

Наши продукты теперь идеально отображаются в приложении.

7. Поздравляю !

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

Завершенная версия приложения MDC-102 доступна в филиале 103-starter_and_102-Complete .

Вы можете сравнить свою версию на странице с применением этой филиала.

Следующие шаги

С помощью панели приложений, листа, текстового поля и кнопки, расположенной в верхней части страницы, теперь мы использовали четыре основных компонента библиотеки Flutter Material. Чтобы узнать больше, увидеть каталог материалов компонентов.

Даже если наше приложение работает отлично, оно не отражает идентичность бренда или определенную точку зрения. В семинаре MDC-103: использование тем из дизайна материала (цвет, формы, высота и тип) мы персонализируем стиль этих компонентов, чтобы выразить современный и динамичный бренд.

Реализация этого семинара по программированию спросила меня на время и разумные усилия

Полностью согласен

Ни согласен, ни согласен

совсем не согласен

Я хочу продолжать использовать материалы компонентов

Полностью согласен

Ни согласен, ни согласен

совсем не согласен

Если не указано иное, содержание этой страницы регулируется лицензией Creative Commons Assingment 4.0, а образцы кода регулируются лицензией Apache 2.0. Для получения дополнительной информации см. Правила сайта разработчиков Google. Java является зарегистрированным товарным знаком Oracle и/или ее аффилированных компаний.