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

前置知識(shí)點(diǎn)整理

Navigator

在 Flutter 中，`Navigator` 是一個(gè)用于管理應(yīng)用頁面的堆?？丶Ｍㄟ^ `Navigator`，您可以在應(yīng)用中實(shí)現(xiàn)頁面導(dǎo)航。`MaterialPageRoute` 是 Flutter 提供的一種常用的頁面路由，它遵循 Material Design 的動(dòng)畫和過渡規(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` 實(shí)例。`Navigator` 是一個(gè)用于管理應(yīng)用頁面導(dǎo)航的控件。

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

`push` 方法:

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

`MaterialPageRoute`:

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

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

`builder` 參數(shù):

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

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

`fullscreenDialog` 參數(shù):

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

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

使用場(chǎng)景

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

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

注意事項(xiàng)

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

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

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

InkWell

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

`InkWell` 的主要屬性

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

使用場(chǎng)景

• 按鈕：用作自定義按鈕的點(diǎn)擊效果。

• 列表項(xiàng)：在列表中為每個(gè)項(xiàng)目添加點(diǎn)擊反饋。

• 卡片：為圖片或卡片提供點(diǎn)擊反饋。

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

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

Image.asset

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

`Image.asset` 的主要屬性

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

使用步驟

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

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

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

組織項(xiàng)目目錄:

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

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

使用場(chǎng)景

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

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

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

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

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

Hero

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

基本步驟

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

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

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

代碼示例

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,),),),),);}
}

注意事項(xiàng)

1.Tag 唯一性：確保每對(duì)共享元素的 `tag` 是唯一的，以避免動(dòng)畫錯(cuò)誤。

2.動(dòng)畫時(shí)間：可以通過 `PageRoute` 自定義動(dòng)畫時(shí)間和曲線。