MDC-102：材料結構和佈局

材料設計提供導航格式，可確保極大的使用易用. 最明顯的組件之一是上申請欄.

創建Google Play開發人員帳戶

告知您的個人信息，您選擇的地址和密碼.

接受一般銷售條件（GTC）.

添加自己的照片.

創建Google Play開發人員帳戶

創建Google Play開發人員帳戶的過程比Apple要簡單得多.

與您的Gmail地址聯繫.

接受GTC.

調整註冊費：一筆25歐元的付款以發布您選擇的所有申請 !

告知與您的帳戶有關的信息：開發人員名稱，電子郵件地址和電話號碼.

這回答了您的問題 ?

謝謝您的評論，提交您的評論存在問題. 請稍後再試.

最後更新於2021年11月9日

相關文章

• 在Google Play遊戲機上創建應用程序
• 生成Android P12證書
• 導出APK或AAB文件
• 發布Android應用程序
• 在Play商店外發布Android應用
• 在Google Play商店上發布

MDC-102：材料結構和佈局

材料組件（MDC）可幫助開發人員實施材料設計. MDC由Google的工程師和用戶體驗專家團隊設計，提供數十個優雅且功能強大的用戶界面組件. 它適用於Android，iOS，網絡和顫動.材料.IO/開發.

在MDC-101編程研討會中，您使用了兩個材料組件元素來創建一個連接頁面：包含“墨水”動畫的文本字段和按鈕. 在這些基礎上，讓我們通過添加導航，結構和數據來豐富我們的應用程序.

車間目標

在這個編程研討會中，您將為您創建一個主屏幕 神社, 電子商務申請，用於出售房屋的服裝和物品. 此屏幕將包含：

• 更高的應用程序欄
• 網格形式的產品列表

請注意，此編程研討會由材料3取代，除了屏幕截圖. 儘管如此，他們傳達了相同的信息.

這個編程研討會是四個研討會中的第二個研討會，它將幫助您創建一個名為Sanctuary的產品的應用程序. 我們建議您關注所有編程研討會，以便一點一點地完成任務. 您將在這裡找到您的編程研討會：

• MDC-101顫動：材料組件的基本原理
• MDC-103顫音：使用材料設計的主題（顏色，形狀，高程和類型）
• MDC-104顫音：高級材料設計組件

在此編程研討會中

• 上
• 網格
• 牌

在這個編程研討會中，您將使用材料顫動提供的默認組件. 您將學習在MDC-103部分中自定義它們：使用材料設計的主題（顏色，形狀，高程和類型）.

您將如何評估顫抖的發展水平 ?

2. 配置撲動的開發環境

對於此研討會，您需要兩個軟件：Flutter SDK和一個發布者.

您可以在以下設備之一上運行編程研討會：

• 連接到您的計算機並設置為開發人員模式的Android或物理iOS設備.
• iOS模擬器（要安裝的Xcode工具）.
• Android模擬器（必須在Android Studio中配置）.
• 瀏覽器（調試需要鍍鉻）.
• 作為Windows，Linux或MacOS桌面. 您必須在計劃部署的平台上開發應用程序. 例如，如果您想開發Windows桌面應用程序，則必須在Windows上進行操作以訪問適當的彙編鏈. 還了解操作系統的特定要求，這些要求已詳細介紹.撲.開發/桌面.

3. 下載用於編程研討會的出發應用程序

您已經遵循了MDC-101研討會 ?

如果您已經完成了MDC-101編程研討會，則應準備開始此研討會. 轉到下一階段： 添加更高的應用程序欄.

你從頭開始 ?

下載開始的研討會出發申請

啟動應用程序在材料 – compontent-flutter-codelabs-102-starter_and_101-complete/mdc_100_series中 .

…或從Github克隆研討會

要從GitHub克隆這個編程研討會，請運行以下命令：

git克隆https：// github.com/材料組件/材料組件 - 弗洛特 - 代碼塔.git cd材料 - 組件 - 弗洛特 - 庫賽/mdc_100_series git neckout 102-starter_and_101-comment

尋求幫助，請參閱GitHub的克隆部分

選擇正確的分支

104的MDC-101編程研討會. 因此，當您完成MDC-102研討會的代碼時，它將成為MDC-103車間的起始代碼. 該代碼分為幾個分支，您可以使用此命令顯示列表：

git分支 – 名單

要顯示完成的代碼，請轉到103 starter_and_102 complete分支 .

打開項目並執行應用程序

