[譯] MDC-101 Flutter：Material Components（MDC）基礎（Flutter）

時間 2019-11-17

標籤 mdc flutter material components 基礎简体版

原文原文鏈接

原文地址：MDC-101 Flutter: Material Components (MDC) Basics (Flutter)

原文做者：codelabs.developers.google.com

譯文出自：掘金翻譯計劃

本文永久連接：github.com/xitu/gold-m…

譯者：DevMcryYu

MDC-101 Flutter：Material Components（MDC）基礎（Flutter）

MDC-101 Flutter：Material Components（MDC）基礎（Flutter）

MDC 102 Flutter：Material 結構和佈局

MDC 103 Flutter：Material Theming 的顏色、形狀、高度和類型

MDC 104 Flutter：Material 高級組件

1. 介紹

什麼是 Material Design 和 Material Components for Flutter？

Material Design 是一個用於構建醒目、美觀的數字產品的系統。經過在一套統一的原則和組件下將風格、品牌、交互和動做結合起來，產品團隊得以釋放其極大的設計潛能。html

Material Components for Flutter（MDC-Flutter）將設計和工程與組件庫結合在一塊兒，從而在各類應用和平臺之間建立統一的用戶體驗。隨着 Material Design 系統的發展，這些組件進行了更新以確保統一的像素級的完美實現，並遵循 Google 的前端開發標準。MDC 一樣適用於 Android、iOS 和 Web。前端

在本教程中，你將使用多個 MDC Flutter 組件來構建一個登錄頁面。android

你將構建一個

本教程是四個教程裏的第一個，它將指導你構建一款名爲 Shrine —— 一個銷售服裝和家居用品的電子商務應用程序。它將演示如何使用 MDC-Flutter 自定義組件來體現任何品牌和風格。ios

在本教程中，你將爲 Shrine 構建一個包含如下內容的登錄頁面：git

一個 Shrine 的 logo
應用名稱（Shrine）
兩個文本框，一個用於輸入用戶名，另外一個用來輸入密碼
兩個按鈕，一個用於「Cancel」，另外一個用於「Next」

相關教程能夠在如下位置找到：github

在 MDC-104 的最後，你將會構建一個以下所示的應用：後端

本教程中用到的 MDC 組件

Text field
Button
Ripple

在這個教程，你將使用由 MDC-Flutter 提供的默認組件。你將在 MDC 103 Flutter：Material Theming 的顏色、形狀、高度和類型中學習如何定製它們。bash

2. 安裝 Flutter 環境

前提條件

要開始使用 Flutter 開發移動應用程序，你須要：app

Flutter SDK
裝有 Flutter 插件的 IntelliJ IDE，或者你喜歡的代碼編輯器

Flutter 的 IDE 工具適用於 Android Studio，IntelliJ IDEA Community（免費）和 IntelliJ IDEA Ultimate。框架

要在 iOS 上構建和運行 Flutter 應用程序，你須要知足如下要求：

運行 macOS 的計算機
Xcode 9 或更新版本
iOS 模擬器，或者 iOS 物理設備

要在 Android 上構建和運行 Flutter 應用程序，你須要知足如下要求：

運行 macOS，Windows 或者 Linux 的計算機
Android Studio
Android 模擬器（隨 Android Studio 一塊兒提供）或 Android 物理設備

獲取詳細的 Flutter 安裝信息

重要提示： 若是鏈接到計算機的 Android 手機上出現「容許 USB 調試」對話框，請啓用始終容許今後計算機選項，而後單擊肯定。

在繼續本教程以前，請確保你的 SDK 處於正確的狀態。若是以前安裝過 Flutter，則使用 flutter upgrade 來確保 SDK 處於最新版本。

flutter upgrade
複製代碼

運行 flutter upgrade 將自動運行 flutter doctor。若是這是首次安裝 Flutter 且不需升級，那麼請手動運行 flutter doctor。查看顯示的全部檢查標記；這將會下載你須要的任何缺乏的 SDK 文件，並確保你的計算機配置無誤以進行 Flutter 的開發。

