當前位置:網站首頁>Flutter 2,移動金融應用開發

Flutter 2,移動金融應用開發

2022-01-27 15:16:15 m0_66264569

原文鏈接:medium.com/flutter/wha…

本次 Flutter 2.2 正式版主要著重於優化:包括 iOS 性能改進,Android 延遲加載組件,針對 Flutter Web 的更新等等

每個 Flutter 新穩定版本的發布都會帶來一些更新,無論是性能增强、新功能還是錯誤修複,盡管 Flutter 2 才發行了兩個月,但 2.2 依舊在 Flutter 2 的基礎上做了很多改進,**該版本合並了 2456 個 PR,涉及 Framework、 engine 和 plugins 的 issue 關閉了 3105 個 **。

Flutter 2.2 更新穩定

此版本在 Flutter 2 之上進行了大量的改進,包括 Android,iOS 和 Web 上的更新,如新的Material 圖標,文本處理,滾動條行為的更新以及對 TextSpan 控件的鼠標光標支持。

Dart 2.13

Flutter 2.2 包含了 Dart 2.13 版本,此 Dart 更新主要包含一個新的類型別名功能,使開發者能够為類型和函數創建別名:

// Type alias for functions (existing)
typedef ValueChanged = void Function(T value);

// Type alias for classes (new!)
typedef StringList = List;

// Rename classes in a non-breaking way (new!)
@Deprecated(“Use NewClassName instead”)
typedef OldClassName = NewClassName;

使用類型別名可以為複雜的長類型提供“漂亮”的短名稱,還可以讓開發者以連續的方式重命名類。

更多 dart 2.13 內容 :medium.com/dartlang/an…

Flutter Web 更新

Flutter Web 作為 Flutter 最新的穩定平臺,Web 在此版本中做了很多的改進。

首先,使用新的 service 加載機制優化了緩存行為,並修複了的重複下載 main.dart.js 的問題。

在 Flutter Web 的早期版本中,後臺在更新下載到應用程序後,用戶不刷新瀏覽器是不會看到這些更改,而從 Flutter 2.2 開始,當檢測到更改時用戶可以直接看到更新,而無需再次手動刷新頁面。

啟用此更改要求重新生成 Flutter 應用的 index.html,所以你可以先保存 index.html 裏的修改,然後删除 index.html 文件,再通過 flutter create . 在項目目錄中運行從而重新創建它。

Flutter 2.2 還對兩個 Web 渲染器進行了改進:

  • 對於 HTML 添加了對字體功能的支持,啟用設置 FontFeature 以及使用畫布 API 渲染文本,以便在懸停時將其顯示在正確的比特置。

  • 對於 HTML 和 CanvasKit都添加了 computeLineMetrics 和對著色器蒙板的支持,以解决 Flutter Web 和移動應用程序之間的差距,例如:開發人員現在可以使用不透明蒙板,使用著色器蒙板執行淡出過渡,並使用 computeLineMetrics 像在移動應用程序中一樣使用。

對於 Flutter Web 而言,Semantics 是的首要任務之一, Flutter 通過構建SemanticsNode 樹來實現可訪問性。Flutter Web 用戶啟用 Semantics 後,框架將生成與 DOM 樹平行的 RenderObjectDOM樹,並將語義屬性轉換為 Aira

在此版本中改進了語義節點的比特置,以縮小使用轉換時移動和桌面 Web 應用程序之間的距離,這意味著在使用轉換為 Widget 設置樣式時,焦點框應正確顯示在元素上。

我們還在配置文件和發布模式下使用命令行標志公開了語義節點調試樹,以幫助開發人員通過可視化為其 Web 應用程序創建的語義節點來調試可訪問性。

要在 Flutter Web 應用啟用此功能,請運行以下命令:

$ flutter run -d chrome --profile \
–dart-define = FLUTTER_WEB_DEBUG_SHOW_SEMANTICS = true

激活該標志後將能够在 Widget 頂部看到語義節點,就可以調試並查看語義元素是否放置在不應放置的比特置。

雖然在支持一系列核心輔助功能方面取得了比較大的進步,但我們將繼續改善輔助功能的支持。在 2.2 穩定版之後的 masterdev 通道上可用的內部版本中,我們還添加了一個 API,使得開發人員能够以編程方式自動啟用其應用程序的可訪問性,並解决了將 Tab 與屏幕閱讀器配合使用的問題。

最後最新版本的 Flutter DevTools 現在支持 Flutter Web 應用

iOS頁面過渡和增量安裝

在此版本中對於 iOS 我們通過將渲染動畫幀所需的時間减少了 75% ,使在 Cupertino 中的頁面過渡更加平滑麼。

在此版本中還實現了在開發過程中增量的iOS安裝,基准測試中我們發現安裝更新版本的 iOS 應用程序的時間减少了40%

使用 Flutter 構建自適應平臺應用