1. 在您選擇的發布者中打開項目.
2. 遵循有關您選擇的發布者的說明. 它們可以在“運行app”段落（執行應用程序）>“啟動”>“測試驅動器”頁面（第一步>測試）上訪問。.

成功的操作. MDC-101編程研討會中的“避難所連接”頁面必須在您的設備上顯示.

現在，連接屏幕到位，讓我們在應用程序中添加一些產品.

4. 添加更高的應用程序欄

目前，如果您單擊“下一個”按鈕，則顯示主屏幕帶有消息。!“（你成功了.））. 完美的. 但是，我們的用戶無事可做，也不知道他在應用程序中的位置. 為了幫助您，是時候添加導航了.

那裡 導航 指的是允許用戶在應用程序中導航的組件，交互，視覺指示器和信息體系結構. 它使您可以發現內容和功能，並輕鬆執行任務.

要了解更多信息，請諮詢有關材料設計說明中專門導航的文章.

材料設計提供導航格式，可確保極大的使用易用. 最明顯的組件之一是上申請欄.

您可能會在iOS下的名稱“導航欄”或“應用程序欄”或“標頭”下知道此元素.

要為用戶快速訪問其他操作，讓我們添加更高的應用程序欄.

添加一個Appbar小部件

在家.飛鏢，在“腳手架”中添加一個Appbar，然後刪除const突出顯示：

返回cont const腳手架（// todo：添加app bar（102）appbar：appbar（// todo：添加按鈕和標題（102））, 

加法Appbar 在Appbar字段：腳手架使我們能夠獲得完美而免費的佈局，將應用程序欄放在頁面頂部和身體下方.

腳手架 是材料應用中的重要小部件. 它提供了實用的API來顯示各種當前事項組件，例如面板，“ Snackbar”通知欄和底部紙元素. 它甚至促進了浮動動作按鈕的放置.

諮詢撲朔迷離的文檔以了解有關腳手架的更多信息.

記錄項目. 神社更新後，單擊 下一個 （下面）顯示主屏幕.

該元素的位置很好，但缺乏標題.

添加文字小部件

在家.飛鏢，在Appbar應用程序欄中添加標題：

// todo：添加應用程序欄（102）appbar：appbar（// todo：添加按鈕和標題（102）標題：const text（'shrine'），// todo：添加尾隨按鈕（102） 

記錄項目.

您可能已經註意到每個平台的變化. 材料設計系統考慮到每個平台（Android，iOS，Web）不同，並且用戶期望不同. 例如，在iOS上，標題幾乎總是以中心為中心. 這是Uikit提供的默認行為. 在Android上，它們在左邊排成一列. 因此，如果您使用仿真器或Android設備，則應在左側對齊您的標題. 對於模擬器或iOS設備，必須將其集中.

要了解更多信息，請諮詢本文有關適應不同平台的材料設計的文章.

許多應用程序欄在標題旁邊有一個按鈕. 在我們的應用程序中添加菜單圖標.

在行開始時添加一個iConbutton按鈕

總是在家裡.飛鏢，為領先字段定義一個iConbutton元素：Appbar應用程序欄. （將其放在標題字段之前：按照從開始到線結束的開始）：

 // todo：添加按鈕和標題（102）領導：iconbutton（圖標：const iCon（圖標）.菜單，semanticlabel：“菜單”，），onpressed ：（） < print('Menu button'); >, ））, 

記錄項目.

菜單圖標（也稱為“漢堡”）出現在所需的位置.

班上 Iconbutton 是將材料圖標集成到應用程序的實用方法. 她使用一個小部件 圖示. Flutter在課堂上有完整的圖標集合 圖示. 圖標是根據“ const”頻道映射自動導入的.

要了解有關圖標類別的更多信息，請參閱“顫音文檔”. 要了解有關圖標小部件的更多信息，請參閱flutter文檔.

您還可以在行末端添加按鈕. 在顫動中，這些按鈕稱為“動作”.

術語 開始 和 結尾 表達閱讀的含義，無論相關語言如何. 當您用舌頭從左到右閱讀時，例如英語, 開始 方法 向左轉 和 結尾 方法 向右. 用從右至左讀的語言，如阿拉伯語，該術語 開始 方法 向右, 和 結尾 方法 向左轉.

要了解有關用戶界面逆轉的更多信息，請諮詢有關雙向的材料設計說明.

添加動作

還有足夠的空間容納其他兩個Iconbutton元素.

標題之後，將它們添加到Appbar實例中：