flutter doctor
複製代碼

3. 下載教程初始應用程序

下載初始程序

此入門程序位於 material-components-flutter-codelabs-101-starter/mdc_100_series 目錄中。

...或者從 GitHub 克隆它

要從 GitHub 克隆此項目，請運行如下命令：

git clone https://github.com/material-components/material-components-flutter-codelabs.git
cd material-components-flutter-codelabs
git checkout 101-starter
複製代碼

更多幫助：從 GitHub 上克隆存儲庫

正確的分支

教程 MDC-101 到 104 連續構建。因此當你完成 101 的代碼後，它將變成 102 教程的初始代碼！代碼被分紅不一樣的分支，你可使用如下命令將它們所有列出：

git branch --list

要查看完整代碼，請切換到 102-starter_and_101-complete 分支。

創建你的項目

如下步驟默認你使用的是 Android Studio (IntelliJ)。

建立項目

在終端中，導航到 material-components-flutter-codelabs
運行 flutter create mdc_100_series

打開項目

打開 Android Studio。
若是你看到歡迎頁面，單擊 打開已有的 Android Studio 項目。

導航到 material-components-flutter-codelabs/mdc_100_series 目錄並單擊打開，這將打開此項目。

在構建項目一次以前，你能夠忽略在分析中見到的任何錯誤。

在左側的項目面板中，刪除測試文件 ../test/widget_test.dart

若是出現提示，安裝全部平臺和插件更新或 FlutterRunConfigurationType，而後從新啓動 Android Studio。

提示： 確保你已安裝 Flutter 和 Dart 插件。

運行初始程序

如下步驟默認你在 Android 模擬器或設備上進行測試。你也能夠在 iOS 模擬器或設備上進行，只要你安裝了 Xcode。

選擇設備或模擬器。

若是 Android 模擬器還沒有運行，請選擇 Tools -> Android -> AVD Manager 來建立您設備並啓動模擬器。若是 AVD 已存在，你能夠直接在 IntelliJ 的設備選擇器中啓動模擬器，以下一步所示。

（對於 iOS 模擬器，若是它還沒有運行，經過選擇 Flutter Device Selection -> Open iOS Simulator 來在你的開發設備上啓動它。）

啓動 Flutter 應用：

在你的編輯器窗口頂部尋找 Flutter Device Selection 下拉菜單，而後選擇設備（例如，iPhone SE / Android SDK built for ）。
點擊運行圖標（

）。

若是你沒法成功運行此應用程序，停下來解決你的開發環境問題。嘗試導航到 material-components-flutter-codelabs；若是你在終端中下載 .zip 文件，導航到 material-components-flutter-codelabs-... 而後運行 flutter create mdc_100_series。

成功！Shrine 的初始登錄代碼應該在你的模擬器中運行了。你能夠看到 Shrine 的 logo 和它下面的名稱 "Shrine"。

若是你看到任何有關 pubspec 已被編輯的警告（提示獲取依賴項），不要管他。當你按下運行按鈕時，它會爲你運行 flutter packages get！

flutter packages get 會安裝你在 pubspec.yaml 文件中列出的依賴項。你能夠編寫你本身的包以在 Pub 上發佈。本系列教程使用 shrine_images 自定義包來顯示你將在 MDC-102 看到的產品圖像。

flutter packages get 調用底層 Dart pub 包管理器來安裝 Flutter 應用程序的全部依賴項。本系列教程的產品圖像使用自定義 shrine_images 包。

有關更多包的信息，參閱使用包。

讓咱們來看看代碼。

`login.dart` 中的小部件

