1. 程式人生 > >Flutter「釋出預覽版 2」讓 iOS 應用至臻完美

Flutter「釋出預覽版 2」讓 iOS 應用至臻完美

Flutter 是 Google 面向移動端應用推出的一套跨平臺開發工具,助力開發者在 iOS 和 Android 兩個平臺上開發高質量的原生應用介面。為期兩日的中國 2018 Google開發者大會於今日在上海拉開帷幕。在大會主題演講環節,我們推出了Flutter 「釋出預覽版 2」。這是我們在到達 Flutter 1.0 之前的最後一個主要版本。  

640?wx_fmt=jpeg

在今年二月和六月,我們分別釋出了 Flutter 的 beta 版首個預覽版。與之前兩個版本相比,Flutter「釋出預覽版 2」的核心場景更為完善,整體質量也得到了顯著提升。Flutter 1.0 穩定版目前正處於最後開發階段,敬請期待!

>> beta 版


https://medium.com/flutter-io/announcing-flutter-beta-1-build-beautiful-native-apps-dc142aea74c0

>> 首個預覽版
https://developers.googleblog.com/2018/06/flutter-release-preview-1-live-from.html

Flutter「釋出預覽版 2」新特性

本次新版本釋出的主題是 “讓 iOS 應用至臻完美”。雖然我們設計 Flutter 的目的是幫助開發者實現品牌驅動的定製移動端體驗 ,但是一些開發者反饋說自己平時需要嚴格按照《蘋果官方介面開發指南》來進行應用開發。為此,我們在新版本中特別擴充套件了對 “Cupertino” 風格控制元件的支援。預覽版 2 所提供的庫中包含大量 widget 和類,能夠幫助開發者輕鬆建立 iOS 風格介面。

>>《蘋果官方介面開發指南》
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

>> 庫中包含大量 widget 和類

https://docs.flutter.io/flutter/cupertino/cupertino-library.html

640?wx_fmt=gif

△ 使用 Flutter 開發的 iOS 設定頁

以下為 Flutter「釋出預覽版 2」中新新增的 iOS 主題組建 (widget):

- CupertinoApp: 用於建立 iOS 風格應用的頂層元件

- CupertinoTimerPicker

: 用於建立倒數定時器

- CupertinoSegmentedControl: 用於建立水平分段控制元件

- CupertinoActionSheet: 用於建立 iOS 風格的底部動作條 (bottom pop-up sheets)

上段文中連結:

>> CupertinoApp
https://docs.flutter.io/flutter/cupertino/CupertinoApp-class.html

>> CupertinoTimerPicker
https://docs.flutter.io/flutter/cupertino/CupertinoTimerPicker-class.html

>> CupertinoSegmentedControl
https://docs.flutter.io/flutter/cupertino/CupertinoSegmentedControl-class.html

>> CupertinoActionSheet
https://docs.flutter.io/flutter/cupertino/CupertinoActionSheet-class.html

改進項包括:  

  • CupertinoNavigationBarCupertinoSliverNavigationBar  

    • 在切換頁面時,實現視差滾動效果

    • 基於 CupertinoPageRoute.title 自動填充頁面標題和返回按鈕的標籤

  • CupertinoPageScaffold

    • 對內容進行重新佈局,防止鍵盤遮蓋介面中的內容

  • CupertinoScrollbar

    • 加強了越界滾動的視覺保真度

  • CupertinoPicker

    • 添加了對無限滾動和迴圈滾動的支援

    • 添加了對離軸圓柱投影的多欄支援

上段文中連結:

>> CupertinoNavigationBar
https://docs.flutter.io/flutter/cupertino/CupertinoNavigationBar-class.html

>> CupertinoSliverNavigationBar  
https://docs.flutter.io/flutter/cupertino/CupertinoSliverNavigationBar-class.html

>> CupertinoPageRoute.title
https://docs.flutter.io/flutter/cupertino/CupertinoPageRoute/title.html

>> CupertinoPageScaffold
https://docs.flutter.io/flutter/cupertino/CupertinoPageScaffold-class.html

>> CupertinoScrollbar
https://docs.flutter.io/flutter/cupertino/CupertinoScrollbar-class.html

>> CupertinoPicker
https://docs.flutter.io/flutter/cupertino/CupertinoPicker-class.html

您可查閱 Flutter 文件,獲取有關 Cupertino* 類的全部詳情。
(請注意,在本文撰寫期間,上述 Cupertino widget 中尚有部分未新增至視覺元件目錄下。)

>> Flutter 文件

https://docs.flutter.io/flutter/cupertino/cupertino-library.html

>> 視覺元件目錄
https://flutter.io/widgets/cupertino/

我們同時也對其它場景進行了完善,例如,預覽版 2 新增加了對後臺執行 Dart 程式碼的支援。即使應用被掛起也不會影響程式碼執行。外掛開發者可以利用這項新特性,讓新開發的外掛能夠在事件被觸發時執行程式碼,例如觸發了定時器或者接收到了地理位置更新。如果您想獲取更多技術細節,瞭解如何利用後臺限制 geofencing 外掛,請查閱此篇 Medium 博文

>> Medium 博文

https://medium.com/@bkonyi/2b3e40a1a124

此外,Flutter 在應用瘦身方面也進行了不少優化:最多可以減少 30% 的 Android 和 iOS 應用體積。我們在釋出模式下針對 Android 構建出的最小 Flutter 應用體積僅為 4.7 MB,比優化之前減少了 2 MB —— 而且我們還在繼續尋找其它的潛在可優化項。(請注意: 儘管以上改進對 iOS 和 Android 均適用,但鑑於 iOS 安裝包的構建方法異於 Android,您可能會在 iOS上看到不同的結果。)

