勢逼 React Native，跨平臺開發框架 Flutter 很凶猛

圖源：Flutter 官網

作者 | 亢少軍

本文內容經授權摘自《Flutter 技術入門與實戰》

Flutter 的 2019 很是精彩：

聲網開源了 Flutter 實時音視頻插件 Agora Flutter SDK；

閒魚開源了 Flutter 應用框架 Fish Redux；

今日頭條即將開源能讓 Flutter 真正支持 View 級別混合開發的方案……

從 2016 年項目啟動，到在次年的 Google I/O 大會上首次公開亮相，再到 2018 年底憑藉

1.0 正式版

的推出首頁“屠版”，Flutter 幾經周折，終是再度迴歸業界關注的焦點。作為 Google 推出的移動 UI 框架，Flutter 可以快速在 iOS 和 Android 上構建高質量的原生用戶界面；可以與現有的代碼一起工作。在全世界，Flutter 正在被越來越多的開發者和組織使用，同時其還是完全免費、開源的。那麼較之其他主流框架，其“個人魅力”何在？而秉承“一切皆為組件”這一核心理念的 Flutter 又有哪些令人驚豔的常用組件呢？

接下來，我們將帶著問題，在捷智雲視頻會議系統聯合創始人亢少軍的《Flutter 技術入門與實戰》一書中尋找答案。

不斷迭代的跨平臺技術

如今，主流的移動開發平臺當屬 Android 和 iOS，每個平臺上的開發技術不太一樣，針對每個平臺開發應用需要特定的人員，但這樣一來開發效率低下，因而需要進行跨平臺開發。跨平臺技術從最開始的 Hybrid 混合開發技術，到 React Native 的橋接技術，一直在演進。

Hybrid 開發主要依賴於 WebView。但 WebView 是一個重量級的控件，很容易產生內存問題，而且複雜的 UI 在 WebView 上顯示的性能不好。

而 React Native 技術則拋開了 WebView，利用 JavaScript Core 來做橋接，將 JavaScript 調用轉為 Native 調用。React Native 最終會生成對應的自定義原生控件。這種策略將框架本身和 App 開發者綁在系統的控件上，不僅框架本身需要處理大量平臺相關的邏輯，隨著系統版本變化和 API 的變化，開發者可能也需要處理不同平臺的差異，甚至有些特性只能在部分平臺上實現，這樣使得跨平臺特性大打折扣。

Flutter 是最新的跨平臺開發技術，可以橫跨 Android、iOS、MacOS、Windows、Linux 等多個系統。其採用了更為徹底的跨平臺方案，即自己實現了一套 UI 框架，然後直接在 GPU 上渲染 UI 頁面。

Flutter 裡有一個非常重要的核心理念：一切皆為組件（Widget），Flutter 所有的元素皆由組件組成。比如：一個佈局元素、一個動畫、一個裝飾效果等。

組件是 Flutter 應用程序用戶界面的基本構建塊。不僅按鈕、輸入框、卡片、列表這些內容可作為 Widget，甚至將佈局方式、動畫處理都視為 Widget。所以 Flutter 具有一致的統一對象模型：Widget。

Widget 具有豐富的屬性及方法，屬性通常用來改變組件的狀態（顏色、大小等）及回調方法的處理（單擊事件回調、手勢事件回調等）。方法主要是提供一些組件的功能擴展。

複雜的功能界面通常都是由一個一個簡單功能的組件組裝完成的。有的組件負責佈局，有的負責定位，有的負責調整大小，有的負責漸變處理，等等。這種嵌套組合的方式帶來的最大好處就是解耦。

下面將列舉並講解部分開發中用得最為頻繁的組件。

容器組件

容器組件（Container）包含一個子 Widget，自身具備如 alignment、 padding 等基礎屬性，方便佈局過程中擺放 child。Container 組件常用屬性見下表：

Container 組件的屬性及描述

