Flutter 2.5 的新特性【Flutter專題12】

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"Flutter 2.5 的新特性","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2017 年 Flutter 的首次發佈標誌着跨平臺應用程序混合開發新時代的開始。Flutter 風靡全球,在幾年內,無數公司和開發人員採用 Flutter 作爲開發跨平臺應用程序的平臺和框架。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Flutter 使您能夠開發移動(Android 和 iOS)、桌面,甚至在","attrs":{}},{"type":"link","attrs":{"href":"https://blog.logrocket.com/how-to-migrate-a-flutter-mobile-app-to-the-web/","title":"","type":null},"content":[{"type":"text","text":"Flutter 2.0","attrs":{}}]},{"type":"text","text":"發佈時,甚至是 Web 應用程序,而無需更改其代碼庫或從頭開始重寫應用程序。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個快速發展的框架的最新版本","attrs":{}},{"type":"link","attrs":{"href":"https://medium.com/flutter/whats-new-in-flutter-2-5-6f080c3f3dc","title":"","type":null},"content":[{"type":"text","text":"Flutter 2.5","attrs":{}}]},{"type":"text","text":"包含了一個全新的、更強大的功能。在本指南中,我們將幫助您熟悉 Flutter 2.5 引入的最值得注意的新功能和改進,包括:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如何升級到 Flutter 2.5","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"安卓全屏支持","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Material You (v3) 支持","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"MaterialState.scrolledUnder 並支持 AppBar.backgroundColor","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"材料banner","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可切換的鍵盤快捷鍵","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"改進的小部件檢查器","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"向 VS Code 項目添加依賴項","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"新應用模板","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"如何升級到 Flutter 2.5","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"您可以通過運行以下命令將 Flutter 版本升級到 v2.5:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"typescript"},"content":[{"type":"text","text":"flutter upgrade\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Flutter CLI 工具將完成將您的 Flutter SDK 升級到最新版本 2.5 的工作。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"要驗證升級是否成功,請運行以下命令:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"flutter --version\n\nFlutter 2.5.0 • channel stable • https://github.com/flutter/flutter.git\nFramework • revision 4cc385b4b8 () • 2021-11-27 23:01:49 -0700\nEngine • revision f0826da7ef\nTools • Dart 2.14.0\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"確保 Flutter 版本是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"2.5.0","attrs":{}}],"attrs":{}},{"type":"text","text":". 上面的輸出是我的系統的結果。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"安卓全屏支持","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Flutter 對其在 Android 中的全屏模式進行了相當多的更改。全屏模式會影響系統 UI 覆蓋的可見性,例如狀態和底部導航欄。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這一變化爲 Android 和 iOS引入了","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/flutter/flutter/pull/81303","title":"","type":null},"content":[{"type":"text","text":"新的模式配置","attrs":{}}]},{"type":"text","text":",稱爲傾斜、沉浸式、沉浸式粘性和邊緣到邊緣。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當在屏幕上的任何位置點擊顯示時,後仰模式會顯示系統 UI 覆蓋(狀態欄和導航欄)。此操作生成的事件不會傳遞給應用程序。這種全屏體驗類似於 iOS 設備","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"沉浸模式會導致在邊緣滑動屏幕時顯示系統 UI 疊加層(狀態欄和導航欄)。與後傾模式一樣,此操作生成的事件不會傳遞給應用程序","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"沉浸式粘性模式類似於沉浸式模式;滑動屏幕邊緣時會顯示系統 UI 疊加層。這裏的區別在於應用程序會收到事件通知","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"邊緣到邊緣模式會導致系統 UI 覆蓋顯示/渲染在應用程序上。應用程序 UI 位於系統(狀態欄和導航欄)疊加層的後面","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Material You (v3) 支持","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://material.io/blog/announcing-material-you","title":"","type":null},"content":[{"type":"text","text":"Material You","attrs":{}}]},{"type":"text","text":"是 Material Design 的新 Google 版本。隨之而來的是很多支持,Flutter 2.5 支持","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"FloatingActionButton","attrs":{}}],"attrs":{}},{"type":"text","text":"大小和主題。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"FloatingActionButton","attrs":{}}],"attrs":{}},{"type":"text","text":"尺寸可被構造成具有四種尺寸:","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"small","attrs":{}}],"attrs":{}},{"type":"text","text":",","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"regular","attrs":{}}],"attrs":{}},{"type":"text","text":",","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"large","attrs":{}}],"attrs":{}},{"type":"text","text":",和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"extended","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"codeinline","content":[{"type":"text","text":"small","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"FAB 看起來很小。請參閱下面的代碼:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"floatingActionButton: FloatingActionButton.small(\nonPressed: _incrementCounter,\ntooltip: 'Increment',\nchild: const Icon(Icons.add),\n),\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面的代碼將創建並呈現一個小的 FAB 小部件:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b7/b720d894641a928cdb48f8fd6e154093.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"隨着方法","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"small","attrs":{}}],"attrs":{}},{"type":"text","text":",","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"large","attrs":{}}],"attrs":{}},{"type":"text","text":",","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"extended","attrs":{}}],"attrs":{}},{"type":"text","text":"被添加到","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"FloatingActionButton","attrs":{}}],"attrs":{}},{"type":"text","text":"類,所以我們可以很容易地通過使用他們,創造各種FAB尺寸。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"codeinline","content":[{"type":"text","text":"regular","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"該","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"regular","attrs":{}}],"attrs":{}},{"type":"text","text":"尺寸是FAB的正常大小。我們可以像平常一樣使用它","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"FloatingActionButton","attrs":{}}],"attrs":{}},{"type":"text","text":":","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":" floatingActionButton: FloatingActionButton(\n onPressed: _incrementCounter,\n tooltip: 'Increment',\n child: const Icon(Icons.add),\n ), // This trailing comma makes auto-formatting nicer for build methods.\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"codeinline","content":[{"type":"text","text":"large","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"large","attrs":{}}],"attrs":{}},{"type":"text","text":" 呈現非常大的 FAB 尺寸。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"要使用此大小,請調用類中的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"large","attrs":{}}],"attrs":{}},{"type":"text","text":"方法","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"FloatingActionButton","attrs":{}}],"attrs":{}},{"type":"text","text":":","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":" floatingActionButton: FloatingActionButton.large(\n onPressed: _incrementCounter,\n tooltip: 'Increment',\n child: const Icon(Icons.add),\n ), // This trailing comma makes auto-formatting nicer for build methods.\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/26/26a936e1764bce61d0c65c8b1a5ec62e.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"codeinline","content":[{"type":"text","text":"extended","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"extended","attrs":{}}],"attrs":{}},{"type":"text","text":" 結合 FAB 上的文本和圖標。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"extended","attrs":{}}],"attrs":{}},{"type":"text","text":"在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"FloatingActionButton","attrs":{}}],"attrs":{}},{"type":"text","text":"類上調用該方法。一個","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"label","attrs":{}}],"attrs":{}},{"type":"text","text":"參數被傳遞給","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"extended","attrs":{}}],"attrs":{}},{"type":"text","text":"方法。此參數將是 FAB 將顯示的文本。然後,","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"icon","attrs":{}}],"attrs":{}},{"type":"text","text":"還將一個參數傳遞給該方法,該","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"icon","attrs":{}}],"attrs":{}},{"type":"text","text":"參數是將顯示在 FAB 標籤旁邊的圖標。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":" floatingActionButton: FloatingActionButton.extended(\n onPressed: _incrementCounter,\n tooltip: 'Increment',\n label: Text(\"Increment\"),\n icon: const Icon(Icons.add),\n )\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/5a/5a1e1377728ba11461207cb5075ab62c.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們可以在這個擴展的 FAB 中自定義標籤和圖標之間的間距。爲此,請","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"extendedIconLabelSpacing","attrs":{}}],"attrs":{}},{"type":"text","text":"向該","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"extended","attrs":{}}],"attrs":{}},{"type":"text","text":"方法傳遞一個參數:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"floatingActionButton: FloatingActionButton.extended(\n onPressed: _incrementCounter,\n tooltip: 'Increment',\n label: Text(\"Increment\"),\n icon: const Icon(Icons.add),\n extendedIconLabelSpacing: 30\n )\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們將 設置","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"extendedIconLabelSpacing","attrs":{}}],"attrs":{}},{"type":"text","text":"爲 的值","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"30","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/04/04b611b5cb47e45d7c55afb78a21ba9d.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Flutter 2.5 中的主題浮動操作按鈕","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們可以在我們的應用程序中對各種尺寸的 FAB 進行主題化。這是通過","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"FloatingActionButtonThemeData","attrs":{}}],"attrs":{}},{"type":"text","text":"類完成的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先,創建一個實例","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"FloatingActionButtonThemeData","attrs":{}}],"attrs":{}},{"type":"text","text":"並將設置傳遞給它:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const BoxConstraints constraints = BoxConstraints.tightFor(width: 100.0, height: 100.0);\n\nconst FloatingActionButtonThemeData(\n largeSizeConstraints: constraints,\n backgroundColor: Colors.green,\n),\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在上面的示例中,我們將 FAB 的盒模型設置爲","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"100.0","attrs":{}}],"attrs":{}},{"type":"text","text":"高度和寬度的單位,並將背景顏色設置爲","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"green","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"讓我們將此實例設置","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"FloatingActionButtonThemeData","attrs":{}}],"attrs":{}},{"type":"text","text":"爲小部件中的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"ThemeData","attrs":{}}],"attrs":{}},{"type":"text","text":"調用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"MaterialApp","attrs":{}}],"attrs":{}},{"type":"text","text":":","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"@override\n Widget build(BuildContext context) {\n const BoxConstraints constraints = BoxConstraints.tightFor(width: 100.0, height: 100.0);\n return MaterialApp(\n title: 'Flutter Demo',\n theme: ThemeData(\n floatingActionButtonTheme: const FloatingActionButtonThemeData(\n largeSizeConstraints: constraints,\n backgroundColor: Colors.green,\n ),\n primarySwatch: Colors.blue,\n ),\n home: const MyHomePage(title: 'Flutter Demo Home Page'),\n );\n }\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此主題將影響我們將在應用程序中創建的 FAB。我們應用中的所有 FAB 都是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"100.0","attrs":{}}],"attrs":{}},{"type":"text","text":"寬度和高度單位,背景顏色爲綠色。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"讓我們添加兩個 FAB:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"floatingActionButton: Container(\n padding: const EdgeInsets.all(50.0),\n child:Row(\n children: [\n FloatingActionButton.extended(\n onPressed: _incrementCounter,\n tooltip: 'Increment',\n label: Text(\"Increment\"),\n icon: const Icon(Icons.add),\n ),\n FloatingActionButton.extended(\n onPressed: ()=>{},\n tooltip: 'Decrement',\n label: Text(\"Decrement\"),\n icon: const Icon(Icons.cancel_sharp),\n ),\n ],\n ),\n)\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們的兩個 FAB 沒有設置顏色,但是我們在 中設置的主題","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"ThemeData","attrs":{}}],"attrs":{}},{"type":"text","text":"會影響它們。它們將具有","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"100.0","attrs":{}}],"attrs":{}},{"type":"text","text":"單位和綠色背景的框約束。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/42/42517064e6323cbcf28fef61a5136d02.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"codeinline","content":[{"type":"text","text":"MaterialState.scrolledUnder","attrs":{}}],"attrs":{}},{"type":"text","text":" 並支持 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"AppBar.backgroundColor","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此功能是應用於AppBar或SliverAppBar的背景顏色的效果。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Flutter團隊的補充一個狀態到。當小部件與下方可滾動的內容重疊時,會設置此狀態。AppBar 設置此狀態以指示一段可滾動內容已向上滾動到其後面。MaterialState.scrolledUnder","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"MaterialState``scrollUnder","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通過在 AppBar 或 SliverAppBar 的背景顏色屬性中設置監聽器,可以在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"scrollUnder","attrs":{}}],"attrs":{}},{"type":"text","text":"事件觸發時更改顏色:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"dart"},"content":[{"type":"text","text":"class _MyHomePageState extends State {\n\nstatic Widget buildListItem(BuildContext context, int index) {\n final Color color = Colors.primaries[index % Colors.primaries.length];\n return Padding(\n padding: EdgeInsets.all(2),\n child: ListTile(\n title: Text('List Item $index'),\n ),\n );\n }\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n backwardsCompatibility: false,\n elevation: 0,\n backgroundColor: MaterialStateColor.resolveWith((Set states) {\n return states.contains(MaterialState.scrolledUnder) ? Colors.red : Colors.blue;\n }),\n title: Text('Hello World'),\n ),\n body: ListView.builder(\n itemCount: 200,\n itemBuilder: buildListItem,\n ),\n );\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們將 AppBar 設置爲","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"backgroundColor","attrs":{}}],"attrs":{}},{"type":"text","text":"從其當前狀態解析顏色。我們調用了並在其中設置了一個回調函數。該回調函數接收 AppBa 中的所有狀態。","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"MaterialStateColor.resolveWith(...)","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然後我們檢查狀態是否包含. 這告訴我們 AppBar 已被滾動到下方,因此我們返回靛藍色。如果不是,則返回藍色。","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"MaterialState.scrolledUnder","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/3e/3e41e8b41ed952a83047a268ea3b1ffb.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"codeinline","content":[{"type":"text","text":"ScrollMetricsNotification","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"該","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/flutter/flutter/pull/85221","title":"","type":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"ScrollMetricsNotification","attrs":{}}],"attrs":{}}]},{"type":"text","text":"功能使您能夠偵聽滾動條以檢測滾動條的內容何時發生更改。如果寡婦或可滾動的父級的大小發生更改,也會通知可滾動。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下面是一個例子:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"dart"},"content":[{"type":"text","text":"class _MyHomePageState extends State {\n double windowSize = 200.0;\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n backwardsCompatibility: false,\n elevation: 0,\n title: Text('Hello World'),\n ),\n body: NotificationListener(\n onNotification: (ScrollMetricsNotification notification) {\n ScaffoldMessenger.of(notification.context).showSnackBar(\n const SnackBar(\n content: Text('Scroll metrics changed!'),\n ),\n );\n return false;\n },\n child: Scrollbar(\n isAlwaysShown: true,\n child: SizedBox(\n height: windowSize,\n width: double.infinity,\n child: const SingleChildScrollView(\n child: FlutterLogo(\n size: 300.0,\n ),\n ),\n ),\n ),\n ),\n floatingActionButton: Container(\n padding: const EdgeInsets.all(50.0),\n child: Row(\n children: [\n FloatingActionButton.extended(\n onPressed: () => {\n setState(() {\n windowSize += 10.0;\n })\n },\n tooltip: 'Adjust WindowSize',\n label: Text(\"Adjust WindowS\"),\n icon: const Icon(Icons.cancel_sharp),\n ),\n ],\n ),\n )\n );\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/12/1292ffe05c8ae10ced72fa0c5c655993.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們有一個","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Scrollbar","attrs":{}}],"attrs":{}},{"type":"text","text":"封裝在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"NotificationListener","attrs":{}}],"attrs":{}},{"type":"text","text":"小部件中。該","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"ScrollBar","attrs":{}}],"attrs":{}},{"type":"text","text":"有一個","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"SizedBox","attrs":{}}],"attrs":{}},{"type":"text","text":"; 所述","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"SizedBox","attrs":{}}],"attrs":{}},{"type":"text","text":"的高度被附接到","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"windowSize","attrs":{}}],"attrs":{}},{"type":"text","text":"狀態。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"onNotification","attrs":{}}],"attrs":{}},{"type":"text","text":"在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"NotificationListener","attrs":{}}],"attrs":{}},{"type":"text","text":"小部件中設置了一個回調。當","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"SizedBox","attrs":{}}],"attrs":{}},{"type":"text","text":"內容更改時調用此回調。請注意,回調接收一個參數,該參數 的實例是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"ScrollMetricsNotification","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"MaterialBanner","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最後,","attrs":{}},{"type":"link","attrs":{"href":"https://api.flutter.dev/flutter/material/MaterialBanner-class.html","title":"","type":null},"content":[{"type":"text","text":"MaterialBanner","attrs":{}}]},{"type":"text","text":"類就在這裏。此功能使您能夠在 Flutter 應用程序的頂部添加banner。此banner會一直保留到被取消爲止。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此 Material Design Banner由","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"ScaffoldMessenger","attrs":{}}],"attrs":{}},{"type":"text","text":"類處理。這個","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"ScaffoldMessenger","attrs":{}}],"attrs":{}},{"type":"text","text":"類有我們可以用來創建和刪除 MaterialBanners 的方法。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"codeinline","content":[{"type":"text","text":"ScaffoldMessenger.of(context).showMaterialBanner","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此方法創建並顯示一個 Material Banner。傳遞一個小部件;這是該方法在我們的應用程序頂部顯示的 MaterialBanner。","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"ScaffoldMessenger.of(context).showMaterialBanner``MaterialBanner","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"dart"},"content":[{"type":"text","text":"ScaffoldMessenger.of(context).showMaterialBanner(\n MaterialBanner(\n content: const Text('Yay!! Do you like me!!'),\n leading: const Icon(Icons.warning),\n backgroundColor: Colors.purple,\n actions: [\n TextButton(\n child: const Text('Dismiss', style: const TextStyle(color: Colors.white)),\n onPressed: () => ScaffoldMessenger.of(context)\n .hideCurrentMaterialBanner(),\n ),\n ],\n ),\n)\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面的代碼將顯示一個 MaterialBanner。看到一個","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"MaterialBanner","attrs":{}}],"attrs":{}},{"type":"text","text":"小部件被傳遞給","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"showMaterialBanner","attrs":{}}],"attrs":{}},{"type":"text","text":"方法。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"MaterialBanner","attrs":{}}],"attrs":{}},{"type":"text","text":"小部件中,我們傳遞了以下道具:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"content","attrs":{}}],"attrs":{}},{"type":"text","text":":這個道具設置banner的主體。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"leading","attrs":{}}],"attrs":{}},{"type":"text","text":":這將設置在banner開頭的圖標。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"backgroundColor","attrs":{}}],"attrs":{}},{"type":"text","text":":這會設置banner小部件的背景顏色。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"actions","attrs":{}}],"attrs":{}},{"type":"text","text":":這將設置將位於banner小部件末尾的按鈕。","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"codeinline","content":[{"type":"text","text":"ScaffoldMessenger.of(context).hideCurrentMaterialBanner","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此方法刪除現有的 MaterialBanner。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"dart"},"content":[{"type":"text","text":"actions: [\n TextButton(\n child: const Text('Dismiss', style: const TextStyle(color: Colors.white)),\n onPressed: () => ScaffoldMessenger.of(context)\n .hideCurrentMaterialBanner(),\n ),\n],\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"完整代碼:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"// main.dart\nimport 'package:flutter/material.dart';\n\nvoid main() {\n runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n // Remove the debug banner\n debugShowCheckedModeBanner: false,\n title: '堅果前端',\n theme: ThemeData(\n primarySwatch: Colors.indigo,\n ),\n home: HomePage());\n }\n}\n\nclass HomePage extends StatefulWidget {\n const HomePage({Key key}) : super(key: key);\n\n @override\n _HomePageState createState() => _HomePageState();\n}\n\nclass _HomePageState extends State {\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n backwardsCompatibility: false,\n elevation: 0,\n title: Text('Hello World'),\n ),\n body: NotificationListener(\n onNotification: (ScrollMetricsNotification notification) {\n ScaffoldMessenger.of(notification.context).showSnackBar(\n const SnackBar(\n content: Text('Scroll metrics changed!'),\n ),\n );\n return false;\n },\n child: Scrollbar(\n isAlwaysShown: true,\n child: SizedBox(\n height: 100.0,\n width: double.infinity,\n child: const SingleChildScrollView(\n child: FlutterLogo(\n size: 300.0,\n ),\n ),\n ),\n ),\n ),\n floatingActionButton: Container(\n padding: const EdgeInsets.all(50.0),\n child: Row(\n children: [\n FloatingActionButton.extended(\n onPressed: () => {\n ScaffoldMessenger.of(context).showMaterialBanner(\n MaterialBanner(\n content: const Text('Yay!! Do you like me!!'),\n leading: const Icon(Icons.warning),\n backgroundColor: Colors.purple,\n actions: [\n TextButton(\n child: const Text('Dismiss',\n style: const TextStyle(color: Colors.white)),\n onPressed: () => ScaffoldMessenger.of(context)\n .hideCurrentMaterialBanner(),\n ),\n ],\n ),\n )\n },\n tooltip: 'Show MaterialBanner',\n label: Text(\"Show MaterialBanner\"),\n icon: const Icon(Icons.add),\n ),\n ],\n ),\n ));\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b2/b2d18359ac8f8f90553aac3f99a3a3e6.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Flutter 2.5 中的其他顯著特性","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"除了上述新的 UI 功能外,Flutter 2.5 還引入了對可切換鍵盤快捷鍵的支持、改進的小部件檢查器工具、支持在 VS Code 項目中添加依賴項以及新的應用程序模板。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"讓我們仔細看看。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"可切換的鍵盤快捷鍵","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2.5 版對 Flutter 的文本編輯鍵盤快捷鍵進行了一些更新。最值得注意的變化是快捷方式現在可以覆蓋。Flutter 2.5 中新的可覆蓋鍵盤快捷鍵使您能夠設置快捷鍵組合以執行自定義操作。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"改進的小部件檢查器","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"該","attrs":{}},{"type":"link","attrs":{"href":"https://flutter.dev/docs/development/tools/devtools/inspector","title":"","type":null},"content":[{"type":"text","text":"Flutter部件檢查","attrs":{}}]},{"type":"text","text":"得到了與flutter2.5的發佈一個重大改版。新的和改進的小部件檢查器現在可以更詳細地查看您的小部件,包括深入瞭解爲什麼特定的幀可能會卡頓。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"檢查框架揭示了幀信息,包括幀的,,,和。","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Frame Time (UI)``Frame Time(Raster)``Jank``Shader Compilation","attrs":{}}],"attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"向 VS Code 項目添加依賴項","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Flutter 插件對 Visual Studio Code 和 IntelliJ 的支持也隨着 Flutter 進行了更新。現在可以從 Flutter 插件向項目添加新的依賴項。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這是通過以下命令完成的:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Dart: Add Dependency","attrs":{}}],"attrs":{}},{"type":"text","text":" 在項目的主要依賴中","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/Dart-Code/Dart-Code/issues/3306","title":"","type":null},"content":[{"type":"text","text":"添加一個Flutter包","attrs":{}}]}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Dart: Add Dev Dependency","attrs":{}}],"attrs":{}},{"type":"text","text":" 添加項目在項目開發過程中使用","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/Dart-Code/Dart-Code/pull/3474","title":"","type":null},"content":[{"type":"text","text":"的依賴項","attrs":{}}]}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"新應用模板","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最初,當您使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"flutter create app","attrs":{}}],"attrs":{}},{"type":"text","text":". 計數器模板的問題在於它沒有爲構建真實世界的應用程序提供一個好的起點。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Flutter 2.5 引入了一個具有生產級質量特性的新模板,包括:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"主題化","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"頁面導航","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本地化和國際化","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不同手機像素的示例圖像","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"要在搭建新 Flutter 項目時使用這個新模板,請運行以下命令:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"dart"},"content":[{"type":"text","text":"flutter create -t skeleton app\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"好的,今天關於flutter2.5的新特性就介紹到這兒,謝謝大家的閱讀!","attrs":{}}]}]}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章