Създайте акаунт за разработчик на Google Play – Център за помощ – Pandasuite, MDC -102: Структура и оформление на материали | Google Codelabs

/ Електронен / 0 Comments

<h1>MDC-102: Структура на материала и оформление</h1>
<blockquote>Дизайнът на материалите предлага навигационни формати, които гарантират голяма лекота на използване. Един от най -видимите компоненти е горната лента на приложението.</blockquote>
<h2>Създайте акаунт за разработчици на Google Play</h2>
Информирайте личната си информация, адреса на вашия избор и паролата си.
Приемете общите условия за продажба (GTC).
Добавете хубава снимка на себе си.
<h2>Създайте акаунт за разработчици на Google Play</h2>
Процедурата за създаване на акаунт за разработчик на Google Play е много по -проста, отколкото в Apple.
Свържете се с вашия Gmail адрес.
Приемете GTC.
Коригирайте таксите за регистрация: Единично плащане от 25 евро, за да публикувате всички приложения по ваш избор !
Информирайте информацията, свързана с вашия акаунт: Име на разработчика, имейл адрес и телефонен номер.
Това отговори на въпроса ви ?
Благодаря ви за коментарите, че имаше проблем да изпратите вашите коментари. Моля, опитайте отново по-късно.
Последна актуализация на 9 ноември 2021 г
<h3>Свързани статии</h3>
<ul>
<li>Създайте приложение на Google Play Console</li>
<li>Генерирайте сертификата за Android P12</li>
<li>Експортирайте файла APK или AAB</li>
<li>Публикувайте приложение за Android</li>
<li>Публикувайте приложение за Android извън Play Store</li>
<li>Публикувайте в Google Play Store</li>
</ul>
<h2>MDC-102: Структура на материала и оформление</h2>
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/8c0dd3b666dcdb8_36.png?hl=fr” alt=”logo_components_color_2x_web_96dp.png” width=”” />
Компонентите на материалите (MDC) помагат на разработчиците да внедрят дизайн на материали. Проектиран от екип от инженери и специалисти по потребителски опит в Google, MDC предлага десетки елегантни и функционални компоненти на потребителския интерфейс. Той е достъпен за Android, iOS, мрежата и Flutter.материал.Io/развитие.
В работилницата за програмиране на MDC-101 сте използвали два елемента на компонента на материали, за да създадете страница за свързване: Текстови полета и бутони, включващи анимации &bdquo;мастило“. На тези бази нека обогатим нашето приложение чрез добавяне на навигация, структура и данни.
<h2>Цели на семинара</h2>
В тази работилница за програмиране ще създадете домашен екран за Светилище, заявление за електронна търговия за продажба на дрехи и предмети за къщата. Този екран ще съдържа:
<ul>
<li>По -висока лента за кандидатстване</li>
<li>Списък на продуктите под формата на мрежа</li>
</ul>
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/219fcb9db8bad064_36.png?hl=fr” alt=”Приложение за електронна търговия с по-висока лента за приложения и мрежа, пълна с продукти” width=”” />
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/dd79d882e2422adb_36.png?hl=fr” alt=”Приложение за електронна търговия с по-висока лента за приложения и мрежа, пълна с продукти” width=”” />
Моля, обърнете внимание, че този семинар за програмиране е заменен с материал 3, с изключение на екранните снимки. Те въпреки това предават същата информация.
Този семинар за програмиране е вторият от четирите работилници, които ще ви помогнат да създадете приложение за продукт, наречен Sanctuary. Препоръчваме ви да следвате всички работилници за програмиране, за да напреднете в задачите малко по малко. Тук ще намерите вашите програмни работилници:
<ul>
<li>MDC-101 Flutter: Основни принципи на материалните компоненти</li>
<li>MDC-103 Flutter: Използване на теми за дизайн на материала (цвят, форми, кота и тип)</li>
<li>MDC-104 Flutter: Разширени компоненти за дизайн на материали</li>
</ul>
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/91be5f7919ab5154_36.png?hl=fr” alt=”Приложение за електронна търговия, базирано на розова и кафява тема, с по-висока лента за приложение и асиметрична продуктова мрежа, която се превърта хоризонтално” width=”” />
<h2>Компоненти и подсистеми на материала на материала в тази работилница за програмиране</h2>
<ul>
<li>Горен</li>
<li>Решетки</li>
<li>Карти</li>
</ul>
В тази работилница за програмиране ще използвате компонентите по подразбиране, предоставени от материала Flutter. Ще се научите да ги персонализирате в секцията MDC-103: Използване на теми за дизайн на материала (цвят, форми, кота и тип).
<h4>Как бихте оценили нивото на опит в развитието си с Flutter ?</h4>
<h2>2. Конфигурирайте средата за развитие на Flutter</h2>
За този семинар имате нужда от два софтуера: Flutter SDK и издател.
Можете да стартирате работилницата по програмиране на едно от следните устройства:
<ul>
<li>Андроид или физическо iOS устройство, свързано с вашия компютър и зададено в режим на разработчик.</li>
<li>IOS симулатора (Xcode инструменти за инсталиране).</li>
<li>Android емулаторът (който трябва да бъде конфигуриран в Android Studio).</li>
<li>Браузър (хром е необходим за отстраняване на грешки).</li>
<li>Като Windows, Linux или MacOS работник. Трябва да разработите приложението си в платформата, където планирате да го разгърнете. Например, ако искате да разработите настолно приложение на Windows, трябва да го направите на Windows, за да получите достъп до съответната компилация на веригата. Научете и за специфичните изисквания за операционните системи, които са подробно описани на документи.трептене.Dev/Desktop.</li>
</ul>
<h2>3. Изтеглете приложението за заминаване за работилницата за програмиране</h2>
<h2>Вече сте следвали семинара MDC-101 ?</h2>
Ако сте завършили програмния семинар MDC-101, вашият код трябва да е готов да започне този семинар. Отидете на следващия етап: Добавете по -висока лента за нанасяне.
<h2>Започвате от нулата ?</h2>
<h3>Изтеглете приложението за заминаване на стартовия семинар</h3>
Стартовото приложение е в материала-компонент-флатер-коделаб-102-Starter_and_101-Complete/MDC_100_SERIES .
<h2>… Или клонирайте работилницата от GitHub</h2>
За да клонирате този семинар за програмиране от GitHub, изпълнете следните команди:
<pre>Git clone https: // github.Com/компоненти на материали/компоненти на материали.Git cd материали-компоненти-флатер-коделаби/mdc_100_series git кака</pre>
За помощ вижте раздела за клониране от GitHub
<h2>Изберете правилния клон</h2>
Семинарите за програмиране на MDC-101 на 104 разчитат един на друг. Така че, когато завършите кода за семинара MDC-102, той се превръща в началния код на работилницата MDC-103. Кодът е разделен на няколко клона, които можете да покажете списъка с тази команда:
Git клон -списък
За да покажете готовия код, отидете в клон 103-Starter_and_102-Complete .
<h2>Отворете проекта и изпълнете приложението</h2>
<ol>
<li>Отворете проекта в издателя по ваш избор.</li>
<li>Следвайте инструкциите относно избрания от вас издател, който сте избрали. Те са достъпни за параграфа &bdquo;Изпълни приложението“ (изпълнете приложението) на страницата за стартиране> Тест на устройството (Първи стъпки> Тест).</li>
</ol>
Успешна работа. Страницата за свързване на светилището от работилницата за програмиране на MDC-101 трябва да се показва на вашето устройство.
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/77c93e89ac594afe_36.png?hl=fr” alt=”Страница за връзка, включваща полетата”Nom d’utilisateur” et “Mot de passe”, et les boutons “Annuler” et “Suivant”” width=”” />
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/679775b6deb65c3f_36.png?hl=fr” alt=”Страница за връзка, включваща полетата”Nom d’utilisateur” et “Mot de passe”, et les boutons “Annuler” et “Suivant”” width=”” />
Сега, когато екранът за свързване е на мястото си, нека добавим някои продукти към приложението.
<h2>4. Добавете по -висока лента за нанасяне</h2>
За момента, ако щракнете върху бутона &bdquo;Следващ“, началният екран се показва със съобщението &bdquo;Направихте го!”(Успяхте.)). Перфектен. Нашият потребител обаче няма какво да прави и не знае къде се намира в заявлението. За да ви помогнем, е време да добавите навигация.
Там навигация се отнася до компоненти, взаимодействия, визуални индикатори и информационна архитектура, които позволяват на потребителите да се движат в приложение. Тя ви позволява да откривате съдържание и функции и лесно да изпълнявате задачи.
За да разберете повече, консултирайте се със статията, посветена на навигацията в инструкциите за проектиране на материали.
Дизайнът на материалите предлага навигационни формати, които гарантират голяма лекота на използване. Един от най -видимите компоненти е горната лента на приложението.
Може да знаете този елемент под името &bdquo;навигационна лента“ под iOS, или просто &bdquo;лента за кандидатстване“ или &bdquo;заглавка“.
За да предложим бърз достъп на потребителите до други действия, нека добавим по -висока лента за кандидатстване.
<h2>Добавете джаджа AppBar</h2>
В дома си.DART, Добавете AppBar към “скеле”, след което изтрийте подчертаното const:
<pre><code translate=”no” dir=”ltr”>Върнете Const Scaffold (// TODO: Добавяне на лента за приложения (102) AppBar: AppBar (// TODO: Добавяне на бутони и заглавие (102)),</code> </pre>
Добавянето наAppbar На полето на AppBar: Скелето ни позволява да получим перфектно и безплатно оформление, оставяйки лентата за приложения в горната част на страницата и под тялото.
Скеле е важна джаджа в MaterialApps. Той осигурява практически API за показване на всички видове компоненти на текущите въпроси, като панели, “Snackbar” ленти за уведомяване и елементи на долния лист. Дори улеснява поставянето на плаващ бутон за действие.
Консултирайте се с документацията на Flutter, за да научите повече за скелета.
Запишете проекта. След като светилището бъде актуализирано, щракнете върху Следващия (След това) за показване на началния екран.
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/fdda22f7ad3e128a_36.png?hl=fr” alt=”Екран, показващ”Vous avez réussi !”” width=”” />
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/7aac9159c56aa110_36.png?hl=fr” alt=”Екран, показващ”Vous avez réussi !”” width=”” />
Елементът е добре позициониран, но му липсва заглавие.
<h2>Добавете джаджа за текст</h2>
В дома си.DART, добавете заглавие към лентата за кандидатстване на AppBar:
<pre><code translate=”no” dir=”ltr”>// TODO: Добавяне на лента за приложения (102) AppBar: Appbar (// TODO: Добавяне на бутони и заглавие (102) Заглавие: Const Text (‘светилище’), // TODO: Добавете залежаващи бутони (102)</code> </pre>
Запишете проекта.
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/e45285cdb72b486d_36.png?hl=fr” alt=”Лента за кандидатстване, чието заглавие е светилище” width=”” />
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/392491678976939f_36.png?hl=fr” alt=”Лента за кандидатстване, чието заглавие е светилище” width=”” />
Може да сте забелязали вариации за всяка платформа. Системата за проектиране на материали отчита, че всяка платформа (Android, iOS, Web) е различна и че очакванията на потребителите са различни. Например, в iOS заглавията са почти винаги центрирани. Това е поведението по подразбиране, предоставено от Uikit. На Android те са облицовани отляво. Следователно, ако използвате емулатор или устройство с Android, заглавието ви трябва да бъде подравнено отляво. В случай на симулатор или iOS устройство, той трябва да бъде центриран.
За да разберете повече, консултирайте се с тази статия за адаптацията към различни платформи с дизайн на материали.
Много ленти за приложения имат бутон до заглавието. Добавете икона на менюто към нашето приложение.
<h2>Добавете бутон за иконбутон в началото на линията</h2>
Винаги в дома.DART, Определете елемент на IconButton за водещото поле: на лентата за приложения на AppBar. (Поставете го преди полето за заглавие: В съответствие с началото от началото на края на реда):
<pre> <code translate=”no” dir=”ltr”>// TODO: Добавяне на бутони и заглавие (102) Водещо: Iconbutton (Икона: Const Icon (Икони.Меню, SemanticLabel: &bdquo;Меню“,), Onpressed: () < print(‘Menu button’); >, )),</code> </pre>
Запишете проекта.
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/794577d0ea758040_36.png?hl=fr” alt=”лента за приложения със заглавие и икона на менюто за хамбургер” width=”” />
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/598cf2815d829b9b_36.png?hl=fr” alt=”лента за приложения със заглавие и икона на менюто за хамбургер” width=”” />
Иконата на менюто (наричана още “хамбургер”), се появява на желаното място.
Класа Iconbutton е практически начин за интегриране на икони на материали във вашето приложение. Тя използва джаджа Икона. Flutter има пълна колекция от икони в класната стая Икони. Иконите се импортират автоматично според картографиране на канали “const”.
За да научите повече за класа на иконите, вижте документацията на Flutter. За да научите повече за джаджата на иконата, вижте документацията на Flutter.
Можете също да добавите бутони в края на линията. В Flutter тези бутони се наричат &bdquo;действия“.
Условия начало И КРАЙ изразяват значението на четенето, независимо от съответния език. Когато работите на четене на език отляво надясно, като английски език, начало означава наляво И КРАЙ означава надясно. На език, който се чете отдясно на ляво, като арабски, терминът начало означава надясно, И КРАЙ означава наляво.
За да научите повече за обръщането на потребителския интерфейс, консултирайте се с инструкциите за проектиране на материала относно двупосочността.
<h2>Добавете действия</h2>
Има достатъчно място за два други елемента на иконбутона.
Добавете ги към екземпляра на AppBar след заглавието:
<pre><code translate=”no” dir=”ltr”>// TODO: Добавяне на заледни бутони (102) Действия: [Iconbutton (Икона: Const Icon (Икони.Търсене, SemanticLabel: ‘Search’,), Ontpresd: () < print(‘Search button’); >, ), Iconbutton (икона: const икона (икони.Tune, SemanticLabel: ‘Filter’,), OnPresd: () < print(‘Filter button’); >, ),],</code> </pre>
Запишете проекта. Вашият начален екран трябва да възникне, както следва:
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/d3a33ae1359e9801_36.png?hl=fr” alt=”Лента за приложения със светилище като меню за заглавие и хамбургер, както и иконите за изследване и персонализиране в края” width=”” />
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/a383f4dcd3267d2a_36.png?hl=fr” alt=”Лента за приложения със светилище като меню за заглавие и хамбургер, както и иконите за изследване и персонализиране в края” width=”” />
Приложението вече има бутон в началото на реда, заглавие и две действия вдясно. Лентата за кандидатстване също има ефект откота Поради лек нюанс, показващ, че е на различно ниво от това на съдържанието.
В клас икона полето Semanticlabel е често срещан начин за добавяне на информация за достъпност за трептене. Това е система, която е много близка до функционалността на съдържанието на Android и функционалността на uiaccessibility на iOS AccessibilityLabelbel . Ще го намерите в много курсове.
Информацията, съдържаща се в тази област.
Ако джаджата няма поле за семантика :, можете да го капсулирате в джаджа Семантика. За да научите повече за джаджата за семантика, вижте документацията на Flutter.
<h2>5. Добавете лист в мрежа</h2>
Сега, когато нашето приложение е малко по -структурирано, нека организираме съдържанието му, като ги поставяме във файлове.
The карти са независими елементи, които показват съдържанието и действията, свързани с даден предмет. Те предлагат гъвкав начин за представяне на подобно съдържание под формата на колекция.
За да разберете повече, вижте статията, посветена на файловете в инструкциите за проектиране на материали.
За да научите повече за джаджата на карти (лист), консултирайте се със статията за създаването на оформления във Flutter.
<h2>Добавете джаджа GridView</h2>
Да започнем с добавяне на лист под горната лента на приложението. В момента джаджата Карта (Лист) не съдържа достатъчно информация, за да се позиционирате видимо. Следователно ще го капсулираме в джаджа GridView.
Сменете центъра в тялото на елемента на скелета с джаджа GridView:
<pre><code translate=”no” dir=”ltr”>// TODO: Добавете изглед на мрежата (102) Тяло: GridView.Брой (Crossaxiscount: 2, подплънки: const edgeinsts.Всички (16.0), ChildAspectratio: 8.0/9.0, // TODO: Изградете мрежа от карти (102) деца: [card ()],),),</code> </pre>
Нека анализираме този код. Приспособлението на GRIVER извиква броя на производителя (), тъй като броят на елементите, които показва, може да се брои и не е безкраен. Но той се нуждае от допълнителна информация, за да определи оформлението си.
Променливата Crossaxiscount: Показва броя на елементите на ред. Искаме да вземем две колони.
L ‘напречна ос В Flutter съответства на оста, че не превъртаме. Чувството за превъртане се нарича Основна ос. Ако използвате вертикално превъртане, както е случаят по подразбиране с GridView, напречната ос е хоризонтална.
За да разберете повече, вижте страницата, посветена на създаването на оформления.
Полето за подплънки: Определя свободно пространство от четирите страни на джаджата GridView. Разбира се, този марж не се вижда в резултат на елемента или под него, тъй като до този момент все още не е поставен детски GridView за този елемент.
Полето Childaspecto: Идентифицира размера на елементите под формата на пропорции (ширина на височината).
По подразбиране GridView създава блокове с еднакъв размер.
Имаме лист, но той е празен. Добавете детски джаджи към този лист.
<h2>Поставете съдържанието</h2>
Листовете трябва да включват области за изображение, заглавие и вторичен текст.
Актуализирайте децата от джаджата GridView:
<pre><code translate=”no” dir=”ltr”>// TODO: Изградете мрежа от карти (102) деца: [карта (ClipBeHavior: Clip.Антиалии, дете: колона (CrossaxisAlignment: CrossaxisAlignment.Започнете, деца: [Aspectratio (Aspectratio: 18.0/11.0, дете: Изображение.Актив (‘активи/диамант.png ‘),), подплънки (подплънки: const edgeinsts.Fromltrb (16.0, 12.0, 16.0, 8.0), Дете: колона (кръстосана линия: CrossaxisAlignment.Започнете, деца: [Текст (&bdquo;Заглавие“), Const -SizedBox (височина: 8.0), текст (‘вторичен текст’),],),),],),)]],</code> </pre>
Този код добавя джаджа за колона (колона), която ви позволява да имате детски джаджи вертикално.
Параметърът на CrossAxisAlignment: Полето определя стойността на CrossAxisAlignment.Старт, което означава &bdquo;подравнете текста на&bdquo; Старт на линията “&bdquo; страна “.
Джаджата Съотношение Определя пропорциите на показаното изображение, независимо от типа на предоставеното изображение.
Елементът Подплънки Определя марж за текста.
Двете джаджи Текст една над друга се поставя и разделя от осем празни космически точки (Sizedbox)). Създаваме друг елемент Колона да им дадат вътрешни маржове.
Запишете проекта.
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/4ffb1e8e3bd8de3_36.png?hl=fr” alt=”Един елемент с изображение, заглавие и вторичен текст” width=”” />
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/3dd2be5afeb20072_36.png?hl=fr” alt=”Един елемент с изображение, заглавие и вторичен текст” width=”” />
В този преглед можете да видите, че листът е разположен с марж, ъглите му са закръглени и той проектира сянка (представлява нейната кота). Цялата форма се нарича “контейнер” в системата за проектиране на материали (да не се бърка с класа на джаджа, наречен контейнер).
Освен контейнера, всички елементи на листовете не са задължителни в материал. Можете да добавите текст за заглавие, стикер или аватар, текст на субтитри, сепаратори и дори пъпки и икони.
За да научите повече за съдържанието на чаршафите, консултирайте се с тази статия в инструкциите за проектиране на материали.
Листовете обикновено се показват в колекция с други листове. Подредете ги под формата на колекция в мрежа.
<h2>6. Създайте колекция от файлове</h2>
Когато на екран присъстват няколко листа, те са групирани в една или повече колекции. Файловете на колекция са Coplanar: те имат една и съща кота в покой (тоест, когато не са избрани или преместени, което няма да правим тук).
<h2>Създайте колекция от файлове</h2>
За момента нашият лист е разположен вътре в детското поле: GridView Grid. Това води до голямо количество вложен код, който може да бъде труден за четене. Нека превърнем тази част от кода във функция, позволяваща да генерираме колкото се може повече празни листове и да върнем списък с файлове.
Създайте частна функция над функцията build () (не забравяйте, че функциите, започващи с подчертаваща линия, са частни API):
<pre><code translate=”no” dir=”ltr”>// 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’), ], ), ), ], ), ); >, ); Карти за връщане; ></code> </pre>
Задайте файловете, генерирани в детското поле на джаджата GridView. не забравяй да Сменете всички елементи, съдържащи се в джаджата GridView с този нов код ::
<pre><code translate=”no” dir=”ltr”>// TODO: Добавете изглед на мрежата (102) Тяло: GridView.Брой (Crossaxiscount: 2, подплънки: const edgeinsts.Всички (16.0), ChildAspectratio: 8.0/9.0, деца: _buildgridcards (10) // заменете),</code> </pre>
Запишете проекта.
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/80f9295ef83cd7dd_36.png?hl=fr” alt=”Мрежа от елементи с изображение, заглавие и вторичен текст” width=”” />
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/3fcdcd16de1258b0_36.png?hl=fr” alt=”Мрежа от елементи с изображение, заглавие и вторичен текст” width=”” />
Картите присъстват, но те не показват нищо за момента. Дойде време да се добавят данни от продукта.
<h2>Добавете данни от продукта</h2>
Приложението съдържа някои продукти с изображения, имена и цени. Добавете това към джаджи, които вече са присъстващи във файла
След това в дома.DART, Импортирайте нов пакет и някои файлове, предоставени за модел на данни:
<pre><code translate=”no” dir=”ltr”>Импортирайте пакет: Flutter/Material.Стрела ‘; Импортирайте пакет: Intl/Intl.Стрела ‘; Импортирайте ‘модел/продукт.Стрела ‘; Импортирайте ‘модел/products_repository.Стрела ‘;</code> </pre>
И накрая, променете _buildgridcards (), за да извлечете информацията за продукта и да използвате тези данни във файловете:
<pre><code translate=”no” dir=”ltr”>// TODO: Направете колекция от карти (102) // заменете целия този списък с методи _BuildGridCards (BuildContext контекст) < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > Окончателна тема на темата = тема.на (контекст); Краен номер на номер на формат = номер на формат.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, ), ], ), ), ), ], ), ); >)).Толист (); ></code> </pre>
Забелязано : Изчакайте, преди да стартирате компилацията и изпълнението. Остава модификация, която трябва да се направи.
За да форматираме текста, използваме данни за темата Тематични от стойността BuildContext текущ.
За да научите повече за форматирането на текста, консултирайте се със статията по типография в инструкциите за дизайн на материала. За да научите повече за форматирането от тема, продължете след този работилник по програмиране с MDC-103: Използване на теми за дизайн на материали (цвят, форми, кота и тип).
Също така променете функцията build (), за да предава стойността BuildContext при _buildgridcards () преди да стартирате компилацията:
<pre><code translate=”no” dir=”ltr”>// TODO: Добавете изглед на мрежата (102) Тяло: GridView.Брой (Crossaxiscount: 2, подплънки: const edgeinsts.Всички (16.0), ChildAspectratio: 8.0/9.0, деца: _buildgridcards (контекст) // Промяна на кода),</code> </pre>
Рестартирайте горещото приложение.
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/5e00c256e1c3c9f4_36.png?hl=fr” alt=”Мрежа от елементи с изображение, заглавие и цена” width=”” />
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/5afa8b0e625e6b0c_36.png?hl=fr” alt=”Мрежа от елементи с изображение, заглавие и цена” width=”” />
Може да забележите, че ние не добавяме вертикално пространство между файловете. Защото имат четири маржа отгоре и отдолу имат.
Запишете проекта.
Показват се произведените данни, но изображенията са заобиколени от ненужно пространство. По подразбиране изображенията се изтеглят с полето Boxfit дефинирани .Scaledown (в този случай). Заменете тази стойност с .Fitwidth, за да може тя да увеличи и да премахне ненужното пространство.
Добавете полето за прилягане: като стойността на Boxfit.Fitwidth:
<pre> <code translate=”no” dir=”ltr”>// TODO: Регулирайте размера на кутията (102) Fit: Boxfit.fitwidth,</code> </pre>
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/219fcb9db8bad064_36.png?hl=fr” alt=”Мрежа от статии с изрязано изображение, заглавието на продукта и цената” width=”” />
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/dd79d882e2422adb_36.png?hl=fr” alt=”Мрежа от статии с изрязано изображение, заглавието на продукта и цената” width=”” />
Нашите продукти вече се показват перфектно в приложението.
<h2>7. Честито !</h2>
Нашето приложение предлага основна операция, позволяваща на потребителя да премине от екрана за връзка към начален екран, където се показват продуктите. Няколко реда код бяха достатъчни, за да добавите по -висока лента за приложение (със заглавие и три бутона) и файлове (за да представите съдържанието на нашето приложение). Полученият начален екран е прост и функционален и има основна структура и използваемо съдържание.
Завършената версия на приложението MDC-102 е достъпна в клон 103-Starter_and_102-Complete .
Можете да сравните вашата версия на страницата с приложението на този клон.
<h2>Следващи стъпки</h2>
С лентата за приложения, листът, текстовото поле и бутона, разположени в горната част на страницата, сега сме използвали четири основни компонента на библиотеката на материала Flutter. За да разберете повече, вижте каталога на материалните компоненти.
Дори ако нашето приложение работи перфектно, то не отразява идентичността на марката или определена гледна точка. В работилницата MDC-103: Използване на теми за дизайн на материали (цвят, форми, кота и тип), ние ще персонализираме стила на тези компоненти, за да изразим модерна и динамична марка.
<h4>Реализацията на този семинар по програмиране ме попита за известно време и разумни усилия</h4>
Напълно съм съгласен
Нито се съгласяват, нито се съгласяват
изобщо не съм съгласен
<h4>Искам да продължа да използвам компоненти на материали</h4>
Напълно съм съгласен
Нито се съгласяват, нито се съгласяват
изобщо не съм съгласен
Освен ако не е посочено друго, съдържанието на тази страница се управлява от лиценз на Creative Commons Assice 4.0 и кодовите проби се управляват от лиценз Apache 2.0. За повече информация вижте правилата на сайта на Google Developers. Java е регистрирана търговска марка на Oracle и/или неговите свързани компании.

Създайте акаунт за разработчик на Google Play – Център за помощ – Pandasuite, MDC -102: Структура и оформление на материали | Google Codelabs

Leave a Reply Cancel reply