歡迎您光臨深圳塔燈網絡科技有限公司!
電話圖標 余先生:13699882642

網站百科

為您解碼網站建設的點點滴滴

Flutter嘗鮮:跨平臺移動應用開發

發表日期:2018-06 文章編輯:小燈 瀏覽次數:1860

開始之前

本人使用Flutter開發的一個圖文App《每日圖文》,可以同時運行在Android和iOS上,歡迎體驗,喜歡的話還不吝Star一下。

叮叮?!?傳送門

demo.gif

Flutter為何物?

隨著移動App開發成本越來越高,近幾年,移動跨平臺開發的呼聲層出不窮,如FaceBook的推出React-Native,大受歡迎,但其性能并不如人意。

2018年2月27日世界移動大會上,谷歌發布一個跨平臺開發框架,名曰Flutter,用于構建高性能的原生Android和iOS兩大平臺的App。

目前還處于測試版本階段:Beta 3。

Flutter編程語言

Flutter使用的編程語言是Dart,Dart是一門動態語言,幾年前揚言要替換JavaScript地位,結果可想而知。

想必還是很多人都沒聽說過這門語言吧,原諒我也沒聽過。沒想到如今Dart以這樣的形式再次出現在開發者面前。

Dart雖然是一門動態語言,但是像極了Java,作為一名Android開發者,幾乎可以無縫切換,跟Kotlin也有幾分相似。相比Java,Dart更為簡潔。

具體可以到Dart語言中文社區了解學習。

Flutter特點

  • 支持熱加載,運行之后,修改代碼無需重新安裝和啟動,提升開發調試效率
  • 支持數據狀態綁定,修改數據后自動刷新頁面
  • 所有的UI都是Widget,包括頁面

Flutter環境配置

首先clone Flutter的repo

git clone -b beta https://github.com/flutter/flutter.git export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內用戶需要設置 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內用戶需要設置 export PATH=`pwd`/flutter/bin:$PATH 

然后檢查是否需要安裝其它依賴,根據提示來安裝其它的依賴

flutter doctor 

如果是Mac的話,需要配置Flutter全局環境變量,在命令行輸入:

$HOME/.bash_profile 

在.bash_profile文件添加以下環境變量:

其中[PATH_TO_FLUTTER_GIT_DIRECTORY]是上面clone的Flutter Repo的本地路徑

export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內用戶需要設置 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內用戶需要設置 export PATH= PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH 

最后運行來生效當前命令行窗口:

source $HOME/.bash_profile 

更多平臺配置可到【Flutter中文網】了解

Flutter開發工具配置

Flutter App可以使用VS Code、Android Studio、IntelliJ進行開發。我直接用的Android Studio。

開始之前,你需要安裝兩個插件:

  • Flutter插件: 支持Flutter開發工作流 (運行、調試、熱重載等).
  • Dart插件: 提供代碼分析 (輸入代碼時進行驗證、代碼補全等).

如果在AS中無法在線安裝,可以到以下鏈接中下載離線安裝:

  • Flutter插件下載
  • Dart插件下載

注意下載的插件版本一定要和Android Studio JRE版本對應上,可以在Android Studio -> About Android Studio中查看版本。

模擬器配置

Android Studio支持Android模擬器和iPhone模擬器預覽,具體安裝參見Flutter中文網,這里不再贅述。

新建Flutter App工程

安裝了以上兩個插件后,就可以在Android Studio中新建Flutter工程了,按照提示新建即可。

新建工程

工程目錄如下:

工程目錄

可以看到,工程目錄結構主要分為3部分,分別是:

  • android 存放Android相關的東西,如App圖標
  • ios 存放iOS相關的東西,如App圖標
  • lib 存放Flutter源碼

重點來看Flutter的入口:lib/main.dart

import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', home: new Scaffold( appBar: new AppBar( title: new Text('Welcome to Flutter'), ), body: new Center( child: new Text('Hello World'), ), ), ); } } 

整個App的入口在void main()方法中。接下來,就來理清一下這個簡單的代碼。

Flutter頁面架構

App開發最重要的就是UI框架,Flutter重新定制一套自己的UI框架,在底層使用了Skia進行渲染。