更多內容請查閱此視訊瞭解詳情:

https://www.youtube.com/watch?v=_LfjILXswJs

>> 最多可以減少 30%

https://github.com/flutter/flutter/issues/16833#issuecomment-410103493

>> 最小 Flutter 應用體積

https://github.com/flutter/flutter/tree/60d223c20c44424e3c8031d019270d22bab35df6/examples/hello_world

>> 鑑於 iOS 安裝包的構建方法

https://github.com/flutter/flutter/issues/16833#issuecomment-400913393

穩健發展

在新開發者麼繼續探索 Flutter 之際,我們想和大家分享一個好訊息:得益於各位的支援與厚愛,Flutte 入選 GitHub 最活躍軟體庫 Top 50 榜單。

640?wx_fmt=png

圖TOP表單

在今年的 Google I/O 開發者大會上,我們宣佈 Flutter 已經 “為生產環境作好準備了”。隨著 Flutter 1.0 穩定版釋出日的臨近,我們看到了許多新發布的 Flutter 應用,而且還有數千個基於 Flutter 開發的應用已經在 Apple Store 和 Google Play 應用商店內成功上線,其中包含不少全球使用量最多的應用,比如說閒魚 (Android, iOS)、NOW 直播 (Android, iOS)、Google Ads (Android, iOS) 等。點選收看下方視訊,瞭解阿里巴巴的技術團隊是如何利用 Flutter 為中國 5000 萬閒魚使用者帶去精彩移動端體驗。


>>
Bilibili 視訊連結:

https://www.bilibili.com/video/av32005383/

我們非常重視客戶滿意度,並會定期進行使用者調查以幫助我們及時獲取使用者反饋。據最近的一次調查結果顯示,92% 的開發者對 Flutter 表示非常滿意或滿意,並且願意向其他人推薦 Flutter。在被詢問到有關開發效率和 UI 設計的問題時,79% 的開發者認為 Flutter 對提高開發速度和部署理想 UI 非常有幫助。此外,最近剛釋出第二個穩定版的 Dart 語言也取得了不俗成績:82% 的 Flutter 開發者對 Dart 語言表示非常滿意或滿意。

>> 最近的一次調查結果

https://medium.com/flutter-io/what-weve-learned-from-the-july-2018-flutter-user-survey-cbbf1e04370c

>> Dart 語言

https://medium.com/dartlang/dart-2-stable-and-the-dart-web-platform-3775d5f8eac7


除了上述調查資料以外,我們還可以從其它許多方面感受到 Flutter 社群的蓬勃發展。例如,Flutter 在開發者問答網站 StackOverflow 的關注度走勢就一路向上:越來越多人在 StackOverflow 網站上釋出、回答或者訪問有關 Flutter 的新問題。

>> StackOverflow

https://stackoverflow.com/questions/tagged/flutter

640?wx_fmt=png

△ 四大熱門 UI 框架在 StackOverflow 網站上的問題訪問量統計圖

第一天誕生起,Flutter 就一直堅持開源,因為這是我們的選擇。我們希望在公開 Flutter開發進展的同時,鼓勵更多個人和組織積極參與,為打造出色的全平臺使用者體驗貢獻出一份力量。

>> 第一天誕生

https://github.com/flutter/engine/commit/20cc569f5961d4e896cb2f4651fd2049066bd47c


升級指南

如何升級Flutter「釋出預覽版 2」?如果您目前已經在使用 Flutter,只需要執行下方升級版本命令,就可輕鬆完成升級: 

$ flutter upgrade

如果您尚未嘗試過 Flutter,何不上手試試?請訪問 flutter.io瞭解詳細下載教程,即刻開始您的 Flutter 探索之旅。

>> 如何升級

https://flutter.io/upgrading/

>> flutter.io

https://flutter.io/get-started/install/

當您準備就緒後,不妨前去探索一下 Flutter 生態圈中豐富的樣例應用和程式碼片段,以。如果您想要獲取 Flutter 團隊提供的示例程式碼,請前往 GitHub 網站內的 flutter/samples儲存庫,進一步瞭解 Material 和 Cupertino 的使用方法,學習如何對 JSON 資料進行反序列化以及更多實用技巧。此外, 您還可以訪問 Flutter 精選示例頁面,看一看 Flutter 社群的開發者們的最佳開發例項。

>> flutter/samples

https://github.com/flutter/samples

>> Flutter 精選示例

https://github.com/flutter/samples/blob/master/INDEX.md

此外,我們還為各位開發者準備了Flutter 教學視訊Flutter 週刊Flutter 社群專欄 Flutter應用開發教程等精彩內容,幫助您及時瞭解最新出爐的 Flutter 相關訊息。此外,如果您在開發過程中遇到難題,不妨試試從討論小組聊天室社群支援每週線上交流等渠道尋求幫助,與其他開發者共同探討解決方案。「預覽版 2」是穩定版之前的最後一個預覽版。下一站:1.0 見!

上段文中連結:

>> Flutter 教學視訊

https://www.youtube.com/playlist?list=PLOU2XLYxmsIJ7dsVN4iRuA7BT8XHzGtCr

>> Flutter 週刊

https://flutterweekly.net/

>> Flutter 社群專欄

https://medium.com/flutter-community

>> Flutter應用開發教程

https://www.youtube.com/watch?v=yr8F2S3Amas

>> 討論小組
https://groups.google.com/forum/#!forum/flutter-dev

>> 聊天室
https://gitter.im/flutter/flutter

>> 社群支援

https://stackoverflow.com/questions/tagged/flutter

>> 每週線上交流

https://medium.com/flutter-community/humpdayqanda-live-help-for-flutter-00-00-23-59-utc-every-single-wednesday-5864fb417838

640?wx_fmt=jpeg