前言

瀏覽技術網站的時候,看到很多Flutter的字眼,號稱讓移動app更加流暢.興趣值滿分,于是開始學習了一下.
Flutter 官網
Flutter中文文檔

介紹

• Flutter 是由 Google 的工程師團隊打造的，用于創建高性能、跨平臺的移動應用的框架
• Flutter 專注于 Android and iOS 低延遲的輸入和高幀率
• Flutter的設計跟react-native很像，比RN更直接一點
• Flutter的開發語言是Dart

歷史演變

從我接觸移動app開發開始, 從Hybrid開發依賴于WebView, 眾所周知webView最大的問題就是性能問題,交互體驗想當的不好.RN拋開了WebView，利用JavaScriptCore來做橋接，將js調用轉為native調用。解決了性能問題,可以說是邁進了一大步.但是仔細想想還是需要中間量去做這件事情.這就相當與 廠家供貨 -> 賣家出貨 的聯系變成 廠家供貨 -> 供銷員 -> 賣家 多個中間環節,多少也是會影響性能.flutter更加徹底,不用橋接,不用webview.直接通過生成一個UI庫,給原生使用,這也是用Dart語言的原因吧.

與RN比較

• 都是跨平臺開發
• 通過狀態機控制局部變化
• 支持熱更新

安裝環境

首先

git clone -b beta https://github.com/flutter/flutter.git 

然后設置環境變量

vi ~/.bash_profile 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 

PATH_TO_FLUTTER_GIT_DIRECTORY為自己克隆flutter的文件目錄
之后運行source $HOME/.bash_profile 刷新一下

運行ide

我用的是vscode 打開之后vscode,安裝一下插件

1
之后快捷鍵是command+shift+P(或者view->Command Palette)
2.jpeg
運行如下圖表示安裝成功:
3.jpeg

如遇到安裝不成功可以去看看官方文檔, 然而也會有錯誤提示,處理一下即可
最后vscode的調試即可

4.jpeg

創建一個應用

5.jpeg

最后

6.jpeg

可以看到圖片是pink顏色的, 默認是blue顏色的. 試了一下熱加載功能保存一下就可以了.

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