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

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

Створіть обліковий запис розробника Google Play

Повідомте свою особисту інформацію, адресу на ваш вибір та свій пароль.

Прийміть загальні умови продажу (GTC).

Додайте гарну фотографію себе.

Створіть обліковий запис розробника Google Play

Процедура створення облікового запису розробника Google Play набагато простіша, ніж у Apple.

Підключіться зі своєю адресою Gmail.

Прийміть GTC.

Коригувати реєстраційні збори: один платіж у 25 євро, щоб опублікувати всі заявки на ваш вибір !

Повідомте інформацію, що стосується вашого облікового запису: Ім’я розробника, адреса електронної пошти та номер телефону.

Це відповів на ваше запитання ?

Дякуємо за коментарі, була проблема, щоб подати ваші коментарі. будь-ласка спробуйте пізніше.

Останнє оновлення 9 листопада 2021 року

Асоційовані статті

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

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

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

У семінарі програмування MDC-101 ви використовували два елементи компонентів матеріалів для створення сторінки з’єднання: текстові поля та кнопки, що включають анімацію “чорнила”. На цих базах збагатимо нашу програму, додавши навігацію, структуру та дані.

Цілі семінару

У цьому семінарі програмування ви створите для головного екрану для Святиня, Програма електронної комерції для продажу одягу та предметів для будинку. Цей екран буде містити:

• Вища смуга застосування
• Список продуктів у вигляді сітки

Зверніть увагу, що цей семінар з програмування був замінений на матеріал 3, за винятком скріншотів. Вони все -таки передають ту саму інформацію.

Цей семінар з програмування – другий з чотирьох семінарів, які допоможуть вам створити програму для продукту, який називається Sanctuary. Ми рекомендуємо вам дотримуватися всіх семінарів з програмування, щоб поступово виконати завдання. Ви знайдете свої семінари з програмування тут:

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

Матеріал компоненти матеріалу та підсистеми в цьому семінарі програмування

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

У цьому семінарі програмування ви будете використовувати компоненти за замовчуванням, надані матеріалом Flutter. Ви навчитесь налаштувати їх у розділі MDC-103: Використання тем дизайну матеріалу (колір, форми, висота та тип).

Як би ви оцінили свій рівень досвіду розвитку за допомогою Flutter ?

2. Налаштуйте середовище розвитку тремтіння

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

Ви можете запустити семінар з програмування на одному з наступних пристроїв:

• Пристрій Android або фізичний iOS, підключений до вашого комп’ютера та встановлений у режимі розробника.
• Симулятор iOS (xcode Tools для встановлення).
• Емулятор Android (який повинен бути налаштований в Android Studio).
• Браузер (Chrome необхідний для налагодження).
• Як робочий стіл Windows, Linux або MacOS. Ви повинні розробити свою програму на платформі, де ви плануєте її розгорнути. Наприклад, якщо ви хочете розробити програму Windows Desktop, ви повинні зробити це у Windows, щоб отримати доступ до відповідної ланцюга компіляції. Також дізнайтеся про конкретні вимоги до операційних систем, які детально описані на документах.тремтіння.Dev/Desktop.

3. Завантажте додаток вильоту для семінару програмування

Ви вже дотримувались семінару MDC-101 ?

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

Ви починаєте з нуля ?

Завантажте заявку на виїзд на семінар

Стартовий додаток знаходиться в матеріал-компонентному-кришнику-коделабс-102-starter_and_101-complete/mdc_100_series .

… Або клонуйте майстерню з Github

Щоб клонувати цей семінар з програмування з Github, запустіть наступні команди:

Git клон https: // github.Com/Material-Components/Material-Components-Flutter-CodeLabs.Git cd-components-components-flutter-codeLabs/mdc_100_series git reckout 102-starter_and_101-complete

Для допомоги див. Розділ клонування від Github

Виберіть правильну гілку

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

Git гілка -список

Щоб відобразити готовий код, перейдіть до 103-Starter_and_102-повної гілки .

Відкрийте проект та виконайте програму

1. Відкрийте проект у вигляді на ваш вибір.
2. Дотримуйтесь інструкцій щодо обраного видавцем. Вони доступні до пункту “запустіть додаток” (виконати додаток) на сторінці “Початок> тестовий драйв” (перші кроки> тест).

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

Тепер, коли екран з’єднання на місці, додамо кілька продуктів до програми.

