0%

【文章翻譯】Announcing Dart 2.3: Optimized for building user interfaces

【文章內容使用 Gemini 1.5 Pro 自動翻譯產生】

宣佈 Dart 2.3:針對建構使用者介面最佳化

今天,我們宣佈 Dart 2.3 SDK 的穩定版本發佈,其中包含新的語言功能,可改善您在開發使用者介面時的編碼體驗,新的工具支援用於開發 Flutter UI,以及兩個新的網站:dart.devpub.dev

Dart 的發展勢頭

我們每年都期待的開發者研究報告之一是 StackOverflow 開發者調查,它提供了關於開發者趨勢和對不同技術的看法的一個綜合數據集。今年的版本展示了 Dart 的人氣和知名度的增長,它首次進入了 最受歡迎的語言 名單,與其他流行語言如 JavaScript、C# 和 Go 並列,並領先於 C++、F# 和 R 等語言。同時,我們在 Flutter 社群的好朋友在 最受歡迎的框架 名單中排名第三。上個月 Codementor 關於 學習和不學習哪些程式語言 的調查也傳達了類似的正面消息:

兩個真正名列前茅的、進步最大的語言的例子是 Dart 和 Ruby」。 Codementor,2019 年 4 月 來源

我們要向 Dart 社群的所有開發者致以誠摯的 感謝。看到您採用 Dart、提供您的回饋,並在我們嘗試建構用於在任何平台上運行快速應用程式的最佳客戶端優化語言的過程中繼續與我們同行,這對我們來說意義重大。

用於建構使用者介面的新語言功能

談到客戶端開發,Dart 和 Flutter 團隊之間一項長期合作的項目是為使用 Dart 捕捉使用者介面程式碼創造良好的支援,而無需標記語言。我們認為,對行為和佈局使用單一語言具有很大的優勢。這些優勢包括減少上下文切換、無需學習兩種語言,以及在建構 UI 時允許使用通用程式語言的所有抽象功能。

在過去的幾個版本中,我們進行了一些改進,例如簡化 建構 widget 的程式碼、加入自動 int 到 double 的轉換,以及加入 集合字面量。在 Dart 2.3 中,我們又向前邁出了一大步,提供了三個新功能,用於表達基於列表、條件或重複的 UI。

您可以將 UI 視為 widget 節點的樹狀結構。某些節點包含 widget 列表,例如可捲軸元素的列表。通常,這些列表是由其他列表建構的。為此,我們加入了一個新的 展開運算符 功能,用於將一個列表中的元素 解包 到另一個列表中。在下面的範例中,buildMainElements() 返回一個 widget 列表,然後使用展開運算符 ... 將其解包到周圍的列表中:

另一個常見的 UI 任務是根據條件包含特定元素。例如,您可能希望在除最後一頁之外的所有頁面上都包含一個 下一步 按鈕。使用 Dart 2.3,您可以使用 集合 if 來做到這一點:

最後,UI 通常會從其他重複的元素建構重複的元素。您可以使用新的 集合 for 功能來表達這一點:

而且由於這三個新功能是語言功能,而不是標記命令,因此它們是完全可組合的,並且可以在您處理集合的任何上下文中使用。這些功能包含在 Flutter 1.5 版本中,並且在您可以今天下載的 Dart 2.3 版本中提供。我們還加入了新的 lint,您可以在 靜態分析中設定 以強制使用新的 spread集合 if集合 for 功能。

有關加入這些功能的所有工作的詳細資訊,請查看 Dart 語言團隊工程師 Bob Nystrom(又名 munificentbob)的 最近的這篇文章

我們還要感謝參與 UX 研究的開發者,這些研究對於塑造這些新的語言功能至關重要。

IDE 和編輯器功能

為了與 Dart 2.3 的 UI 主題保持一致,我們還在 IDE 支援中加入了新的 UI 指南功能。UI 指南是在 UI 程式碼中繪製的水平和垂直線,可以更輕鬆地查看 Flutter UI build() 方法的樹狀結構。以下是一個範例(來自計算機應用程式),其中 UI 指南清楚地說明了 UI 是由一個展開的 Column 建構的,其中包含多個 KeyRow,每個 KeyRow 都包含 NumberKey。

IDE with UI Guides visualizing the tree structure of UI code

UI 指南在 IntelliJ IDEA 和 Android Studio plugin 的 版本 35.2 中提供。要啟用此功能,請選擇設定 偏好設定 > 語言和框架 > Flutter > UI 指南。我們希望在後續版本中在 VS Code 中提供類似的支援。

最後,我們觀察到開發者經常使用 IDE 中的程式碼完成作為探索 API 的一種方式。程式碼完成對於探索您已匯入的函式庫中的 API 非常有效,但它不適用於尚未匯入的函式庫中的 API。我們的工具現在可以支援後一種使用案例:您可以在任何前綴上叫用程式碼完成,並且您將看到目前套件、它直接依賴的套件和 SDK 中所有 API 的完成。如果您從尚未匯入的函式庫中選擇一個完成(標記為 自動匯入,如下面的動畫所示),則工具會為您加入匯入語句。

Animation showing code completion & automatic import adding

這個新的自動匯入功能在 VS Code 中的 v2.26 plugin、IntelliJ 2019.1 和即將發佈的 Android Studio 3.5 版本中提供。

新的 Dart 和 Pub 網站

最後,但同樣重要的是,在過去的幾個月中,我們一直忙於為 Dart 平台建構一個新的網站:dart.dev

Redesigned https://dart.dev homepage

這個新的網站提供了一個全新的首頁,重點是解釋 Dart 平台的核心優勢。我們還更新了文件頁面,使其具有更好的導航和更具視覺吸引力。最後,我們對所有內容進行了大量的重新組織,以便更容易發現,並為以前缺少的核心內容加入了新的頁面。

同樣地,我們也對 Pub 套件網站進行了視覺更新,並將其移至一個方便的新網址:pub.dev

我們很樂意聽到您對這兩個網站的回饋。如果您發現問題或有任何建議,請在 dart.dev 問題追蹤器pub.dev 問題追蹤器 中建立一個問題。感謝您的支援!


宣佈 Dart 2.3:針對建構使用者介面最佳化 最初發佈在 Dart 上的 Medium,人們在那裡透過突出顯示和回應這個故事來繼續討論。