打開 login.dart。裏面應該包含：

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // TODO：添加文本編輯控制器（101）
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: EdgeInsets.symmetric(horizontal: 24.0),
          children: <Widget>[
            SizedBox(height: 80.0),
            Column(
              children: <Widget>[
                Image.asset('assets/diamond.png'),
                SizedBox(height: 16.0),
                Text('SHRINE'),
              ],
            ),
            SizedBox(height: 120.0),
            // TODO：使用 AccentColorOverride 包裝 Username（103）
            // TODO：刪除填充：真值（103）
            // TODO：使用 AccentColorOverride 包裝 Password（103）
            // TODO：添加文本框小部件（101）
            // TODO：添加按鈕欄（101）
          ],
        ),
      ),
    );
  }
}

// TODO：添加 AccentColorOverride（103）
複製代碼

請注意：它包含一個 import 語句和兩個新類：

import 語句將 Material Components 引入此文件
LoginPage 類表明模擬器中顯示的整個頁面。
_LoginPageState 類的 build() 函數控制如何建立 UI 中的全部小部件。

瞭解更多有關 Flutter UI 的基礎以及什麼是 widget 的內容，你能夠參觀 Flutter Widget 框架或者嘗試編寫你的第一個 Flutter 應用程序，第一部分。

4. 添加文本框小部件

首先，咱們將在登錄頁面添加兩個文本字段，用戶能夠在其中輸入用戶名和密碼。咱們將使用文本框小部件，它顯示一個浮動標籤並激活觸摸的波紋效果。

Material 的文本框已獲得極大加強，以提升品牌靈活性；在普遍的用戶體驗（UX）研究的支持下進行改進，從而實現更好的視覺設計，提升可用性。

在 Material Guidelines 的文章中瞭解更多有關新 TextField 的信息。

此頁面主要由 ListView 構成，它將其子項排列在一個可滾動的列中。讓咱們將文本框放在底部。

添加文本框小部件

在 SizedBox(height: 120.0) 以後添加兩個新的文本框和一個間隔（spacer）。

// TODO：添加文本框小部件（101）
// [用戶名]
TextField(
  decoration: InputDecoration(
    filled: true,
    labelText: 'Username',
  ),
),
// 間隔（spacer）
SizedBox(height: 12.0),
// [密碼]
TextField(
  decoration: InputDecoration(
    filled: true,
    labelText: 'Password',
  ),
  obscureText: true,
),
複製代碼

每一個文本框都有一個 decoration:，它帶有一個 InputDecoration 小部件。filled: true 意味着文本框的背景被淺色填充以幫助人們識別文本框的點擊或觸摸區域。第二個文本框的 obscureText: true值會自動將用戶的輸入替換爲圓點形式，這適用於輸入密碼的地方。

保存你的項目（使用快捷鍵：command / ctrl + s）執行熱重載。

你如今應該能夠看到包含有用戶名和密碼文本框的頁面！查看浮動標籤和墨水波紋動畫效果：

若是應用沒有更新，再次單擊「運行」按鈕，或單擊「中止」後再單擊「運行」。

文本框的功能包括：

能夠輕鬆改變 TextField 小部件的外觀。在要修飾的區域，指定 InputDecoration 的值。

MDC 文本框默認顯示觸摸反饋（稱爲 MDC 波紋或「墨水」）。

FormField 是一個相似的小部件，具備在 Forms 中嵌入字段的特殊功能。

TextField 類文檔

5. 添加按鈕

接下來，咱們將在登錄頁面添加「Cancel」和「Next」兩個按鈕。咱們將使用兩種 MDC 按鈕小部件：FlatButton（在 Material Guidelines 中稱爲「Text Button」）和 RaisedButton（稱做「Contained Button」）。

在 Text Button 和 Contained Button 之間選擇

爲何不簡單地顯示兩個 Contained Button 呢？這是由於每一個按鈕的類型指示哪些操做比其餘事情更重要。

一個佈局應該包含一個突出的按鈕。這清楚的代表其餘按鈕的重要性較低。這個突出的按鈕表明了咱們最但願用戶採起的操做，用以推動咱們的應用運行。

