在 Flutter 中，共性元素動畫（Shared Element Transitions）用于在頁面導(dǎo)航或組件切換時創(chuàng)建視覺上更流暢和連貫的動畫效果。這種動畫可以使用戶感受到兩個界面之間的“物理聯(lián)系”，比如圖片從縮略圖到全屏的擴大效果。

前置知識點整理

Navigator

在 Flutter 中，`Navigator` 是一個用于管理應(yīng)用頁面的堆?？丶?。通過 `Navigator`，您可以在應(yīng)用中實現(xiàn)頁面導(dǎo)航。`MaterialPageRoute` 是 Flutter 提供的一種常用的頁面路由，它遵循 Material Design 的動畫和過渡規(guī)范。

代碼示例

Navigator.of(context).push(MaterialPageRoute(builder: (context) {return const Page();},fullscreenDialog: true
));

代碼解析

`Navigator.of(context)`

• `Navigator.of(context)` 獲取與指定 `BuildContext` 關(guān)聯(lián)的 `Navigator` 實例。`Navigator` 是一個用于管理應(yīng)用頁面導(dǎo)航的控件。

• `context` 是當(dāng)前小部件樹中的上下文，通常在小部件的 `build` 方法中可以直接獲取。

`push` 方法:

`push` 方法用于將新的路由（頁面）推入導(dǎo)航堆棧的頂部。這會導(dǎo)致新頁面顯示在當(dāng)前頁面之上。

`MaterialPageRoute`:

• MaterialPageRoute` 是一種實現(xiàn) `PageRoute` 的類，用于在 Material Design 樣式的應(yīng)用中創(chuàng)建路由。

• 它提供了標(biāo)準(zhǔn)的頁面切換動畫和過渡效果。

`builder` 參數(shù):

• `builder` 是一個回調(diào)函數(shù)，接收一個 `BuildContext` 參數(shù)，并返回一個要顯示的新頁面的小部件。

• 在這個例子中，`builder` 返回一個 `Page` 實例。`const` 修飾符表示 `Page` 是不可變的，并且是編譯時常量。

`fullscreenDialog` 參數(shù):

• `fullscreenDialog: true` 指定新頁面是否應(yīng)該以全屏對話框的形式出現(xiàn)。

• 當(dāng) `fullscreenDialog` 設(shè)置為 `true` 時，新頁面通常會從屏幕底部滑入，并帶有關(guān)閉按鈕（通常是一個“關(guān)閉”圖標(biāo)），這與典型的頁面過渡動畫有所不同，通常用于需要用戶特別注意的內(nèi)容頁面。

使用場景

• 標(biāo)準(zhǔn)頁面導(dǎo)航: 使用 `MaterialPageRoute` 是創(chuàng)建標(biāo)準(zhǔn) Material 設(shè)計風(fēng)格頁面的常用方法。它自動處理頁面切換的動畫和過渡效果。

• 全屏對話框: 設(shè)置 `fullscreenDialog` 為 `true` 可以用于顯示用戶需要特別注意的內(nèi)容，比如設(shè)置頁面、表單頁面等。它通常用于在移動應(yīng)用中模擬對話框或模態(tài)視圖。

注意事項

• 航堆棧: 每次調(diào)用 `push` 方法時，新頁面都會被添加到導(dǎo)航堆棧的頂部。當(dāng)用戶按下返回按鈕或調(diào)用 `Navigator.pop(context)` 時，堆棧頂部的頁面會被移除。

• 上下文的使用: 確保 `context` 是當(dāng)前頁面的上下文，并且在適當(dāng)?shù)奈恢?#xff08;如 `build` 方法中）使用它，以便正確獲取 `Navigator` 實例。

這段代碼展示了如何在 Flutter 應(yīng)用中使用 `Navigator` 和 `MaterialPageRoute` 進(jìn)行頁面導(dǎo)航，并通過 `fullscreenDialog` 參數(shù)實現(xiàn)全屏對話框效果。

InkWell

`InkWell` 是 Flutter 中用于實現(xiàn)“水波紋”點擊效果的一個小部件。當(dāng)用戶在支持 `Material` 設(shè)計的應(yīng)用中點擊某個組件時，`InkWell` 可以提供一個視覺反饋。這種點擊效果通常用于提升用戶體驗，使交互更加直觀。

`InkWell` 的主要屬性

• `child`:`InkWell` 的子小部件。通常是您希望作為點擊目標(biāo)的部件，比如一個文本、圖標(biāo)或者容器。
• `onTap`:點擊時觸發(fā)的回調(diào)函數(shù)。當(dāng)用戶點擊 `InkWell` 時，`onTap` 中的代碼將被執(zhí)行。
• `onDoubleTap`:雙擊時觸發(fā)的回調(diào)函數(shù)。
• `onLongPress`:長按時觸發(fā)的回調(diào)函數(shù)。
• `onTapDown`:手指按下時觸發(fā)的回調(diào)函數(shù)。
• `onTapCancel`:點擊被取消時觸發(fā)的回調(diào)函數(shù)。
• `borderRadius`:邊界的圓角半徑。在具有圓角的組件上使用時很有用。
• `splashColor`:點擊時水波紋的顏色。
• `highlightColor`:點擊時的高亮顏色。
• `hoverColor`:懸停時的顏色（通常在桌面應(yīng)用中使用）。

使用場景

• 按鈕：用作自定義按鈕的點擊效果。

• 列表項：在列表中為每個項目添加點擊反饋。

• 卡片：為圖片或卡片提供點擊反饋。

• 圖標(biāo)：為圖標(biāo)添加點擊效果。

`InkWell` 是一個簡單而強大的工具，用于實現(xiàn)點擊反饋效果，使得 Flutter 應(yīng)用的交互更加自然和直觀。

Image.asset

`Image.asset` 是 Flutter 中用于加載和顯示本地資源圖片的一個構(gòu)造方法。它是 `Image` 小部件的一種常用方式，用于從應(yīng)用的資產(chǎn)中加載圖片。

`Image.asset` 的主要屬性

• `String name`:圖片資源的路徑，相對于 `pubspec.yaml` 中定義的資產(chǎn)路徑。
• `Key key`:小部件的唯一標(biāo)識符，用于優(yōu)化 Flutter 的小部件樹。
• `double scale`:圖片的比例因子，如果沒有指定，Flutter 會根據(jù)設(shè)備的分辨率自動計算。
• `ImageFrameBuilder frameBuilder`:用于構(gòu)建每一幀的自定義小部件。
• `ImageLoadingBuilder loadingBuilder`:用于在圖片加載時顯示自定義的加載指示器。
• `BoxFit fit`:規(guī)定圖片的縮放和剪裁方式。例如：`BoxFit.cover`、`BoxFit.contain` 等。
• `AlignmentGeometry alignment`:控制圖片的對齊方式，默認(rèn)是 `Alignment.center`。
• `ImageRepeat repeat`:控制圖片的重復(fù)方式，例如：`ImageRepeat.repeat` 或 `ImageRepeat.noRepeat`。
• `bool matchTextDirection`:是否根據(jù)文本方向自動鏡像圖像。
• `bool gaplessPlayback`:圖像在更新過程中是否保持顯示。

使用步驟

在 `pubspec.yaml` 中聲明資產(chǎn):

• 在 Flutter 項目中使用本地圖片前，必須在 `pubspec.yaml` 文件中聲明圖片資產(chǎn)。

flutter:assets:- assets/images/my_image.png

組織項目目錄:

• 通常將圖片存放在 `assets/images/` 目錄中或其他自定義目錄。

使用 `Image.asset` 加載圖片。

使用場景

• 應(yīng)用圖標(biāo)：在應(yīng)用的不同部分顯示標(biāo)識性圖像。

• 背景圖像：作為其他 UI 元素的背景。

• 產(chǎn)品展示：顯示本地存儲的產(chǎn)品圖像。

• 圖形資產(chǎn)：例如圖標(biāo)、插圖等靜態(tài)資源。

通過 `Image.asset`，您可以方便地在 Flutter 應(yīng)用中加載和顯示本地圖片資源。確保在 `pubspec.yaml` 中正確聲明資產(chǎn)路徑，并適當(dāng)?shù)亟M織項目目錄，以便更好地管理圖片資源。

Hero

Flutter 提供了一個簡單的方式來實現(xiàn)共性元素動畫，那就是使用 `Hero` 小部件。`Hero` 小部件可以在兩個路由（頁面）之間創(chuàng)建共享元素動畫。

基本步驟

1.包裝共享元素：在兩個頁面中，將共享的元素用 `Hero` 小部件包裝。

2.指定相同的 tag：確保在兩個 `Hero` 小部件上使用相同的 `tag` 標(biāo)識。

3.導(dǎo)航：在導(dǎo)航到新的頁面時，Flutter 自動處理共享元素的動畫。

代碼示例

import 'package:flutter/material.dart';class MyHonorDemoPage extends StatelessWidget {const MyHonorDemoPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("MyHonorDemoPage"),),body: Center(child: InkWell(onTap: () {Navigator.of(context).push(MaterialPageRoute(builder: (context) {return const MyHonorPage();},fullscreenDialog: true));},child: Hero(tag: "image",child: Image.asset("static/my_icon.png",fit: BoxFit.cover,width: 100,height: 100,),),),),);}
}class MyHonorPage extends StatelessWidget {const MyHonorPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(backgroundColor: Colors.transparent,body: InkWell(onTap: () {Navigator.of(context).pop();},child: Container(alignment: Alignment.center,child: Hero(tag: "image",child: Image.asset("static/my_icon.png",fit: BoxFit.cover,width: MediaQuery.sizeOf(context).width,height: MediaQuery.sizeOf(context).width,),),),),);}
}

注意事項

1.Tag 唯一性：確保每對共享元素的 `tag` 是唯一的，以避免動畫錯誤。

2.動畫時間：可以通過 `PageRoute` 自定義動畫時間和曲線。