在Flutter中,一切皆是Widget,頁面是Widget,普通的控件也是Widget。

UI布局和控件

從main.dart中可以看到,Flutter的布局是一層一層嵌套形成的。

  • 第一層是Scaffold,一個實現了Material design的布局控件,包含了一個AppBar和一個body,分別對應標題欄和頁面。

  • 第二層body是一個Center布局控件,該布局用于使其子布局即child,在父布局中居中顯示

  • 最后的子布局是一個Text控件。

整個布局就是在頁面的中間顯示了Hello World。

頁面控件:StatelessWidget 和 StatefulWidget

MyApp繼承的StatelessWidget,就是其中一個頁面相關的Widget,這個窗口的特點是靜態,頁面中的數據一旦渲染后,就不能在更改,一般用于顯示靜態頁面。

另一個StatefulWidget,則是可以改變狀態的Widget,頁面的顯示隨著狀態改變而改變。通過setState方法可以非常方便的修改頁面狀態,與現在web動態綁定框架是類似的。

一個StatefulWidget頁面看起來是這樣的:

class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key);final String title;@override _MyHomePageState createState() => new _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> { int _counter = 0;void _incrementCounter() { setState(() { _counter++; }); }@override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( 'You have pushed the button this many times:', ), new Text( '$_counter', style: Theme.of(context).textTheme.display1, ), ], ), ), floatingActionButton: new FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: new Icon(Icons.add), ), ); } }

可以看到,StatefulWidget的業務邏輯基本上都在_MyHomePageState中,這個類繼承了State。

當點擊了FloatingActionButton時,就會調用_incrementCounter()方法進行setState(),頁面就會跟著改變了。

注:Dart使用下劃線_表示私有,如上面的_count和_incrementCounter()

由于Flutter的布局模式,當頁面比較復雜時,整個布局會變得非常復雜,可讀性也大大降低了,修改起來非常麻煩。

另外,Flutter為了布局靈活性,定義了太多的布局控件,幾十個布局看得眼花繚亂,從來沒見過這么多布局的框架。

Flutter插件管理

Flutter使用pubspec.yaml管理插件庫,具體如下:

name: daily description: A application to look up photo and article#依賴插件配置 dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2dev_dependencies: flutter_test: sdk: flutterflutter:uses-material-design: true#本地資源配置 assets: - images/ic-pic-loading.png - images/ic-pic-article.gif 

Run App

通過Android Studio就可以直接在模擬器上安裝App了,當然,前提是你要先配置好模擬器。

如果修改了代碼,就可以直接通過熱加載,直接顯示修改的內容,無需重新安裝打開,大大節省了調試時間。

總結

  • Flutter的對于熟悉Java或者Android開發的人來說,還是比較友好的,可以比較快的熟悉和掌握基本的開發工具和開發理念;
  • Flutter App的性能確實還是不錯的,整個的體驗與原生App基本差不多;
  • 熱加載非常好用,可以節省不少時間;
  • 支持數據和狀態自動綁定,通過setState可以非常方便的修改頁面狀態;
  • Flutter 布局嵌套非??拥?,布局復雜將會非常痛苦;
  • 基本上實現Android和iOS一套代碼通用,開發效率大大提高了。
  • 仍然有許多需要改進的地方,許多特性支持也不太好,如webview這些需要使用第三方插件,或自己定制。

現在Flutter仍然為Beta版本,希望后面可以帶來更多驚喜和更好的體驗吧。


本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得,所有資料僅供用戶參考了本站不擁有所有權,如您認為本網頁中由涉嫌抄襲的內容,請及時與我們聯系,并提供相關證據,工作人員會在5工作日內聯系您,一經查實,本站立刻刪除侵權內容。本文鏈接:http://www.masalaminds.com/18380.html
相關APP開發
 八年  行業經驗

多一份參考,總有益處

聯系深圳網站公司塔燈網絡,免費獲得網站建設方案及報價

咨詢相關問題或預約面談,可以通過以下方式與我們聯系

業務熱線:余經理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.    

欧美操逼男人射精视频,国产精品播放器在线播放,免费 无码 国产变态在线看,国产蜜臀AV在线一区浪潮,国产激情视频