【譯】Flutter 1.20 正式版前瞻、新更新發布

前端拾遺發表於2020-08-07

Flutter 1.20 正式版前瞻、新更新發布

原文地址:https://medium.com/flutter/an...

效能改進,移動自動填充,一個新的小元件和更多!

我們對Flutter的持續願景是提供一個行動式工具箱,用於構建令人驚歎的體驗,無論您在哪裡都可以在螢幕上畫出畫素。每一次釋出,我們都會繼續努力,確保Flutter對我們支援的每個平臺都是快速、美觀、高效和開放的。在今天釋出到我們穩定頻道的Flutter 1.20中,Flutter對這四大支柱中的每一個都有改進。

的類別中,我們從渲染引擎的最底層和Dart語言本身,都有多項效能改進。

為了使您能夠構建更加美麗的Flutter應用程式,這個版本有幾個UI增強功能,包括期待已久的自動填充支援,一種新的方式來分層您的元件以支援平移和縮放,新的滑鼠游標支援,更新舊的最喜歡的Material元件(如時間和日期選擇器/),以及一個全新的響應式許可頁面,用於桌面和移動形式因素Flutter應用程式中的關於框。

為了確保你繼續保持更高的生產力,我們已經更新了Visual Studio Code的Flutter擴充套件,它將Dart DevTools直接帶入你的IDE中,當你移動你的檔案時自動更新你的匯入語句,以及一套新的後設資料用於構建你自己的工具。

而正是因為Flutter的_開放性和驚人的社群貢獻者,這個版本包含了來自世界各地359位貢獻者的3,029個合併PR和5,485個已關閉問題,其中包括270位來自Flutter社群的貢獻者。事實上,這標誌著我們有史以來對Flutter版本的最大貢獻者數量。特別鳴謝社群貢獻者CareF的28個PR,AyushBherwani1998的26個PR,其中包括10個作為他的Google Summer of Code專案的一部分對Flutter樣本的貢獻,以及a14n的13個PR,其中許多是為Flutter的空安全落地服務的(更多關於這個話題很快就會有!)。如果沒有廣泛的社群貢獻者團隊,我們無法建立Flutter,所以感謝你們/!

Flutter的每個新版本都會帶來更多的使用量和動力。事實上,在4月份,我們報導,Google Play商店中的Flutter應用數量已經達到了5萬個,峰值速度為10000個新應用/月。現在,僅僅過了三個多月,Google Play中的Flutter應用已經超過了9萬個。我們在印度看到了很多這樣的增長,印度現在是Flutter開發者的第一大地區,在過去的6個月裡翻了一番,這與谷歌加大對該地區的投資非常吻合。最後,沒有Dart,Flutter就不是Flutter,所以很高興看到IEEE報告說,Dart自去年以來已經上升了4位,在他們追蹤的前50種語言中排名第12

Flutter和Dart的效能改進

在Flutter團隊中,我們一直在尋找新的方法來降低你的應用的大小和延遲。作為前者的一個例子,這個版本修復了圖示字型樹搖動的工具效能問題使字型樹搖動成為預設行為,當構建您的非Web應用程式時。圖示字型樹搖動會移除你的應用中不使用的圖示,從而減小尺寸。對Flutter Gallery應用使用這個功能,我們發現它將應用大小減少了100kb。現在,當你在進行釋出構建時,你的移動應用中預設會有這種行為。目前它僅限於TrueType Fonts,但這一限制將在未來的版本中被取消。

我們在這個版本中做的另一項效能改進是使用預熱階段減少了動畫初始顯示時的抖動。你可以在這個動畫中看到一個改善抖動的例子 (slowed down to half speed)。

在這裡插入圖片描述

無SkSL熱身和有SkSL熱身的動畫

如果一個Flutter應用在第一次執行時有卡頓的動畫,Skia Shading Language shader提供了預編譯作為你的應用構建的一部分,可以將其速度提高2倍以上。如果你想利用這個高階功能,請看flutter.dev上的SkSL預熱頁面

最後,在我們針對桌面形式因素進行優化的同時,我們繼續完善我們的滑鼠支援。在這個版本中,我們重構了滑鼠命中測試系統,提供了許多由於效能問題而被遮蔽的架構優勢。重構使我們在基於Web的微基準中的效能提高了15倍! 這對您來說意味著,您可以在不放棄效能的前提下,獲得更好、更一致、更準確的測試結果:雙贏!

有了這個更好、更快、更強的滑鼠點選測試,我們增加了對滑鼠游標的支援--這也是最受好評的桌面功能之一。一些常用的小元件將預設顯示你所期望的游標,或者你可以從支援的游標列表中指定另一個。