| 提示：padding 與 margin 的不同之處在於，padding 是包含在 Content 內，而 margin 則是外部邊界。設置點擊事件的話，padding 區域會響應，而 margin 區域不會響應。

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: '容器組件示例',
 home: Scaffold(
 appBar: AppBar(
 title: Text('容器組件示例'),
 ),
 body: Center(
 //添加容器
 child: Container(
 width: 200.0,
 height: 200.0,
 //添加邊框裝飾效果
 decoration: BoxDecoration(
 color: Colors.white,
 //設置上下左右四個邊框樣式
 border: new Border.all(
 color: Colors.grey, //邊框顏色
 width: 8.0, //邊框粗細
 ),
 borderRadius:
 const BorderRadius.all(const Radius.circular(8.0)), //邊框的弧度
 ),
 child: Text(
 'Flutter',
 textAlign: TextAlign.center,
 style: TextStyle(fontSize: 28.0),
 ),
 ),
 ),
 ), 

 );
 }
}

上述示例代碼視圖展現大致如下圖所示：

圖片組件

圖片組件（Image）是顯示圖像的組件，Image 組件有多種構造函數：

• new Image：從 ImageProvider 獲取圖像
• new Image.asset：加載資源圖片
• new Image.file：加載本地圖片文件
• new Image.network：加載網絡圖片
• new Image.memory：加載 Uint8List 資源圖片

Image 組件常見屬性見下表：

Image 組件屬性及描述

文本組件（text）負責顯示文本和定義顯示樣式，常用屬性見下表。

Text 組件屬性及描述

接下來我們通過創建多個文本組件來展示不同的文本樣式。比如不同的顏色、不同的字號、不同的線形等，完整示例代碼如下：

import 'package:flutter/material.dart'; 

class ContainerDemo extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return new Scaffold(
 appBar: new AppBar(
 title: new Text('文本組件'),
 ),
 body: new Column(
 children: <widget>[
 new Text(
 '紅色+黑色刪除線+25號',
 style: new TextStyle(
 color: const Color(0xffff0000),
 decoration: TextDecoration.lineThrough,
 decorationColor: const Color(0xff000000),
 fontSize: 25.0,
 ),
 ),
 new Text(
 '橙色+下劃線+24號',
 style: new TextStyle(
 color: const Color(0xffff9900),
 decoration: TextDecoration.underline,
 fontSize: 24.0,
 ),
 ),
 new Text(
 '虛線上劃線+23號+傾斜',
 style: new TextStyle(
 decoration: TextDecoration.overline,
 decorationStyle: TextDecorationStyle.dashed,
 fontSize: 23.0,
 fontStyle: FontStyle.italic,
 ),
 ),
 new Text(
 '24號+加粗',
 style: new TextStyle(
 fontSize: 23.0,
 fontStyle: FontStyle.italic,
 fontWeight: FontWeight.bold,
 letterSpacing: 6.0,
 ),
 ),
 ],
 ),
 );
 } 

}
void main() {
 runApp(
 new MaterialApp(
 title: 'Text demo',
 home: new ContainerDemo(),
 )
 );
}
/<widget>

上述示例代碼視圖展現大致如下圖：

本文摘自《Flutter 技術入門與實戰》

資深架構師撰寫

從基礎組件詳解到綜合案例

從工具使用到插件開發

書中包含大量精選案例、詳細實操步驟以及配套視頻課程

讓你在輕鬆掌握基礎知識的同時快速進入實戰

《Flutter 技術入門與實戰》

本書是一本基礎入門加實戰的書籍，既有基礎知識，又有豐富示例，包括詳細的操作步驟，實操性強。由於Flutter大量使用組件，所以本書對組件的講解很詳細，包括基本概念、屬性及代碼示例。每個組件都配有小例子，力求精簡，還提供了配套網站提供完整代碼，複製完整代碼就可以立即看到效果。這樣會給讀者信心，在輕鬆掌握基礎知識的同時快速進入實戰。

內容提要：

• 系統化講解 Flutter，包括基本概念和重要知識點；
• 詳細介紹常用組件及使用技巧，包括容器組件、圖片組件、網格列表組件等；
• 頁面佈局的基礎知識和技巧，如基礎佈局處理、寬高尺寸處理、列表及表格佈局等；
• 手勢檢測及處理的方法等；
• 路由及導航處理，如頁面的渲染以及數據傳遞；
• 組件裝飾和視覺效果的處理，如透明度處理、裝飾盒子、旋轉盒子等；
• 介紹 Flutter 插件開發的入門知識

閱讀更多 CSDN 的文章

關鍵字: 正式版 Android Windows