Flutter

Flutter

Flutter是谷歌的移動UI框架,可以快速在iOS和Android上構建高質量的原生用戶界面。 Flutter可以與現有的代碼一起工作。在全世界,Flutter正在被越來越多的開發者和組織使用,並且Flutter是完全免費、開源的。

它也是構建未來的Google Fuchsia套用的主要方式。

基本介紹

  • 外文名:Flutter 
  • 推出時間:2015年5月3日 
框架概況,發展歷史,相關代碼,框架特性,快速開發,絢麗UI,回響式,框架結構,中文文檔,

框架概況

Flutter是谷歌的移動UI框架,可以快速在iOS和Android上構建高質量的原生用戶界面。 Flutter可以與現有的代碼一起工作。在全世界,Flutter正在被越來越多的開發者和組織使用,並且Flutter是完全免費、開源的。它也是構建未來的Google Fuchsia套用的主要方式。
Flutter組件採用現代回響式框架構建,這是從React中獲得的靈感,中心思想是用組件(widget)構建你的UI。 組件描述了在給定其當前配置和狀態時他們顯示的樣子。當組件狀態改變,組件會重構它的描述(description),Flutter會對比之前的描述, 以確定底層渲染樹從當前狀態轉換到下一個狀態所需要的最小更改。

發展歷史

Flutter的第一個版本被稱為“Sky”,運行在Android作業系統上。它是在2015年Dart開發者峰會上亮相的,其目的是能夠以每秒120幀的速度持續渲染。
Beta
Beta1版本於2018年2月27日在2018 世界移動大會公布。
Beta2版本2018年3月6日發布。
1.0版本於2018年12月5日(台北時間)發布。

相關代碼

Hello World!
import 'package:flutter/material.dart';void main() {    runApp(new Center(        child: new Text(            'Hello World!',            textDirection: TextDirection.ltr,        )    ));}
在Dart2.0版本之後,可以省略new/Center,但目前官方並不推薦,有時會產生編譯錯誤。
import 'package:flutter/material.dart';void main() {    runApp(Center(        child: Text(            'Hello World!',            textDirection: TextDirection.ltr,        )    ));}
runApp函式接收給定的組件(Widget)並使其成為組件樹的根。 在此例中,組件樹由兩個組件構成,Center組件和它的子組件-Text組件。框架強制根組件覆蓋整個螢幕,這意味著“Hello, world”文本在螢幕上居中顯示。需要注意的是,在上面的Text實例中必須指定文本顯示方向。不必擔心,當使用MaterialApp時,它會幫你自動解決這些小事情,稍後將進行演示。
在編寫app時,通常會創建新組件,是繼承無狀態的StatelessWidget還是有狀態的StatefulWidget, 取決於您的組件是否需要管理狀態。組件的主要工作是實現一個build函式,它使用其他低級別的組件來構建自己。Flutter框架將依次構建這些組件,最終會到達代表底層渲染對象的組件-RenderObject,它會計算並描述組件的幾何形狀。

框架特性

快速開發

Flutter的熱重載幫助你快捷方便的試驗、重構UI、添加特性和修復bug。在仿真器、模擬器和ios、android硬體上體驗亞秒級的重載,而不會丟失狀態。
Flutter

絢麗UI

通過Flutter內建的漂亮的質感設計和Cupertino(ios-flavor)小工具、豐富的動畫API,平滑的自然滾動和平台感知,讓用戶感到滿意。

回響式

通過Flutter的現代回響式(Reactive)框架和豐富的平檯布局和基礎組件輕鬆構建您的用戶界面。用強大而靈活的API解決2D、動畫、手勢、效果等難題。
class CounterState extends State<Counter> {  int counter = 0;    void increment() {      // 通知Flutter框架狀態已改變         // 因此框架可以運行build()並更新顯示      setState(() {                counter++;          });    }    Widget build(BuildContext context) {      // 這個方法會在每次setState調用時運行      // Flutter框架已經對重複快速運行build方法進行最佳化      // 因此你可以僅更新你想要更新的任何東西,而不必      // 更新整個組件實例。        return new Row(                children: <Widget>[                      new RaisedButton(          o                  nPressed: increment,                            child: new Text('Increment'),                      ),                      new Text('Count: $counter'),                ],          );    }}
訪問原生功能
通過平台api、第三方sdk和原生代碼使您的套用變得生動起來。Flutter讓您可以重用您現有的java、swift和Objc代碼,並在iOS和Android上訪問原生特性和SDK。
訪問平台功能非常簡單。這是互操作示例的片段:
Future<Null> getBatteryLevel() async {  var batteryLevel = 'unknown';  try {    int result = await methodChannel.invokeMethod('getBatteryLevel');    batteryLevel = 'Battery level: $result%';  } on PlatformException {    batteryLevel = 'Failed to get battery level.';  }  setState(() {    _batteryLevel = batteryLevel;  });}

框架結構

Flutter的主要結構包括:
  • Flutter engine
  • Foundation library
  • Design-specific widgets

中文文檔

API文檔翻譯項目

相關詞條

熱門詞條

聯絡我們