在這裡插入圖片描述

在Android上現有的小元件上新增新的滑鼠指標。

Flutter的這個版本是建立在Dart的2.9版本上的。它的特點是採用了新的基於狀態的雙通UTF-8解碼器,解碼基元在Dart虛擬機器中進行了優化,部分利用了SIMD指令。UTF-8是目前網際網路上使用最廣泛的字元編碼方法,在接收大型網路響應時,能夠快速解碼是至關重要的。在我們的UTF-8解碼基準測試中,我們發現在低端ARM裝置上,從英文文字的近200%到中文文字的400%,都得到了全面的改進。

移動文字欄位的自動填充

一段時間以來,最要求的Flutter功能之一就是支援底層的Android和iOS支援Flutter程式中的文字自動填充。隨著PR 52126,我們很高興地說,等待已經結束了--不用再要求你的使用者重新輸入作業系統已經為他們收集的資料。

在這裡插入圖片描述

自動填寫的行動

你會很高興地聽到,我們已經開始為網路新增這一功能。

一個新的小元件,用於常見的互動模式。

這個版本引入了一個新的widget--"InteractiveViewer"。InteractiveViewer是為在你的應用程式中構建常見的互動性而設計的,比如平移、縮放和拖放,甚至在調整大小的情況下也是如此,這個簡單的圍棋棋盤示例演示了這一點。

在這裡插入圖片描述

使用 "互動式檢視器 "進行縮放、平移、調整大小、拖放等操作。

要檢視如何將InteractiveViewer整合到你自己的應用程式中,檢視API文件,你可以在DartPad中玩它。另外,如果你想了解InteractiveViewer是如何設計和開發的,你可以在YouTube上看到作者為Chicago Flutter做的演示

如果你有興趣在你的Flutter應用中加入InteractiveViewer所實現的那種互動性,那麼你可能也會很高興地聽到我們在這個版本中增加了更多的拖放功能。具體來說,如果你想知道在目標元件上發生的精確的拖放位置(它總是對_Draggable_物件本身可用),現在你可以通過_DragTarget onAcceptDetails_方法獲得該資訊。

在這裡插入圖片描述

新的拖動目標接受細節的行動

檢視此示例以瞭解詳情,並期待未來的版本能在拖動過程中提供這些資訊,以便_DragTarget_能更容易地在拖動操作中提供視覺更新。

更新了材質滑塊、範圍滑塊、時間選擇器和日期選擇器。

除了新的widget,這個版本還包括一些更新的widget,以符合最新的材料準則。其中包括SliderRangeSlider。更多資訊,請參見Slider widget有什麼新變化?

在這裡插入圖片描述

更新的材料滑塊

在這裡插入圖片描述

更新材料範圍滑塊

更新了 "DatePicker",加入了新的緊湊設計以及對日期範圍的支援。

在這裡插入圖片描述

更新的DatePicker

最後,TimePicker有了全新的風格。

在這裡插入圖片描述

更新的TimePicker

如果你想玩一玩,這裡有一個用Flutter搭建的有趣的網頁演示

響應式許可證頁面

本次釋出的另一個更新是在 "AboutDialog "中新增了響應式授權頁面。

在這裡插入圖片描述

新許可證頁面

PR 57588,來自社群貢獻者TonicArtos,不僅更新了Material指南,讓它看起來更漂亮,而且它更容易導航,並且設計成在平板電腦和桌面上和手機上一樣好用。謝謝,TonicArtos! 因為每個Flutter應用都應該顯示他們使用的包的許可證,你只是讓每個Flutter應用都變得更好!

釋出外掛需要新的pubspec.yaml格式。

當然,Flutter不僅僅是小元件,還有工具,這個版本的更新太多,無法一一提及。不過,這裡有一些亮點。

首先是一個公益宣告:如果你是Flutter外掛作者,那麼傳統的pubspec.yaml格式不再支援釋出外掛。如果你嘗試,在執行_pub publish_時,你會得到以下錯誤資訊。

在這裡插入圖片描述

外掛釋出時遺留的pubspec格式錯誤資訊。

舊的格式不支援指定你的外掛支援哪些平臺,並且從Flutter 1.12開始就被廢棄了。 新的pubspec.yaml格式現在需要釋出新的或更新的外掛。

對於外掛的客戶端,這些工具仍然能夠理解舊的pubspec格式,並且在可預見的未來也將如此。pub.dev上所有使用傳統pubspec.yaml格式的現有外掛在可預見的未來將繼續與Flutter應用程式一起工作。