咱們最不喜歡用戶採起的操做是取消登錄。由於 Contained Button 以凸起的樣式吸引眼球，因此它應該用於更重要的操做。相比之下左側的純文本按鈕看起來不那麼顯眼。

在 Material Guidelines 的按鈕一文中瞭解更多有關按鈕層級的信息。

添加按鈕欄

在文本框下面，添加 ButtonBar 做爲 ListView 的子項：

// TODO：添加按鈕欄（101）
ButtonBar(
  // TODO：給 CANCEL 添加斜面矩形邊框（103）
  children: <Widget>[
    // TODO：添加按鈕（101）
  ],
),
複製代碼

ButtonBar 將其子項所有橫向排列

添加按鈕

而後在 ButtonBar 的 children 列表中添加兩個按鈕：

// TODO：添加按鈕（101）
FlatButton(
    child: Text('CANCEL'),
    onPressed: () {
    // TODO：清除文本框（101）
    },
),
// TODO：給 NEXT 按鈕添加高度（103）
// TODO：給 NEXT 添加斜面矩形邊框（103）
RaisedButton(
    child: Text('NEXT'),
    onPressed: () {
// TODO：顯示下一頁（101）
    },
),
複製代碼

爲何咱們的 onPressed：字段爲空塊？

若是咱們傳遞 null，或者沒有包含該字段（默認爲 null），則按鈕將被禁用。沒有關於觸摸的反饋，咱們沒法很好的瞭解他們的啓用行爲。使用空塊能夠防止他們被禁用。

有關按鈕及其交互的更多信息，請參閱爲你的應用程序添加交互。

保存你的項目，在最下方的文本框下，你應該看到兩個按鈕：

ButtonBar 爲你處理佈局工做。它根據當前 ButtonTheme 中的填充，水平地定位按鈕，使他們彼此相鄰。（你將在 MDC-103 中瞭解更多相關信息。）

觸摸按鈕會啓動墨水波紋動畫，而不會致使其餘任何事情發生。讓咱們在匿名函數 onPressed: 中添加功能來讓取消按鈕可以清空文本框，用下一個按鈕來關閉屏幕：

添加 TextEditingControllers

爲了可以清除文本框的值，咱們將添加 TextEditingControllers 來控制他們的文本。

在 _LoginPageState 類的聲明下，將控制器添加爲 final 變量。

// TODO：添加文本編輯控制器（101）
final _usernameController = TextEditingController();
final _passwordController = TextEditingController();
複製代碼

在第一個文本框的 controller: 中，設置 _usernameController：

// [用戶名]
TextField(
  controller: _usernameController,
複製代碼

在第二個文本框的 controller: 中，設置 _passwordController：

// [密碼]
TextField(
  controller: _passwordController,
複製代碼

編輯 onPressed

添加命令以清除 FlatButton 的 onPressed: 函數中的每一個控制器：

// TODO：清除文本框（101）
_usernameController.clear();
_passwordController.clear();
複製代碼

保存你的項目。如今當你在文本框中鍵入內容後，按下取消按鈕將會清空每一個文本框。

此登錄頁面狀態良好！讓咱們將用戶帶入 Shrine 應用的其他部分。

彈出

要取消此視圖，咱們但願從導航棧中彈出（或者刪除）此頁面（在 Flutter 中稱爲路由）。

Navigator 負責維護一個路由棧，就像 iOS 上的 UINavigationController 同樣。入棧一個路由會將其放置在堆棧的頂部。出棧會刪除最近添加的路由。在咱們程序的 app.dart 中，調用 initialRoute: '/login', 將登錄屏幕添加到 Navigator ，放到進入到 home: 的內容之上。

在導航基礎中詳細瞭解路由和導航。

在 RaisedButton 的 onPressed: 函數中，從 Navigator 中彈出最近的路由：

// TODO：顯示下一頁（101）
            RaisedButton(
                child: Text('NEXT'),
                onPressed: () {
                Navigator.pop(context);
                },
            ),
複製代碼

就是這樣！保存項目。而後單擊「下一步」。

你作到了！