隨著 Flutter 穩定版的支持平臺越來越多,不僅需要考慮支持不同形式的設備(例如移動設備,平板電腦和臺式機),還需要支持不同輸入類型(觸摸與鼠標+鍵盤)以及具有不同平臺的應用,所以我們將:可以根據不同目標平臺的詳細信息,進行自我調整的應用稱為“平臺自適應”應用

更多可見:flutter.dev/docs/develo…

對於根據這些原則為多個平臺編寫的 Demo 的應用程序,我們推薦參考 gSkinnerFlokkFlutter Folio 應用程序。

Flutter 平臺自適應應用指南的 UX 部分基於新的大屏幕 Material 指南,Material 團隊的新指南包括對一些主要布局文章的處理,以及對多個組件的更新和更新的設計套件,所有這些都考慮到了大屏幕。

更多材料圖標

在“ Material 指南”的主題上,在此發行版中我們分割出兩個單獨的 PR,為 Flutter 添加了新的 Material 圖標,包括 Dash 自己的圖標。

這些更新使開發者的應用程序的 Material 圖標總數達到了 7,000 多個,現在可以在fonts.google.com/icons 上按類別和名稱進行搜索。

找到合適的圖標後,新的 Flutter 標簽會顯示如何使用它,或者可以選擇僅下載該圖標以用作應用程序中。

改善文字處理

文本處理一直是 Flutter 裏著重處理的領域,在此版本中已經開始重構處理文本輸入的方式,以啟用諸如在 Widget 點擊冒泡時取消 keystroke 之類的功能,並引入完全自定義與文本操作相關的 keystrokes 的功能

能够取消 keystrokes 使 Flutter 能够實現使用空格鍵和箭頭鍵之類觸發滾動的功能,從而為最終用戶提供更直觀的體驗。在 keystrokes 進入到應用程序中的父窗口 Widget 之前,開發者可以使用相同的功能來處理 keystrokes

另一個示例是可以在 TextField 和按鈕之間使用 Tab 鍵切換:

import ‘package:flutter/material.dart’;

void main() => runApp(App());

class App extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
title: ‘Flutter Text Editing Fun’,
home: HomePage(),
);
}

class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) => Scaffold(
body: Column(
children: [
TextField(),
OutlinedButton(onPressed: () {}, child: const Text(‘Press Me’)),
],
),
);
}

自定義文本操作讓開發者可以執行諸如 TextFieldEnter 鍵的特殊處理之類的操作,例如可以觸發在聊天客戶端中發送消息,同時允許通過 Ctrl + Enter 插入換行符。

這些文本操作使 Flutter 本身可以提供不同的 keystrokes ,以將文本編輯的行為與主機 OS 本身進行匹配,如 Windows 和 Linux上 的 Ctrl + C 和 macOS 上的 Cmd + C

下面的示例將覆蓋默認的向左箭頭操作,並為 BackspaceDelete 鍵提供新的操作:

import ‘package:flutter/material.dart’;
import ‘package:flutter/services.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
title: ‘Flutter TextField Key Binding Demo’,
home: Scaffold(body: UnforgivingTextField()),
);
}

/// A text field that clears itself if the user tries to back up or correct
/// something.
class UnforgivingTextField extends StatefulWidget {
@override
State createState() => _UnforgivingTextFieldState();
}

class _UnforgivingTextFieldState extends State {
// The text editing controller used to clear the text field.
late TextEditingController controller;

@override
void initState() {
super.initState();
controller = TextEditingController();
}

@override
Widget build(BuildContext context) => Shortcuts(
shortcuts: <LogicalKeySet, Intent>{
// This overrides the left arrow key binding that the text field normally
// has in order to move the cursor back by a character. The default is
// created by the MaterialApp, which has a DefaultTextEditingShortcuts
// widget in it.
LogicalKeySet(LogicalKeyboardKey.arrowLeft): const ClearIntent(),

// This binds the delete and backspace keys to also clear the text field.
// You can bind any key, not just those already bound in
// DefaultTextEditingShortcuts.
LogicalKeySet(LogicalKeyboardKey.delete): const ClearIntent(),
LogicalKeySet(LogicalKeyboardKey.backspace): const ClearIntent(),
},
child: Actions(
actions: <Type, Action>{
// This binds the intent that indicates clearing a text field to the
// action that does the clearing.
ClearIntent: ClearAction(controller: controller),
},
child: Center(child: TextField(controller: controller)),
),
);
}

/// An intent that is bound to ClearAction.
class ClearIntent extends Intent {
const ClearIntent();
}

/// An action that is bound to ClearIntent that clears the TextEditingController
/// passed to it.
class ClearAction extends Action {
ClearAction({required this.controller});

final TextEditingController controller;

@override
Object? invoke(covariant ClearIntent intent) {
controller.clear();
}
}

自動滾動行為

實際顯示滾動條時 Android 和 iOS 的邏輯是相同的,而對於桌面應用程序,當內容大於容器時通常會自動顯示滾動條,這需要添加 Scrollbar 作為父 Widget為了在手機或 PC 上都能正常,此版本Scrollbar 會在必要時會自動添加

