[譯] Flutter — 五個你會愛上它的原因

宅自清發表於2018-03-06
Flutter

Flutter — 五個你會愛上它的原因

[譯] Flutter — 五個你會愛上它的原因

在 Google I/O ’17 上 Google 向我們介紹了 Flutter — 一個應用於手機應用開發的開源庫。

也許你知道， Flutter 是一個開發具有精美 UI 跨平臺手機應用的解決方案。Flutter 設計介面的方式和 web 應用很相似，所以你可以在裡面看到很多與 HTML/CSS 相近的方法。

根據他們的承諾：

Flutter 可以輕鬆快捷的開發精美的手機應用。

聽上去很贊，可是在最初的時候，我是不太相信有另外一個跨平臺的解決方案，我們有許多類似的跨平臺方案 — Xamarin, PhoneGap, Ionic, React Native 等等。我們都知道這麼多可選的方案都有著各自的優缺點，我並不確定 Flutter 會與之有什麼不同，然而我被 Flutter 驚豔到了。

Flutter 有許多從 Android 開發者的角度看非常有趣的**特性**。在這篇文章中，我會向你展示一些真正觸動到我的東西。 所以，來開始吧！

[譯] Flutter — 五個你會愛上它的原因

為什麼選 Flutter？

你可能會很好奇並問自己這樣一個問題：

“Flutter 有什麼創新的？它是如何工作的？Flutter 和 React Native 又有什麼不同呢？”

在這裡我不會過多涉及技術性問題，因為這塊其他人做的比我更好，如果你對 Flutter 的工作方式感興趣，那麼我推薦你閱讀這篇文章 What’s Revolutionary about Flutter?，你也可以在“The Magic of Flutter” presentation查閱 Flutter 的完整概念。

在快捷實現方式中，Flutter 是一個允許我們去建立混合移動應用程式的移動端 SDK （這樣你就可以寫一份程式碼，然後同時跑在 Android 和 iOS 上）。 你需要用 Dart 來編寫程式碼，這是一個由 Google 開發的程式語言，並且如果你之前有用過 Java 的話，你會覺得這個這個語言很熟悉。替代 XML 檔案，你需要這樣來構建你的 layout 樹：

import 'package:flutter/material.dart';

class HelloFlutter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "HelloFlutter",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("HelloFlutter"),
        ),
        body: new Container(
          child: new RaisedButton(onPressed: _handleOnPressed),
        ),
      ),
    );
  }
}
複製程式碼

正如你所看到的那樣，一個 layout 是由巢狀的元件（Widgets）構建的， 核心 Widget 是 MaterialApp （這是整個的應用程式）， 然後我們有 Scaffold （這是我們主介面的 layout 結構），再然後是 AppBar （就像 Android Toolbar） 和 一些 Container 作為 body，在 body 內部，我們可以放置我們 layout 元件 — Texts, Buttons 等等。

這些都僅僅是切入點而已，如果你想讀到更多關於 layout 的資訊，請檢視Flutter’s tutorial on building layouts。

#1 熱過載

好的，讓我們現在開始吧！

我們將從一個基本的應用程式開始，這裡有三個按鈕，每個的功能為點選後改變文字的顏色：

[譯] Flutter — 五個你會愛上它的原因

想著，我們將使用 Flutter 最酷的功能之一 — 熱過載。它允許你像更新網頁一樣去實時的更新你的專案。來看看一看熱過載的實際操作吧：

[譯] Flutter — 五個你會愛上它的原因

我們在這裡做什麼呢？我們改變程式碼裡的內容（比如按鈕上的文字資訊），然後我們點選“熱過載”（在 IntelliJ IDE 的頂部），在幾秒後我們就可以看到看到結果，這很酷，不是嗎？

熱過載不僅僅是快而且很智慧 — 如果你已經顯示了一些內容（比如在這個例子中的文字顏色），並且熱過載了應用，那麼你可以在程式執行時來改變 UI：它們將保持一致！

#2 豐富的 (Material Design) 元件

Flutter 中另外一個很棒的事情就是我們擁有非常豐富的內建 UI 元件目錄。這裡有兩套元件 — Material Design (適用於 Android) and Cupertino (適用於 iOS)。你可以很輕鬆的選擇實現你想要的任何內容，你想建立一個 FloatingActionButton？走起：

1_g4mc0mIvQva-m0cPo2nQYQ.gif

並且最棒的事情是你可以在任一平臺上實現任意的元件，如果你使用了一些 Material Design 或者 Cupertino 元件，它們在每個 Android 和 iOS 上顯示都是一樣的，你不需要去擔心有東西在不同裝置上會看起來不同。

#3 一切皆為小部件

就像你在之前的 gif 圖中所看到的，建立一個使用者介面是非常簡單的。這可能就需要感謝 Flutter 的核心理念了，就是一切皆為小部件。你的 APP 類是一個部件（MaterialApp），你的整個 layout 結構是一個部件（Scaffold）， 基本上，所有的東西都是部件（AppBar, Drawer, SnackBar）。你想讓你的 View 居中顯示嗎？用 Center 元件來包裹（Cmd/Ctrl + Enter）它即可！

1_tRCpkOeASzgpDX-q5aJ-3g.gif

由於這一點，建立 UI 介面就像用許多不同的小部件組成 layout 一樣簡單。

這也與 Flutter 中的另一個核心原則有關 — 組合優先於繼承。它意味著如果你想建立一個新的部件，可以用很少的小元件來組裝新的部件，而不是通過擴充套件 Widget 類（就像你會在 Android 中繼承一些 View 類一樣）。

#4 適用於 Android/iOS 的不同主題

通常，我們希望我們的 Android 應用看起來和 iOS 應用不一樣。區別不僅僅是顏色上，在尺寸和部件的樣式上也是如此，我們可用通過 Flutter 的主題來實現這一點：

[譯] Flutter — 五個你會愛上它的原因

正如你所看到的，我們為 Toolbar（Appbar）設定了不同的顏色和高度。我們是通過使用Theme.of(context).platform獲取當前的平臺（Android/iOS）來實現的。

import 'package:flutter/material.dart';

class HelloFlutter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: "HelloFlutter",
        theme: new ThemeData(
            primaryColor:
                Theme.of(context).platform == TargetPlatform.iOS
                    ? Colors.grey[100]
                    : Colors.blue),
        home: new Scaffold(
          appBar: new AppBar(
            elevation:
                Theme.of(context).platform == TargetPlatform.iOS
                    ? 0.0
                    : 4.0,
            title: new Text(
              "HelloFlutter",
            ),
          ),
          body: new Center(child: new Text("Hello Flutter!")),
        ));
  }
}
複製程式碼

#5 許許多多的軟體包

儘管 Flutter 還僅僅是一個 alpha 版本，但它的社群真的很大，而且非常活躍。感謝這個 Flutter 平臺支援 多個軟體包（庫，就像 Android 中的 Gradle 依賴）。 我們有影像開啟、傳送 HTTP 請求、分享內容、儲存偏好、訪問感測器、實現 Firebase 等等。當然，每一個都是同時支援 Android 和 iOS。

怎麼開始呢？

如果你喜歡 Flutter 並且自己想要嘗試的話，最好的方法就是開啟 Google Codelabs：

在看完這些程式碼庫之後，你可以建立一個簡單而精美的聊天應用。你也可以在我的 GitHub 上查閱我對這個應用的實現：

你還可以檢視 Flutter Gallery 應用程式，在這個應用裡你可以看到其中有很大一部分的 Flutter UI 元件：

結束了，感謝您的閱讀！如果你喜歡這篇文章的話，不要忘了留下一個?哦！

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章