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