Flutter 22: 圖解 PopupMenu 那些事兒

小菜需要處理標(biāo)題欄彈出對話框 PopupMenu 樣式， Flutter 當(dāng)然提供了一些處理方式，類似 PopupMenuEntry 等，小菜僅就最基礎(chǔ)的使用方式進行初步的學(xué)習(xí)和整理。

創(chuàng)新互聯(lián)提供高防物理服務(wù)器租用、云服務(wù)器、香港服務(wù)器、托管服務(wù)器等

PopupMenuItem 為單個 item 的彈出樣式，默認為 48px 高，可根據(jù)需求自行定義。 item 中可以自定義需要的樣式，包括文字圖片等一系列樣式。

Tips: 若需要處理帶圖標(biāo)的樣式時，官網(wǎng)提供的 Demo 是借助的 ListTile 來處理的，但是小菜測試發(fā)現(xiàn)圖標(biāo)與文字距離偏大，原因在于 ListTile 默認左側(cè)圖標(biāo) leading 距離不可直接調(diào)整，建議用 Row 或其他方式調(diào)整。

CheckedPopupMenuItem 是一個帶有復(fù)選標(biāo)記的彈出菜單項。默認高度同樣是 48px ，水平布局使用 ListTile 復(fù)選標(biāo)記是 Icons.done 圖標(biāo)，顯示在 leading 位置；同時只有在狀態(tài)為選中時才會顯示圖標(biāo)。

PopupMenuDivider 是一條水平分割線，注意數(shù)組要使用父類 PopupMenuEntry ，配合其他 item 樣式共同使用。 PopupMenuDivider 可以調(diào)整高度，但無法調(diào)整顏色，有需要的話可以進行自定義。

PopupMenu 默認的彈框位置都是在右上角，且會擋住標(biāo)題欄，如果有需要在其他位置彈框就需要借助 showMenu ，主要通過 position 屬性定位彈框位置。

menu 的寬高與內(nèi)容相關(guān)，小菜的理解是在水平和豎直方向上會將設(shè)置的 position 位置加上 menu 寬高，再與屏幕匹配，超過屏幕寬高，根據(jù) position 按照 LTRB 順序貼近屏幕邊框展示。

Tips: 如果 item 個數(shù)過多也無需擔(dān)心，F(xiàn)lutter 支持默認超過屏幕滑動效果。

小菜目前的學(xué)習(xí)還僅限于基本的使用，稍高級的自定義涉及較少，如果又不對的地方還希望多多指出。

Flutter中webview添加圖片的長按操作

開發(fā)過程工我們會用webview顯示一些活動或是變動比較頻繁的頁面,若是webview中包含圖片,一般會有保存圖片的需求,我們可以采用js交互的形式獲取圖片的url,話不多說直接看操作

獲取點擊位置的element,中的src值,即可

補充問題

1、在安卓設(shè)備上發(fā)現(xiàn)長按手勢并沒有調(diào)用，翻看 webview_flutter 發(fā)現(xiàn)需要設(shè)置安卓的類型，展示webview之前設(shè)置

2、獲取到的url也就是開始返回的value值，安卓會帶有”“，需要自行去掉

Flutter項目Android Studio一直連接不上模擬器Loading問題

打開MAC活動監(jiān)視器，搜索git-remote-https進程，然后點擊退出這個進程

flutter-動畫

1.動畫原理：在一段時間內(nèi)快速的多次改變UI外觀，由于人眼會產(chǎn)生視覺暫留所以最終看到的就是一個連續(xù)的動畫。

UI的一次改變稱為一個動畫幀，對應(yīng)一次屏幕刷新。

FPS：幀率，每秒的動畫幀數(shù)。

flutter動畫分為兩類：

常見動畫模式：

是一個抽象類，主要的功能是保存動畫的值和狀態(tài)。常用的一個Animation類是Animation double ,是一個在一段時間內(nèi)依次生成一個區(qū)間之間的值的類，可以是線性或者曲線或者其他。

可以生成除double之外的其他類型值，如：Animation Color 或 Animation Size 。

是一個動畫控制器，控制動畫的播放狀態(tài)，在屏幕刷新的每一幀，就會生成一個新的值。

包含動畫的啟動forward()、停止stop() 、反向播放 reverse()等方法，在給定的時間段內(nèi)線性的生成從0.0到1.0（默認區(qū)間）的數(shù)字。

curve:描述動畫的曲線過程。

curvedAnimation:指定動畫的曲線。

常用Curve：

繼承自Animatable T ，表示的就是一個 Animation 對象的取值范圍，只需要設(shè)置開始和結(jié)束的邊界值(值也支持泛型)。 它唯一的工作就是定義輸入范圍到輸出范圍的映射。

例如，Tween可能會生成從紅到藍之間的色值，或者從0到255。

Tween.animate:返回一個Animation。

映射過程：

1). Tween.animation通過傳入 aniamtionController 獲得一個_AnimatedEvaluation 類型的 animation 對象(基類為 Animation)， 并且將 aniamtionController 和 Tween 對象傳入了 _AnimatedEvaluation 對象。

2). animation.value方法即是調(diào)用 _evaluatable.evaluate(parent)方法， 而 _evaluatable 和 parent 分別為 Tween 對象和 AnimationController 對象。

3). 這里的 animation 其實就是前面的 AnimationController 對象， transform 方法里面的 animation.value則就是 AnimationController 線性生成的 0.0~1.0 直接的值。 在 lerp 方法里面我們可以看到這個 0.0~1.0 的值被映射到了 begin 和 end 范圍內(nèi)了。

接收一個TickerProvider類型的對象，它的主要職責(zé)是創(chuàng)建Ticker。

防止屏幕外動畫消耗資源。

[圖片上傳失敗...(image-115b94-1636441483468)]

過程：

回調(diào)：

不使用addListener()和setState()來給widget添加動畫。

使用AnimatedWidget，將widget分離出來，創(chuàng)建一個可重用動畫的widget，AnimatedWidget中會自動調(diào)用addListener()和setState()

AnimatedModalBarrier、DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition

如何渲染過渡，把渲染過程也抽象出來：

AnimatedBuilder的示例包括: BottomSheet、 PopupMenu、ProgressIndicator、RefreshIndicator、Scaffold、SnackBar、TabBar。

MaterialPageRoute：平臺風(fēng)格一致的路由切換動畫

CupertinoPageRoute：左右切換風(fēng)格

自定義：PageRouteBuilder

1.要創(chuàng)建交織動畫，需要使用多個動畫對象（Animation）。

2.一個AnimationController控制所有的動畫對象。

3.給每一個動畫對象指定時間間隔（Interval）

可以同時對其新、舊子元素添加顯示、隱藏動畫.

當(dāng)AnimatedSwitcher的child發(fā)生變化時（類型或Key不同），舊child會執(zhí)行隱藏動畫，新child會執(zhí)行執(zhí)行顯示動畫。

希望大家支持一下，感謝

Flutter2.0 一定要區(qū)分好上線文（BuildContext context），不然頁面都沒法關(guān)閉

showCupertinoModalPopup 中 builder: (BuildContext _context) {} 的 _context 只作用于 modal 彈窗的組件生命周期中，界面消失后，執(zhí)行其他操作需要用到上下文的情況，一定要用最外邊的上下文 context