[譯] Flutter — 五個你會愛上它的緣由

時間 2019-11-07

標籤 flutter 五個愛上緣由简体版

原文原文鏈接

原文地址：Flutter — 5 reasons why you may love it

原文做者：Paulina Szklarska

譯文出自：掘金翻譯計劃

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

譯者：RockZhai

校對者：Starrier

Flutter — 五個你會愛上它的緣由

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

也許你知道， Flutter 是一個開發具備精美 UI 跨平臺手機應用的解決方案。Flutter 設計界面的方式和 web 應用很類似，因此你能夠在裏面看到不少與 HTML/CSS 相近的方法。前端

根據他們的承諾：android

Flutter 能夠輕鬆快捷的開發精美的手機應用。ios

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

Flutter 有許多從 Android 開發者的角度看很是有趣的**特性**。在這篇文章中，我會向你展現一些真正觸動到個人東西。因此，來開始吧！github

爲何選 Flutter？

你可能會很好奇並問本身這樣一個問題：web

「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 樹：bash

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 最酷的功能之一 — 熱重載。它容許你像更新網頁同樣去實時的更新你的項目。來看看一看熱重載的實際操做吧：

咱們在這裏作什麼呢？咱們改變代碼裏的內容（好比按鈕上的文本信息），而後咱們點擊「熱重載」（在 IntelliJ IDE 的頂部），在幾秒後咱們就能夠看到看到結果，這很酷，不是嗎？

熱重載不只僅是快並且很智能 — 若是你已經顯示了一些內容（好比在這個例子中的文本顏色），而且熱重載了應用，那麼你能夠在程序運行時來改變 UI：它們將保持一致！

#2 豐富的 (Material Design) 組件

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

而且最棒的事情是你能夠在任一平臺上實現任意的組件，若是你使用了一些 Material Design 或者 Cupertino 組件，它們在每一個 Android 和 iOS 上顯示都是同樣的，你不須要去擔憂有東西在不一樣設備上會看起來不一樣。

#3 一切皆爲小部件

就像你在以前的 gif 圖中所看到的，建立一個用戶界面是很是簡單的。這可能就須要感謝 Flutter 的核心理念了，就是一切皆爲小部件。你的 APP 類是一個部件（MaterialApp），你的整個 layout 結構是一個部件（Scaffold），基本上，全部的東西都是部件（AppBar, Drawer, SnackBar）。你想讓你的 View 居中顯示嗎？用 Center 組件來包裹（Cmd/Ctrl + Enter）它便可！

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

這也與 Flutter 中的另外一個核心原則有關 — 組合優先於繼承。它意味着若是你想建立一個新的部件，能夠用不多的小組件來組裝新的部件，而不是經過擴展 Widget 類（就像你會在 Android 中繼承一些 View 類同樣）。

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

一般，咱們但願咱們的 Android 應用看起來和 iOS 應用不同。區別不只僅是顏色上，在尺寸和部件的樣式上也是如此，咱們可用經過 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。