Dart 2.3 發布帶來構建UI 新特性
Google I/O 2019第二天,官方發布了Dart 2.3穩定版本。此版本針對構建用戶界面進行了優化,改善了開發者在開發UI時的編碼體驗,為開發Flutter UI提供了新的工具支持,同時還提供了兩個新的網站:dart.dev與pub.dev 。
用於構建用戶界面的新語言特性
在客戶端開發方面,Dart 與Flutter 團隊之間長期合作的項目之一就是使用Dart 捕獲用戶界面代碼,而不需要標記語言。開發團隊認為對行為和佈局使用單一語言具有很大的好處,包括減少上下文切換、不必學習兩種語言,並在構建UI 時允許通用編程語言的所有抽像功能。
在Dart 最近幾個版本中進行了一些改進,例如簡化構建widget 的代碼,添加自動的int-to-double 轉換以及添加set literals。Dart 2.3 中,進一步帶來了三個用於描述UI 的新特性:基於列表、條件與重複。
可以將UI視為widget節點的樹,一些節點包含widget列表,例如可滾動元素的列表。通常這些列表是從其它列表構建的。為此,添加了一個新的spread operator 擴展運算符特性,用於將元素從一個列表解壓到另一個列表。在下面的示例中,buildMainElements()返回一個widget列表,然後使用擴展運算符…將其解壓到周圍列表中:
Widget build(BuildContext context) { return Column(children: [ Header(), ...buildMainElements(), Footer(), ]);}
另一個常見的UI任務是根據條件包含特定元素。例如,開發者可能希望在所有頁面上都帶有“下一步”按鈕,當然條件是最後一頁不需要這個按鈕。在Dart 2.3中,可以使用以下 collection if 執行此操作:
Widget build(BuildContext context) { return Column(children: [ Text(mainText), if (page != pages.last) FlatButton(child: Text('Next')), ]);}
最後,UI經常從其它重複元素構建重複元素,可以使用新的collection for 特性來描述這一點:
Widget build(BuildContext context) { return Column(children: [ Text(mainText), for (var section in sections) HeadingAction(section.heading), ]);}
這三個新特性是語言特性,而不是標記命令,因此它們是完全可組合的,可以在處理集合的任何上下文中使用。這些特性包含在Flutter 1.5 版本中,可在Dart 2.3 版本中找到。
此外還添加了新的lint,可以在靜態分析中配置這些lint 以強制使用新的spread、collection if 和features for 特性。
IDE 和編輯器功能
配合Dart 2.3 的UI 特性改進,此版本還為IDE 支持添加了新的UI Guides 功能。UI Guides 是在UI 代碼中繪製的水平和垂直線,使得更容易看到Flutter UI build() 方法的樹結構。以下是一個計算器應用示例,其中UI Guides 清楚地表示了 UI 是從包含多個KeyRows 的擴展列構建的,每個KeyRows 包含NumberKeys。
UI Guides 在IntelliJ IDEA 35.2 和Android Studio 插件中提供。今後VS Code 中也有望提供類似支持。
另一方面,開發者在使用API 時經常會使用代碼自動補全功能,這一功能在補全已導入的庫中的API 效果很好,但對於還未導入的庫則不起作用。新版本 IDE 現在彌補了這一不足,開發者現成可以在任何前綴上調用代碼補全,並且將看到當前包中所有API 的完整性,它直接依賴的包以及SDK。如果補全的是尚未導入的庫中的代碼,則IDE 會為自動添加導入語句。
新的Dart 與Pub 網站
開發團隊為Dart平台構建一個新網站:dart.dev,https://dart.dev。
該網站提供了一個全新的登陸頁面,專注於解釋Dart平台的核心優勢,同時更新了文檔頁面,以獲得更好的導航和更具視覺吸引力。最後,對所有內容進行了大量重組,以使其更容易被發現,並為以前缺少的核心內容添加了新頁面。此外,更新了Pub包網站,並使用了方便的新URL:pub.dev。