例如下面所示的無滾動條的代碼:

import ‘package:flutter/material.dart’;

void main() => runApp(App());

class App extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
title: ‘Automatic Scrollbars’,
home: HomePage(),
);
}

class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) => Scaffold(
body: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) => Text(‘Item $index’),
),
);
}

在桌面上運行它時,將顯示一個滾動條:

如果你不喜歡滾動條的外
觀或始終顯示滾動條的邏輯,可以設置一個 ScrollBarTheme,則可以在整個應用範圍內或在特定實例上,通過設置來更改它 ScrollBehavior 來完成修改

鼠標光標在文本範圍內

在 Flutter 的早期版本中,開發者可以在任何窗口小部件上添加鼠標光標(如指示可點擊內容的手),而實際上 Flutter 本身在大多數情况下會添加這些鼠標光標,例如:在所有按鈕上添加一個手形鼠標光標。

但是如果要運行帶有不同文本跨度,且具有各自樣式並且可能足够長的自動換行的格式豐富的文本,那麼TextSpan 就不會是一個 Widget,因此不能用作鼠標光標的可視範圍…而從此版本開始,當擁有 TextSpan 帶有手勢識別器的時將自動獲得相應的鼠標光標

import ‘package:flutter/gestures.dart’;
import ‘package:flutter/material.dart’;
import ‘package:url_launcher/url_launcher.dart’ as urlLauncher;

void main() => runApp(App());

class App extends StatelessWidget {
static const title = ‘Flutter App’;
@override
Widget build(BuildContext context) => MaterialApp(
title: title,
home: HomePage(),
);
}

class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(title: Text(App.title)),
body: Center(
child: RichText(
text: TextSpan(
style: TextStyle(fontSize: 48),
children: [
TextSpan(
text: 'This is not a link, ',
style: TextStyle(color: Colors.black),
),
TextSpan(
text: ‘but this is’,
style: TextStyle(color: Colors.blue),
recognizer: TapGestureRecognizer()
…onTap = () {
urlLauncher.launch(‘https://flutter.dev’);
},
),
],
),
),
),
);
}

現在可以擁有所需的自動換行文字跨度,並且其中任何帶有識別器的文字都將獲得適當的鼠標光標。

image.png

在此版本中,TextSpan 還支持 onEnteronExit ,並且對應的擁有 mouseCursor

Flutter 2.2 更新預覽

除了可用於生產的新功能外,Flutter 2.2 還提供了許多預覽功能,包括 iOS 著色器編譯器性能改進,Android 延遲組件支持,Flutter 桌面更新以及 Sony 的 ARM64 Linux 主機支持

預覽:iOS著色器編譯改進

用圖形渲染術語來說,“著色器” 是要在最終用戶設備上可用的 GPU 編譯並運行的程序。自成立以來 Flutter 一直在底層 Skia 圖形庫中使用著色器,以其自身的高質量圖形效果(包括顏色,陰影,動畫等)提供本機性能。

由於 Flutter API 的靈活性,著色器可以實時生成和編譯,並與需要它們的幀工作負載同步,所以當編譯著色器的時間超出框架預算時,體驗結果對於用戶來說會很明顯。

為了避免出現問題,Flutter 提供了在運行期間訓練緩存著色器的功能,然後將它們打包並捆綁到應用程序中,並在 Flutter Engine 啟動時在第一幀之前進行編譯。這意味著預編譯的著色器不必在幀工作負載期間進行編譯,也不會造成垃圾回收,但是 Skia 最初僅為 OpenGL 實現了此功能。

因此當我們默認情况下在 iOS 上啟用 Metal 以響應 Apple 弃用 OpenGL 時,根據我們的基准測試,渲染幀時間增加了,而用戶報告的產生的垃圾也增加了。

我們的測量數據錶明,這些報告通常是由於著色器編譯時間增加,Skia 為 Metal 後端生成的著色器數量,增加以及已編譯的著色器無法在各次運行之間緩存,而使得 jank 持續到第一次運行之外而導致的一個應用程序。
訓練緩存著色器的功能,然後將它們打包並捆綁到應用程序中,並在 Flutter Engine 啟動時在第一幀之前進行編譯**。這意味著預編譯的著色器不必在幀工作負載期間進行編譯,也不會造成垃圾回收,但是 Skia 最初僅為 OpenGL 實現了此功能。

因此當我們默認情况下在 iOS 上啟用 Metal 以響應 Apple 弃用 OpenGL 時,根據我們的基准測試,渲染幀時間增加了,而用戶報告的產生的垃圾也增加了。

我們的測量數據錶明,這些報告通常是由於著色器編譯時間增加,Skia 為 Metal 後端生成的著色器數量,增加以及已編譯的著色器無法在各次運行之間緩存,而使得 jank 持續到第一次運行之外而導致的一個應用程序。

版權聲明
本文為[m0_66264569]所創,轉載請帶上原文鏈接,感謝
https://cht.chowdera.com/2022/01/202201271516146895.html