// todo：添加尾隨按鈕（102）操作：[iconbutton（圖標：const iCon（圖標）.搜索，semanticlabel：'search'），anttpresd ：（） < print('Search button'); >, ），Iconbutton（圖標：const Icon（圖標）.調子，semanticlabel：“ filter”，onpresd ：（） < print('Filter button'); >, ），], 

記錄項目. 您的主屏幕應如下：

該應用程序現在在行開始時有一個按鈕，標題和右邊的兩個動作. 應用欄也有海拔 由於略有陰影，表明它與內容的水平不同.

在圖標類中，該字段 Semanticlabel 是添加可訪問性信息以飄動的常見方法. 它是一個非常靠近iOS可訪問性的android內容措辭和uiacoccessossibility Labelbel上的系統 . 您會在許多課程中找到它.

該字段中包含的信息使得在屏幕讀取器上提供有關此按鈕角色的信息.

如果小部件沒有Semanticlabel字段：，您可以將其封裝在小部件中 語義. 要了解有關語義小部件的更多信息，請參閱flutter文檔.

5. 在網格中添加一張紙

現在我們的應用程序更加結構化，讓我們通過將其放置在文件中來組織其內容.

這 牌 是顯示與給定主題相關的內容和動作的獨立元素. 他們提供了一種靈活的方式，以收藏的形式呈現相似的內容.

要了解更多信息，請參閱材料設計說明中專門介紹文件的文章.

要了解有關卡窗口小部件（表）的更多信息，請諮詢有關撲朔迷離的佈局的文章.

添加GridView小部件

讓我們從上限欄下添加一張紙首先. 目前，小部件 卡片 （表）沒有足夠的信息來明顯地定位自己. 因此，我們將將其封裝在小部件中 網格視圖.

用GridView小部件代替腳手架元件正文中的中心：

// todo：添加網格視圖（102）身體：GridView.計數（CrossaxIscount：2，填充：const Edgeinsts.全部（16.0），兒童光譜：8.0/9.0，// todo：建立卡片（102）兒童的網格：[card（）]，），），）, 

讓我們分析此代碼. Griver小部件稱為製造商Count（），因為它顯示的元素數量可以計數，並且不是無限的. 但是他需要其他信息來定義他的佈局.

crossaxiscount變量：指示每行元素的數量. 我們想獲得兩列.

L’橫軸 在顫動中，我們不滾動的軸對應. 滾動感被稱為 主軸. 如果您使用垂直滾動，以及帶有GridView的默認情況，則橫軸是水平的.

要了解更多信息，請參閱專門創建佈局的頁面.

填充字段：定義GridView小部件四個側面的自由空間. 當然，由於該元素或下方的元素不可見，因為目前尚未將這個元素旁邊放置在此元素旁邊.

Childaspecto字段：以比例的形式識別元素的大小（高度寬度）.

默認情況下，GridView創建了相同大小的塊.

我們有一張床單，但它是空的. 將孩子的小部件添加到這張紙上.

放置內容

床單必須包括圖像，標題和次要文本的區域.

更新Gridview小部件的孩子：

// todo：建立卡片網格（102）兒童：[卡片（Clipbehavior：剪輯.反式，兒童：柱（交叉施加：交叉施法.開始，孩子：[expactratio（expackratio：18.0/11.0，孩子：圖像.資產（'資產/鑽石.png'），），填充（填充：const edgeinsts.Fromltrb（16.0，12.0，16.0，8.0），兒童：列（Crossaxisalignment：CrossaxisAlignment.開始，兒童：[text（'title'），const sizizebox（高度：8.0），文本（'sendary Text'），]，），），]，），]]], 

此代碼添加了一個列窗口小部件（列），該小部件允許您垂直具有孩子的小部件.

CrossaxIsalignment參數：字段指定交叉分解值.啟動，這意味著“將線條開始”’side“對齊文本”.

小部件 expactratio 定義顯示圖像的比例，無論提供的圖像類型如何.

元素 填充 定義文本的邊距.

兩個小部件 文字 一個上方放置並由八個空空間分開（小盒子））. 我們創建另一個元素 柱子 給他們內部邊緣.

記錄項目.

在此概述中，您可以看到床單上有邊緣，其拐角處圓潤，並投射出陰影（代表其高程）. 整個形式在材料設計系統中稱為“容器”（不要與稱為容器的小部件類混淆）.

除了容器之外，所有床單的所有元素都是可選的材料. 您可以添加標題文字，貼紙或化身，字幕文本，分隔符，甚至是丘疹和圖標.

要了解有關紙張內容的更多信息，請在材料設計說明中諮詢本文.