4. Додайте більш високу панель додатків

На даний момент, якщо натиснути на кнопку “Наступний”, головний екран відображається з повідомленням “ви це зробили!”(Вам вдалося.)). Ідеальний. Однак наш користувач не має нічого робити і не знає, де він знаходиться в додатку. Щоб допомогти вам, настав час додати навігацію.

Там навігація відноситься до компонентів, взаємодій, візуальних показників та інформаційної архітектури, які дозволяють користувачам орієнтуватися в додатку. Це дозволяє виявити вміст та функції та легко виконувати завдання.

Щоб дізнатися більше, зверніться до статті, присвяченої навігації в інструкціях з дизайну матеріалів.

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

Ви можете знати цей елемент під назвою “навігаційна панель” під iOS, або просто “панель програми” або “заголовок”.

Щоб запропонувати користувачам швидкий доступ до інших дій, додамо більш високу панель додатків.

Додайте віджет AppBar

В будинку.Дарт, додайте AppBar до “Рашечки”, а потім видаліть Const Endienced:

Повернення скелі Const (// Todo: Додати смугу додатків (102) AppBar: AppBar (// TODO: Додати кнопки та назву (102)), 

ДодаванняAppbar У полі Appbar: Рашечки дозволяють нам отримати ідеальний і безкоштовний макет, залишаючи панель програми у верхній частині сторінки та нижче тіла.

Ешафот є важливим віджетом у MaterialApps. Він надає практичні API для відображення всіляких компонентів поточних питань, таких як панелі, панелі сповіщень “Snackbar” та елементи нижнього аркуша. Це навіть полегшує розміщення кнопки плаваючої дії.

Зверніться до документації Flutter, щоб дізнатися більше про ешафот.

Запишіть проект. Після оновлення святині натисніть Наступний (Наступний), щоб відобразити головний екран.

Елемент добре розташований, але йому не вистачає назви.

Додайте текстовий віджет

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

// TODO: Додати смугу додатків (102) AppBar: AppBar (// TODO: Додати кнопки та назва (102) Назва: Text Const ('Shrine'), // TODO: Додати кнопки Trailing (102) 

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

Можливо, ви помітили варіанти для кожної платформи. Система дизайну матеріалів враховує, що кожна платформа (Android, iOS, Web) відрізняється і що очікування користувачів різні. Наприклад, на iOS титули майже завжди зосереджені. Це поведінка за замовчуванням, надана Uikit. На Android вони вишикуються зліва. Тому, якщо ви використовуєте емулятор або пристрій Android, ваш заголовок повинен бути вирівняний зліва. У випадку з симулятором або пристроєм iOS він повинен бути зосереджений.

Щоб дізнатися більше, проконсультуйтеся з цією статтею про адаптацію до різних платформ із дизайном матеріалу.

Багато смуг додатків мають кнопку поруч із заголовком. Додайте значок меню до нашої програми.

Додайте кнопку Iconbutton на початку рядка

Завжди вдома.Дарт, визначте елемент Iconbutton для провідного поля: панелі додатків AppBar. (Помістіть його перед полем заголовка: Відповідно до початку від початку до кінця рядка):

 // TODO: Додайте кнопки та заголовок (102) Ведучий: Iconbutton (піктограма: значок const (піктограми.Меню, SemanticLabel: "Меню",), onpressed: () < print('Menu button'); >, )), 

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

Піктограма меню (також називається “Гамбургер”), з’являється у потрібному місці.

Клас Іконбуттон це практичний спосіб інтегрувати піктограми матеріалів у вашу програму. Вона використовує віджет Ікона. Флуттер має повну колекцію іконок у класі Ікони. Значки автоматично імпортуються відповідно до відображення каналу “const”.

Щоб дізнатися більше про клас значків, див. Документацію Flutter. Щоб дізнатися більше про віджет піктограми, див. Документацію Flutter.

Ви також можете додати кнопки в кінці лінії. У тремтінні ці кнопки називаються “діями”.

Умови початок І Кінець висловити значення читання, незалежно від зацікавленої мови. Коли ви працюєте язиком, читаючи зліва направо, наприклад, англійська, початок засоби зліва І Кінець засоби направо. Мовою, яка читає праворуч наліва, як арабська, термін початок засоби направо, І Кінець засоби зліва.

Щоб дізнатися більше про зміну інтерфейсу користувача, проконсультуйтеся з інструкціями з дизайну матеріалів щодо двонаправленості.

Додати дії

Є достатньо місця для двох інших елементів Iconbutton.

Додайте їх до екземпляра AppBar після заголовка:

// TODO: Додайте кнопки Trailing (102) Дії: [Iconbutton (піктограма: значок const (піктограми.Пошук, семантік -міто: «Пошук»,), Ontpresd: () < print('Search button'); >, ), Iconbutton (піктограма: значок const (ікони.Налаштування, семантік -міто: 'фільтр',), onpresd: () < print('Filter button'); >, ),], 

Запишіть проект. Ваш домашній екран повинен виникнути наступним чином:

Зараз додаток має кнопку на початку рядка, заголовок та дві дії праворуч. Панель додатків також впливаєпіднесення Через невеликий відтінок, що вказує на те, що він на іншому рівні, ніж вмісту.

У класі ікони поле Семантичний міто є поширеним способом додати інформацію про доступність до Flutter. Це система, дуже близька до формулювання вмісту Android та функціональності UIACCESSITIлоза на доступність iOSLabelbel . Ви знайдете його на багатьох курсах.

Інформація, що міститься в цьому полі, дозволяє надавати інформацію про читачів екрана на ролі цієї кнопки.

Якщо віджет не має смислового поля:, ви можете інкапсулювати його у віджет Семантика. Щоб дізнатися більше про віджет семантики, див. Документацію Flutter.

5. Додайте аркуш у сітку

Тепер, коли наша програма трохи структурована, давайте організувати його вміст, розміщуючи їх у файлах.

З картки є незалежними елементами, які відображають вміст та дії, пов’язані з даним предметом. Вони пропонують гнучкий спосіб представити подібний вміст у вигляді колекції.

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

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

Додайте віджет Gridview

Почнемо з додавання аркуша під верхню панель нанесення. В даний час віджет Карта (Аркуш) не містить достатньої кількості інформації, щоб помітно позиціонувати себе. Тому ми інкапсулюємо його у віджет Gridview.

Замініть центр у тілі елемента ешафот на віджет Gridview:

// TODO: Додайте вигляд сітки (102) Тіло: Gridview.Count (Crossxiscount: 2, Padding: Const Edgeinsts.Всі (16.0), Childaspectratio: 8.0/9.0, // TODO: побудувати сітку карт (102) Діти: [CARD ()],),), 

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

Змінна Crossxiscount: вказує кількість елементів на рядок. Ми хочемо отримати два стовпці.

L ‘поперечна вісь у Flutter відповідає осі, що ми не прокручуємо. Почуття прокрутки називається Основна вісь. Якщо ви використовуєте вертикальну прокрутку, як і випадок за замовчуванням з Gridview, поперечна вісь горизонтальна.

Щоб дізнатися більше, див. Сторінку, присвячену створенню макетів.

Поле прокладки: визначає вільний простір з чотирьох боків віджета Gridview. Звичайно, цей запас не видно в результаті елемента або під ним, оскільки жоден дитячий Gridview ще не був розміщений поруч із цим елементом.

Поле Childaspecto: ідентифікує розмір елементів у вигляді пропорцій (ширина на висоті).

За замовчуванням Gridview створює блоки однакового розміру.

У нас є аркуш, але він порожній. Додайте до цього аркуша віджети дітей.

Покладіть вміст

Листи повинні містити області для зображення, заголовок та вторинний текст.

Оновіть дітей з віджета Gridview:

// TODO: побудувати сітку карт (102) Діти: [карта (Clipbehavior: Clip.Antialias, Child: Column (перехрестя: перехрестя.Початок, діти: [Aspectratio (Aspectratio: 18.0/11.0, дитина: зображення.Активи ('активи/алмаз.png '),), прокладка (прокладка: const Edgeinsts.FromTrb (16.0, 12.0, 16.0, 8.0), Дитина: колонка (кроссаксалінія: кроссіссалінія.Початок, діти: [текст ('заголовок'), const rizebox (висота: 8.0), текст ('вторинний текст'),],),),),)]], 

Цей код додає віджет стовпців (стовпчик), який дозволяє мати дитячі віджети вертикально.

Параметр схрещування: поле визначає значення схрещування.Почати, що означає “вирівняти текст на” Початок лінії “” сторона “.

Віджет Співвідношення сторін Визначає пропорції відображеного зображення, незалежно від типу наданого зображення.

Елемент Прокладка Визначає маржу для тексту.

Два віджети Текст одна над іншою розміщується і розділена на вісім порожніх просторів (Розміщена скринька)). Ми створюємо інший елемент Стовпчик щоб дати їм внутрішні поля.

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