在Visual Studio程式碼中預覽嵌入式Dart DevTools。

這個版本中最大的工具更新來自於Visual Studio Code擴充套件,它提供了一個新功能的預覽,使你能夠將Dart DevTools螢幕直接帶入你的編碼工作區。
在這裡插入圖片描述

嵌入到Visual Studio程式碼中的Dart DevTools佈局瀏覽器的預覽。

使用新的_dart.previewEmbeddedDevTools_設定啟用此功能。上面的截圖顯示了Flutter Widget Inspector直接嵌入到Visual Studio Code中,但是啟用了這個新的設定,你可以使用狀態列上的Dart DevTools選單選擇你喜歡的頁面嵌入。

在這裡插入圖片描述

這個選單可以讓你選擇要顯示的頁面。

在這裡插入圖片描述

這個功能還在預覽中,所以如果你有任何問題請告訴我們

更新網路跟蹤

最新版本的Dart DevTools自帶了一個更新版本的網路頁面,可以實現網路套接字剖析。

在這裡插入圖片描述

Dart DevTools的網路頁面上的套接字連線的時間、狀態和內容型別。

網路頁面現在為您的應用程式的網路呼叫新增了定時資訊,以及狀態和內容型別等其他資訊。對詳細資訊UI進行了額外的改進,以提供websocket或http請求中資料的概述。我們還為這個頁面制定了更多的計劃,包括HTTP請求/響應體和監控gRPC流量。

更新檔案重新命名的匯入語句

Visual Studio Code的另一個新功能是在重新命名時更新匯入,當檔案被移動或重新命名時,它會自動更新_import_語句。

在這裡插入圖片描述

在Visual Studio程式碼中移動Dart檔案,更新匯入語句。

該功能目前只適用於單個檔案,而不是多個檔案或資料夾,但該支援即將到來。

每個工具製造者的工具後設資料。

還有一個需要提及的更新是針對構建Flutter工具的人。我們在GitHub上建立了一個新的專案來捕獲和釋出關於Flutter框架本身的後設資料。它為以下內容提供了機器可讀的資料檔案。

這與我們自己在Android Studio / IntelliJ和VS Code擴充套件中使用的後設資料相同;我們認為在構建自己的工具時,你可能會發現它很有用。事實上,這個後設資料使IntelliJ系列IDE中的功能能夠顯示你的Flutter程式碼中使用的顏色。

在這裡插入圖片描述

與此相關的是IntelliJ和Android Studio中的一個新功能,它可以顯示Color.fromARGB()和Color.fromRGBO()的色塊。
在這裡插入圖片描述

特別感謝GitHub上的dratushnyy,感謝他對IntelliJ中顏色預覽的改進。

平臺互操作的型別安全平臺通道

為了響應外掛作者在使用者調查中的普遍需求,最近我們一直在嘗試如何讓Flutter和主機平臺之間的通訊更安全,更方便外掛Add-to-App。為了滿足這一需求,我們建立了Pigeon,這是一個命令列工具,它使用Dart語法在平臺通道之上生成型別安全的訊息程式碼,而不需要新增額外的執行時依賴。通過Pigeon,你可以呼叫Java/Objective-C/Kotlin/Swift類方法,並通過直接呼叫Dart方法(反之亦然)來傳遞非原生資料物件,而不是手動匹配平臺通道上的方法字串和序列化引數。

在這裡插入圖片描述

雖然還在預釋出階段,但Pigeon已經足夠成熟,以至於我們自己在video_player外掛中使用它。如果你有興趣測試一下Pigeon,請看更新後的平臺頻道文件以及這個示例專案

工具更新太多,無法一一列舉

在Flutter 1.20的時間框架內發生了這麼多偉大的事情,我們不能在這裡列出所有的工具。然而,你可能想看看更新公告本身。

Breaking Changes

和以往一樣,我們儘量保持較低的中斷修改數量。以下是Flutter 1.20版本的列表。

Summary

希望你和我們一樣,對這個版本感到興奮。從很多角度來看,這是Flutter最大的版本。隨著效能的提高,新的和更新的小元件,以及工具的改進,我們只能擊中亮點。我們要感謝您,強大的和不斷增長的社群貢獻者,使每一個Flutter版本都比之前的版本更大、更快、更強。還有更多的內容,對null安全的支援,新版本的Ads、Maps和WebView外掛,以及更多的工具支援正在進行中。(事實上,你可能會對Bob Nystrom關於理解null安全的深入研究感興趣)。

有了Flutter和工具中所有這些額外的力量,你打算構建什麼?

在這裡插入圖片描述

相關文章