這些床單通常顯示在包含其他床單的系列中. 以網格的形式排列它們.

6. 創建文件集合

當屏幕上有幾張紙時，它們會分組為一個或多個集合. 集合的文件是共面的：它們在靜止時具有相同的高程（也就是說，當他們沒有被選中或移動時，我們將不會在這裡進行）.

創建文件集合

目前，我們的表格位於兒童場內：Gridview Grid. 這導致大量嵌套代碼可能難以閱讀. 讓我們將代碼的這一部分轉換為一個函數，允許根據需要生成盡可能多的空床單並返回文件列表.

在build（）函數上方創建一個私有函數（請記住，從下劃線開始的函數是私有API）：

// todo：製作卡片（102）列表_buildgridcard（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.計數（CrossaxIscount：2，填充：const Edgeinsts.全部（16.0），兒童光譜：8.0/9.0，兒童：_BuildGridCard（10）//替換）, 

記錄項目.

這些卡存在，但目前沒有顯示任何東西. 是時候添加產品數據了.

添加產品數據

該應用程序包含一些帶有圖像，名稱和價格的產品. 將其添加到文件中已經存在的小部件

然後在家裡.飛鏢，導入一個新軟件包，並為數據模型提供了一些文件：

導入'包：顫音/材料.飛鏢';導入軟件包：INTL/INTL.飛鏢';導入型號/產品.飛鏢';導入'型號/products_repository.飛鏢'; 

最後，修改_buildGridCards（）檢索產品信息並在文件中使用此數據：

// todo：製作卡片（102）//替換整個方法列表_buildgridcards（buildContext上下文） < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > 最終主題主題=主題.（上下文）;最終號碼Formatter = numberFormat.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, ), ], ), ), ), ], ), ); >））.tolist（）; > 

注意到 ：等待啟動彙編和執行. 仍有一個修改.

要格式化文本，我們使用主題數據 主題 從價值 buildContext 當前的.

要了解有關文本格式的更多信息，請在材料設計說明中諮詢有關版式的文章. 要了解有關從主題格式化的更多信息，請在使用MDC-103的編程研討會之後繼續：使用材料設計的主題（顏色，形狀，高程和類型）.

還要修改構建（）函數以傳輸值 buildContext 在啟動彙編之前，請訪問_buildgridcards（）：

// todo：添加網格視圖（102）身體：GridView.計數（CrossaxIscount：2，填充：const Edgeinsts.全部（16.0），兒童光譜：8.0/9.0，兒童：_BuildGridCards（上下文）//更改代碼）, 

重新啟動熱應用.

您可能會注意到我們不會在文件之間添加垂直空間. 因為它們的頂部和底部有四個邊距.

記錄項目.

顯示了產生的數據，但圖像被不必要的空間包圍. 默認情況下，圖像是用字段繪製的 BoxFit 定義 .Scaledown（在這種情況下）. 用 .fitwidth，以便她可以放大並刪除不必要的空間.

添加一個合適的字段：像BoxFit值一樣.fitwidth：

 // todo：調整盒子尺寸（102）擬合：BoxFit.fitwidth, 

現在，我們的產品已完美地顯示在應用程序中.

7. 恭喜 !

我們的應用程序提供了基本操作，允許用戶從連接屏幕到顯示產品的主屏幕. 幾行代碼足以添加更高的應用程序欄（帶有標題和三個按鈕）和文件（介紹我們應用程序的內容）. 獲得的主屏幕非常簡單且功能正常，並且具有基本結構和可用內容.

MDC-102應用程序的完整版本可在103 starter_and_102-complete分支中找到 .

您可以將頁面上的版本與此分支的應用進行比較.

以下步驟

使用應用程序欄，表格，文本字段和位於頁面頂部的按鈕，我們現在使用了材料撲波庫的四個主要組件. 要了解更多信息，請參閱材料組件的目錄.

即使我們的應用程序正常運行，它也不能反映品牌標識或特定的觀點. 在MDC-103研討會中：使用材料設計的主題（顏色，形狀，高程和類型），我們將個性化這些組件的樣式，以表達現代而動態的品牌.

這個編程研討會的實現要求我花時間和合理的努力

完全同意

既不同意，也不同意

根本不同意

我想繼續使用材料組件

完全同意

既不同意，也不同意

根本不同意

除非另有說明，否則此頁面的內容受創意共享作業4許可的約束.0，代碼樣本由Apache 2許可證管理.0. 有關更多信息，請參閱Google開發人員網站的規則. Java是Oracle和/或其附屬公司的註冊商標.