У цьому огляді ви можете бачити, що аркуш розташований з запасом, його куточки округлі, і він проектує тінь (представляє її висоту). Вся форма називається “контейнер” у системі проектування матеріалів (не плутати з класом віджетів, який називається контейнер).

Крім контейнера, усі елементи аркушів необов’язкові в матеріалі. Ви можете додати текст заголовка, наклейку або аватар, текст субтитрів, сепаратори і навіть прищі та піктограми.

Щоб дізнатися більше про зміст аркушів, проконсультуйтеся з цією статтею в інструкціях з дизайну матеріалів.

Листи, як правило, відображаються в колекції з іншими аркушами. Влаштуйте їх у вигляді колекції в сітці.

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.Count (Crossxiscount: 2, Padding: Const Edgeinsts.Всі (16.0), Childaspectratio: 8.0/9.0, діти: _buildgridcards (10) // замінити), 

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

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

Додайте дані про продукт

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

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

Імпорт 'Пакет: Флеттер/Матеріал.Дарт '; Імпорт пакету: Intl/Intl.Дарт '; Імпортувати модель/товар.Дарт '; Імпортувати модель/продукти_repository.Дарт '; 

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

// TODO: Зробіть колекцію карт (102) // замінити весь цей список методів _buildgridcards (контекст BuildContext) < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > Остаточна тема Themedata = тема.(контекст); Кінцевий форматтертерат формат = числовий формат.Simplecurrent (місцеві: приміщення.Localof (контекст).toString ()); Повернення продуктів.Карта ((продукт) < 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 в _buildgridcards () перед запуском компіляції:

// TODO: Додайте вигляд сітки (102) Тіло: Gridview.Count (Crossxiscount: 2, Padding: Const Edgeinsts.Всі (16.0), Childaspectratio: 8.0/9.0, діти: _buildgridcards (контекст) // код зміни), 

Перезавантажте гарячу програму.

Ви можете помітити, що ми не додаємо вертикального простору між файлами. Тому що у них є чотири поля вгорі та знизу.

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

Вироблені дані відображаються, але зображення оточені непотрібним простором. За замовчуванням зображення намальовані з полем Бокс визначений .Масштаб (у цьому випадку). Замініть це значення на .Fitwidth, щоб вона могла збільшити масштаб і видалити непотрібний простір.

Додайте поле підходить: як значення BoxFit.Fitwidth:

 // TODO: Відрегулюйте розмір коробки (102) Пристосування: BoxFit.Фітра, 

Наша продукція тепер ідеально відображається в додатку.

7. Вітаємо !

Наша програма пропонує основну роботу, що дозволяє користувачеві перейти від екрана підключення до головного екрану, де відображаються продукти. Кілька рядків коду було достатньо, щоб додати більш високу панель додатків (з заголовком та трьома кнопок) та файлами (щоб представити вміст нашої програми). Отриманий головний екран простий та функціональний, має основну структуру та корисний вміст.

Завершена версія програми MDC-102 доступна в 103-Starter_and_102-повій гілці .

Ви можете порівняти свою версію на сторінці із застосуванням цієї гілки.

Наступні кроки

За допомогою панелі додатків, аркуша, текстового поля та кнопки, розташованої у верхній частині сторінки, тепер ми використовували чотири основні компоненти бібліотеки Матеріалу Матеріал. Щоб дізнатися більше, див. Каталог матеріальних компонентів.

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

Реалізація цього семінару з програмування попросила мене на час та розумні зусилля

Повністю згоден

Ні згоден, ні згоден

взагалі не згоден

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

Повністю згоден

Ні згоден, ні згоден

взагалі не згоден

Якщо не вказано інше, зміст цієї сторінки регулюється креативним призначенням Commons 4.0, а зразки коду регулюються ліцензією Apache 2.0. Для отримання додаткової інформації див. Правила веб -сайту розробників Google. Java – зареєстрована торгова марка Oracle та/або її афілійованих компаній.