做過 Flutter 客戶端的朋友應(yīng)該都有同感TabBar是 Material 組件庫中最常用、也最容易被低估的組件。默認(rèn)的藍(lán)色下劃線樣式太深入人心以至于一旦業(yè)務(wù)方要求“把選中下標(biāo)換成一條 4px 高的漸變膠囊”“底部指示器做成圓點(diǎn)”“滑塊要跟著滑動(dòng)動(dòng)畫平滑位移”大部分人的第一反應(yīng)要么是去網(wǎng)上翻現(xiàn)成的包要么直接用Container AnimatedPositioned硬堆。其實(shí)TabBar留了很多官方入口只是文檔沒寫透。這篇文章就從TabBar的 Indicator 機(jī)制講起先搞清它能改什么、不能改什么再給出用自帶屬性換膚、繼承Decoration完全自繪、以及用Stack疊加自控動(dòng)畫三套方案。最后補(bǔ)充“自定義選中下標(biāo)”場景里經(jīng)常一起出現(xiàn)的數(shù)字角標(biāo)實(shí)現(xiàn)和一份我實(shí)際踩坑記錄。適合理清原理后直接抄代碼做頁面的人也適合被各種奇奇怪怪需求逼瘋的客戶端開發(fā)。1. 先別急著找輪子搞清楚 TabBar 的 Indicator 機(jī)制1.1 Indicator 其實(shí)只是一個(gè) Decoration很多人一上來就寫TabBar卻從來沒注意過它身上那幾個(gè)和樣式相關(guān)的字段indicator、indicatorColor、indicatorWeight、indicatorSize、indicatorPadding。這里最關(guān)鍵的是indicator參數(shù)它的類型是Decoration?。也就是說TabBar本身并沒有寫死“下劃線”這個(gè)概念——它只是在當(dāng)前選中 Tab 的下方畫了一個(gè)Decoration默認(rèn)情況下這個(gè)Decoration恰好是一條 2px 的藍(lán)色實(shí)線。搞清楚這一點(diǎn)很多困惑就迎刃而解想要改 Indicator 的樣式本質(zhì)上就是換一個(gè)Decoration進(jìn)去。想要畫漸變、畫圓角矩形、畫圓形、甚至畫一張圖片當(dāng)背景都能通過自定義Decoration實(shí)現(xiàn)因?yàn)門abBar在內(nèi)部負(fù)責(zé)把“當(dāng)前應(yīng)該畫在哪個(gè)位置”這件事算好我們只需要回答“這個(gè)位置要畫成什么樣”。這里還要理解一個(gè)容易忽略的機(jī)制TabBar在切換 Tab 時(shí)Indicator 的矩形位置并不是瞬移的而是隨著TabController.animation的動(dòng)畫值在當(dāng)前 index 和目標(biāo) index 之間做插值。就算你只塞了一個(gè)最普通的BoxDecoration(color: Colors.red)切換時(shí)它依然會(huì)“滑過去”因?yàn)榛瑒?dòng)的邏輯在TabBar內(nèi)部不在Decoration里。所以不要覺得只有自己寫動(dòng)畫才能平滑官方組件本身已經(jīng)帶了基礎(chǔ)動(dòng)畫。1.2 能改什么、改不了什么自帶參數(shù)能覆蓋的場景我整理成了一張表方便開發(fā)時(shí)快速判斷需求對(duì)應(yīng)字段說明指示器高度indicatorWeight默認(rèn) 2單位是邏輯像素僅當(dāng)indicator為 null 時(shí)生效指示器顏色indicatorColor默認(rèn)取ThemeData.indicatorColor同樣只在indicator為 null 時(shí)生效指示器長度策略indicatorSizeTabBarIndicatorSize.tab撐滿整個(gè) Tablabel跟隨文字長度指示器間距indicatorPadding給 Indicator 加內(nèi)邊距常用EdgeInsets.symmetric(horizontal: 20)收窄完全自定義外觀indicator傳Decoration覆蓋前面的顏色和高度一個(gè)字段接管所有樣式容易踩的坑是你同時(shí)設(shè)置了indicatorColor和indicator顏色卻不生效。因?yàn)樵创a里一旦indicator不為空indicatorColor和indicatorWeight就直接被忽略。所以別指望混著用要走自定義就一門心思用indicator不要和另外兩個(gè)參數(shù)拉扯。改不了的部分也有想給默認(rèn)下劃線單獨(dú)設(shè)置圓角直接傳BoxDecoration沒問題但如果想要“指示器以外的區(qū)域也響應(yīng)點(diǎn)按水波紋”那個(gè)水波紋是Tab組件自己在InkWell里畫的和indicator完全隔離。想改點(diǎn)擊反饋效果要去設(shè)置TabBar的主題或者替換tab構(gòu)造單靠indicator解決不了。2. 大部分業(yè)務(wù)需求用自帶屬性就夠了2.1 一個(gè) BoxDecoration 搞定常見樣式先看最常用的寫法底部漸變膠囊條也是很多App首頁頂部導(dǎo)航的標(biāo)配。TabBar( controller: _controller, indicator: const BoxDecoration( gradient: LinearGradient( colors: [Color(0xFF4FC3F7), Color(0xFF0288D1)], ), borderRadius: BorderRadius.all(Radius.circular(3)), boxShadow: [ BoxShadow( color: Color(0x330288D1), blurRadius: 4, offset: Offset(0, 2), ), ], ), indicatorSize: TabBarIndicatorSize.label, indicatorPadding: const EdgeInsets.symmetric(horizontal: 24), labelColor: const Color(0xFF0288D1), unselectedLabelColor: Colors.grey, )這段代碼對(duì)應(yīng)的效果是一條跟隨文字寬度的漸變膠囊左右各留 24px 間隙下方掛一點(diǎn)陰影。這種樣式在改版需求里出現(xiàn)頻率非常高而且完全不需要寫自定義繪制類。要注意BorderRadius方向問題。BoxDecoration里通常用BorderRadius.vertical(top: Radius.circular(8))但實(shí)際視覺效果和 TabBar 的布局有關(guān)TabBar默認(rèn)是把 Indicator 畫在 Tab 內(nèi)容的下方如果放在AppBar.bottom通常希望上面兩個(gè)角是圓角如果單獨(dú)放置在內(nèi)容區(qū)頂部又希望下面圓角。用BorderRadiusDirectional或直接寫B(tài)orderRadius.only更可控。2.2 圓形指示器和圖片指示器的取巧寫法有些設(shè)計(jì)稿里選中態(tài)不是下劃線而是一個(gè)小圓點(diǎn)位置在文字上方或者下方。這種也能用自帶BoxDecoration做例如一個(gè) 6x6 的圓點(diǎn)TabBar( indicator: const BoxDecoration( color: Color(0xFFFF5252), shape: BoxShape.circle, ), indicatorSize: TabBarIndicatorSize.label, )看上去沒錯(cuò)但實(shí)際渲染出來的圓點(diǎn)尺寸會(huì)是整個(gè) Tab 區(qū)域的高度因?yàn)閕ndicator的繪制區(qū)域默認(rèn)是 Tab 的整個(gè)矩形。想要小圓點(diǎn)得用indicatorPadding把區(qū)域“擠”小indicatorPadding: const EdgeInsets.fromLTRB(20, 30, 20, 4),不同設(shè)備的可用高度不一樣這種寫法很依賴固定高度不如后面自定義Decoration來得穩(wěn)。圖片指示器也一樣DecorationImage能塞圖片但尺寸和位置控制起來比較別扭。遇到這兩種情況我更推薦直接跳到第 3 或第 4 節(jié)別在自帶參數(shù)上死磕。2.3 用 indicatorSize 控制長度策略的底層邏輯indicatorSize的取值有tab和label很多人只是“選一個(gè)試試”不理解背后的寬度計(jì)算。TabBarIndicatorSize.tabIndicator 寬度等于整個(gè) Tab 的寬度每個(gè) Tab 均分 TabBar 的總寬。適合選中態(tài)整塊高亮的場景。TabBarIndicatorSize.labelIndicator 寬度等于該 Tab 下Tab子組件里文字或圖標(biāo)的實(shí)際寬度。適合下劃線跟隨文字長度的場景。常規(guī)項(xiàng)目里兩個(gè)值都會(huì)用到但如果你想實(shí)現(xiàn)“指示器比文字寬 8px”這種效果要么改labelPadding讓文字本身變寬要么老老實(shí)實(shí)走自定義方案在繪制時(shí)給寬度加一個(gè)padding。3. 要完全掌控樣式自己實(shí)現(xiàn) Decoration 才是正路3.1 為什么選擇繼承 Decoration當(dāng)需求變成“指示器左邊是圓角、右邊是直角中間要帶不規(guī)則斜切”“指示器要隨著切換進(jìn)度逐漸變寬”“指示器里要畫一個(gè)圖標(biāo)”時(shí)BoxDecoration的參數(shù)就不夠用了。這時(shí)需要繼承抽象類Decoration重寫它的createBoxPainter方法返回一個(gè)BoxPainter然后在paint里做真正的 Canvas 繪制。有人會(huì)問為什么不直接用CustomPainter因?yàn)镃ustomPainter是一個(gè)獨(dú)立的繪制組件但TabBar.indicator要求的是Decoration它內(nèi)部會(huì)把這套 Decoration 轉(zhuǎn)成自己的 painter并通過TabController.animation驅(qū)動(dòng)重繪。所以走官方機(jī)制聯(lián)動(dòng)動(dòng)畫、layout 尺寸、點(diǎn)擊態(tài)處理都能保持一致。直接在外面疊CustomPainter不是不行但要額外處理 TabBar 的尺寸變化和動(dòng)畫監(jiān)聽得不償失。繼承Decoration的好處還在于它可以作為值對(duì)象參與 widget 的相等性比較didUpdateWidget時(shí)能正確判斷是否要重建 painter減少不必要的繪制開銷。3.2 自定義“小粗線 漸變膠囊”Indicator 完整代碼下面這個(gè)例子是帶漸變和圓角的膠囊 Indicator它可以跟隨切換動(dòng)畫在兩個(gè) Tab 之間平滑移動(dòng)并且指示器寬度是“文字寬 32px”而不是簡單用label或tab。class GradientCapsuleIndicator extends Decoration { final int tabCount; final double widthInset; final double bottomGap; final Color startColor; final Color endColor; final double height; final ValueListenabledouble progressListenable; const GradientCapsuleIndicator({ required this.tabCount, required this.progressListenable, this.startColor const Color(0xFF4FC3F7), this.endColor const Color(0xFF0288D1), this.widthInset 32, this.bottomGap 8, this.height 5, }); override BoxPainter createBoxPainter([VoidCallback? onChanged]) { return _GradientCapsulePainter(this, onChanged); } } class _GradientCapsulePainter extends BoxPainter { final GradientCapsuleIndicator decoration; _GradientCapsulePainter(this.decoration, VoidCallback? onChanged) : super(onChanged); override void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) { final double tabWidth (configuration.size?.width ?? 0) / decoration.tabCount; final double rawProgress decoration.progressListenable.value; final int fromIndex rawProgress.floor(); final int toIndex (rawProgress 1).clamp(0, decoration.tabCount - 1); final double t rawProgress - fromIndex; final double left offset.dx (fromIndex t) * tabWidth decoration.widthInset / 2; final double indicatorWidth tabWidth - decoration.widthInset; final double top offset.dy (configuration.size?.height ?? 0) - decoration.bottomGap - decoration.height; final Rect indicatorRect Rect.fromLTWH( left, top, indicatorWidth.clamp(0, double.infinity), decoration.height, ); final Paint paint Paint() ..shader LinearGradient( colors: [decoration.startColor, decoration.endColor], ).createShader(indicatorRect); canvas.drawRRect( RRect.fromRectAndRadius( indicatorRect, Radius.circular(decoration.height / 2), ), paint, ); } }這里最關(guān)鍵的是progressListenable。TabBar內(nèi)部雖然會(huì)自動(dòng)監(jiān)聽controller.animation但它不知道你的繪制邏輯要讀什么數(shù)據(jù)所以我們要主動(dòng)把一個(gè)ValueListenabledouble傳進(jìn)自定義Decoration在 paint 時(shí)讀取當(dāng)前的動(dòng)畫進(jìn)度值。外面用一個(gè)ValueNotifierdouble保存controller.animation!.value這樣每次動(dòng)畫 tick 時(shí) painter 都能拿到最新的中間態(tài)位置。使用方式class TabPage extends StatefulWidget { override StateTabPage createState() _TabPageState(); } class _TabPageState extends StateTabPage with SingleTickerProviderStateMixin { late TabController _controller; late final ValueNotifierdouble _progress ValueNotifier(0); override void initState() { super.initState(); _controller TabController(length: 3, vsync: this); _controller.animation!.addListener(() { _progress.value _controller.animation!.value; }); } override void dispose() { _controller.dispose(); _progress.dispose(); super.dispose(); } override Widget build(BuildContext context) { return TabBar( controller: _controller, indicator: GradientCapsuleIndicator( tabCount: 3, progressListenable: _progress, ), tabs: const [ Tab(text: 首頁), Tab(text: 分類), Tab(text: 我的), ], ); } }3.3 關(guān)鍵點(diǎn)如何拿到 Tab 數(shù)量與動(dòng)畫位置在上面代碼里我通過構(gòu)造函數(shù)傳入tabCount。為什么不直接通過configuration.size推斷因?yàn)镈ecoration.paint里能拿到的ImageConfiguration只包含size、textDirection、devicePixelRatio等信息不包含 Tab 數(shù)量。你看到的總寬度是整個(gè) TabBar 的寬度但沒有 Tab 數(shù)量就無法均分。還有一點(diǎn)要注意rawProgress.floor()的邊界當(dāng)進(jìn)度值正好等于最大 index 時(shí)toIndex會(huì)被clamp限制到tabCount - 1避免越界。這個(gè)細(xì)節(jié)不處理快速劃到最右邊一檔時(shí)很容易報(bào)RangeError。動(dòng)畫位置的計(jì)算邏輯可以理解為線性插值當(dāng)前進(jìn)度值在區(qū)間[index, index1]之間t就是這一段的完成度。Indicator 的left等于“起始 Tab 的 left 動(dòng)畫推進(jìn)量”再疊加上自定義的內(nèi)縮邊距。這個(gè)思路對(duì)任何形狀都適用換圓點(diǎn)、換長條、換雙色分割改的都是 paint 里的繪制形狀位置計(jì)算不用動(dòng)。4. 更直觀的野路子用 Stack 自己做選中跟隨層4.1 疊加層方案的基本思路自定義Decoration雖然好但需要把 Canvas 繪制玩得明白。如果你只想快速交付還有一種更“傻瓜”的做法完全不碰indicator直接把 Indicator 做成一個(gè)獨(dú)立的 widget放在TabBar的下層或上層用Stack疊加。思路是這樣的用一個(gè)TabBar和一個(gè)AnimatedPositioned或AnimatedAlign包在同一個(gè)Stack里。TabBar負(fù)責(zé)文字、點(diǎn)擊、水波紋、滑動(dòng)聯(lián)動(dòng)AnimatedPositioned負(fù)責(zé)畫出真實(shí)的指示器形狀。兩者通過同一個(gè)TabController綁定動(dòng)畫值。4.2 用 AnimatedPositioned 實(shí)現(xiàn)跟隨動(dòng)畫先看一個(gè)最簡版本class StackedTabBar extends StatelessWidget { final TabController controller; const StackedTabBar({super.key, required this.controller}); override Widget build(BuildContext context) { final tabCount controller.length; return SizedBox( height: 56, child: Stack( children: [ TabBar( controller: controller, indicator: const SizedBox.shrink(), tabs: const [ Tab(text: 首頁), Tab(text: 分類), Tab(text: 我的), ], ), AnimatedBuilder( animation: controller.animation!, builder: (context, child) { final progress controller.animation!.value; final tabWidth MediaQuery.of(context).size.width / tabCount; final left progress * tabWidth; return AnimatedPositioned( duration: Duration.zero, left: left, top: 40, child: Container( width: tabWidth, height: 4, decoration: BoxDecoration( color: Colors.pink, borderRadius: BorderRadius.circular(2), ), ), ); }, ), ], ), ); } }這里我直接用AnimatedBuilder監(jiān)聽controller.animation每幀根據(jù)進(jìn)度值計(jì)算left然后把AnimatedPositioned的duration設(shè)為Duration.zero讓位移完全交給動(dòng)畫進(jìn)度驅(qū)動(dòng)。這其實(shí)是一個(gè)“假 AnimatedPositioned”真正的平滑來自 TabBar 內(nèi)部的滑動(dòng)動(dòng)畫而不是AnimatedPositioned自己的補(bǔ)間。如果你的場景是“點(diǎn)擊某個(gè)按鈕隨意跳 Tab”那么 TabBar 內(nèi)部默認(rèn)會(huì)播放 300ms 的kTabScrollDuration動(dòng)畫進(jìn)度值也是連續(xù)變化的所以依然能平滑移動(dòng)。這種方案最大好處是指示器區(qū)域變成了普通 widget可以放任何東西——圓點(diǎn)、圖片、文字、漸變、帶陰影的容器都行。你不再受Decoration的限制也不需要理解 Canvas。4.3 疊加方案的精確定位與性能問題疊加方案有一個(gè)明顯短板無法精確知道每個(gè) Tab 內(nèi)部文字的寬度只能假設(shè)每個(gè) Tab 等寬。對(duì)于TabBar默認(rèn)的平分策略這個(gè)假設(shè)在絕大多數(shù)機(jī)型上是成立的因?yàn)門abBar默認(rèn)就是讓每個(gè) Tab 等寬除非你用isScrollable: true。一旦isScrollable打開Tab 寬度不再均分位置計(jì)算就徹底失效了。性能上AnimatedBuilder持有animation會(huì)在動(dòng)畫期間每幀重建如果 Indicator 是一個(gè)很重的 widget 會(huì)有些開銷。但實(shí)際工作中這個(gè)方案在 2~5 個(gè) Tab 的場景下完全沒問題。如果 Tab 數(shù)量很多或指示器內(nèi)部有復(fù)雜的圖片渲染還是用第 3 節(jié)的繪制方案更穩(wěn)。5. 把“下標(biāo)”做成數(shù)字角標(biāo)和 Indicator 一起聯(lián)動(dòng)5.1 在 Tab 上掛角標(biāo)的基礎(chǔ)寫法“自定義選中下標(biāo)”這個(gè)需求還有一個(gè)常見變體用戶要的不是下劃線的樣式而是每個(gè) Tab 右上角的數(shù)字角標(biāo)選中某個(gè) Tab 時(shí)角標(biāo)顏色要變。這種情況依然用Tab子組件里的Stack就能實(shí)現(xiàn)Tab( child: Stack( clipBehavior: Clip.none, children: [ const Text(消息), Positioned( right: -8, top: -6, child: Container( padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 2), decoration: const BoxDecoration( color: Colors.red, borderRadius: BorderRadius.all(Radius.circular(8)), ), child: const Text( 3, style: TextStyle( fontSize: 10, color: Colors.white, ), ), ), ), ], ), )Positioned的right和top需要根據(jù)角標(biāo)實(shí)際大小微調(diào)有時(shí)候還要調(diào)整父級(jí)Stack的clipBehavior防止角標(biāo)超出 Tab 區(qū)域被裁掉。注意Tab本身有l(wèi)abelColor和unselectedLabelColor但角標(biāo)是內(nèi)部 Container不會(huì)自動(dòng)變色你需要根據(jù)當(dāng)前選中狀態(tài)手動(dòng)切換。5.2 角標(biāo)隨選中態(tài)切換樣式要做“選中下標(biāo)聯(lián)動(dòng)”一般會(huì)維護(hù)一個(gè)當(dāng)前選中索引。如果你已經(jīng)有TabController可以直接用controller.index想要更實(shí)時(shí)的話用controller.animation判斷選中態(tài)變化ValueListenableBuilderdouble( valueListenable: _progress, builder: (context, value, _) { final selectedIndex value.round(); return Tab( child: Stack( clipBehavior: Clip.none, children: [ Text(消息), Positioned( right: -8, top: -6, child: Container( padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 2), decoration: BoxDecoration( color: selectedIndex 1 ? Colors.orange : Colors.red, borderRadius: BorderRadius.all(Radius.circular(8)), ), child: Text(...), ), ), ], ), ); }, )這里用ValueListenableBuilder訂閱第 3 節(jié)里那個(gè)_progress選中索引變化時(shí)角標(biāo)就能同步換色。這個(gè)方法比監(jiān)聽controller.index更穩(wěn)因?yàn)閕ndex在動(dòng)畫過程中可能已經(jīng)切到新值但視覺上動(dòng)畫還沒走完會(huì)出現(xiàn)角標(biāo)提前變色、指示器還在半路的情況。用round()取動(dòng)畫的當(dāng)前整數(shù)值視覺感知和實(shí)際動(dòng)畫更一致。6. 常見問題和排查記錄6.1 為什么 animation 拿不到DefaultTabController模式下很多人在initState里寫DefaultTabController.of(context).animation結(jié)果直接拋異常。原因是DefaultTabController.of(context)依賴didChangeDependencies之后才能拿到initState階段context不可用。正規(guī)做法有兩個(gè)把TabController提升為 StatefulWidget 的字段自己 new并通過SingleTickerProviderStateMixin提供 vsync。在didChangeDependencies里緩存 controller。不要寫DefaultTabController.of(context)放到 build 外面反復(fù)調(diào)用每次都重新查找祖先組件會(huì)有無謂開銷。6.2 自定義 Indicator 的寬度總是對(duì)不齊如果用Decoration自繪經(jīng)常出現(xiàn)指示器比預(yù)期寬或窄。檢查兩個(gè)地方indicatorSize和indicatorPadding。indicatorPadding是在 TabBar 內(nèi)部把 indicator 的可見矩形縮小后再交給 painter 繪制的如果你在 painter 里又自己算了一遍 padding就等于加了兩層邊距。建議自繪時(shí)把indicatorPadding置空所有邊距都由 paint 內(nèi)部計(jì)算避免雙重偏移。另外注意widthInset的單位是邏輯像素不是比例。不同屏幕寬度下固定 32px 的縮進(jìn)在小屏手機(jī)上視覺占比會(huì)明顯偏大。如果要求嚴(yán)格把widthInset改成tabWidth * 0.1這種比例值更穩(wěn)妥。6.3 Indicator 在 AppBar 上顯示位置偏移TabBar放在AppBar.bottom時(shí)默認(rèn)bottom位置會(huì)貼近 AppBar 底邊。想要留出空隙通常設(shè)置indicatorPadding: EdgeInsets.only(bottom: 8)但前面提過它會(huì)影響繪制區(qū)域。自繪方案里用bottomGap參數(shù)在paint中偏移指示器的 top這才不會(huì)影響整個(gè) Tab 的可點(diǎn)擊區(qū)域。還有一點(diǎn)Tab組件默認(rèn)帶labelPadding它會(huì)影響文字的上下留白和 Tab 的整體高度。當(dāng)?shù)撞恐甘酒髌呋蚱蜁r(shí)優(yōu)先檢查labelPadding而不是indicatorPadding。6.4 快速點(diǎn)擊多個(gè) Tab 時(shí)的動(dòng)畫錯(cuò)位快速連續(xù)切換 Tab 時(shí)controller.animation的進(jìn)度值可能出現(xiàn)中途往回走的情況這是 TabBar 默認(rèn)的動(dòng)畫取整路徑?jīng)Q定的。如果你在自繪方案里只讀了animation.value做插值視覺上不會(huì)跳變但會(huì)在兩次動(dòng)畫之間出現(xiàn)一次“瞬移”——因?yàn)樾碌膭?dòng)畫起點(diǎn)是從當(dāng)前 index 重新開始的。遇到這種情況最直接的辦法是切換 Tab 時(shí)暫時(shí)禁用快速點(diǎn)擊或者將動(dòng)畫時(shí)長縮短。別試圖通過監(jiān)聽animationStatus做復(fù)雜狀態(tài)管理收益很低。6.5 配合滾動(dòng)視圖時(shí)的布局陷阱TabBar經(jīng)常和TabBarView、NestedScrollView、CustomScrollView一起使用。此時(shí)如果 Indicator 離 TabBar 底部太遠(yuǎn)會(huì)被內(nèi)容區(qū)的滾動(dòng)視圖遮擋。我遇到過一次某個(gè)頁面自定義 Indicator 畫在了 Tab 文字上方結(jié)果頁面往下滾動(dòng)時(shí)內(nèi)容區(qū)蓋住了 Indicator。解決辦法要么給 Indicator 提高繪制層要么不用滾動(dòng)視圖中直接疊內(nèi)容用Column Expanded把內(nèi)容和 TabBar 拆開。還有SafeArea的坑當(dāng) TabBar 被放在 AppBar 里邏輯像素高度是固定的不受劉海屏影響但當(dāng) TabBar 單獨(dú)放在頁面頂部時(shí)MediaQuery.padding.top會(huì)擠占高度導(dǎo)致configuration.size.height比預(yù)期短。自繪 painter 要用size.height計(jì)算 top 的位置不要硬編碼“總高度 56px”。個(gè)人經(jīng)驗(yàn)分享如果只是快速交付我喜歡先用自帶BoxDecoration應(yīng)付一下等到產(chǎn)品真的說“指示器要帶漸變又要能跟著滑”時(shí)再升級(jí)成自定義Decoration。兩套代碼我都維護(hù)過最終線上項(xiàng)目反而用的是第 4 節(jié)那個(gè)Stack AnimatedBuilder方案——因?yàn)閳F(tuán)隊(duì)里其他同事看 Canvas 代碼容易懵而AnimatedBuilder的語義一看就懂后續(xù)加個(gè)圖標(biāo)、加個(gè)裝飾物都方便。性能在 3 個(gè) Tab 的頁面上沒有任何可感知差異。最后再分享一個(gè)技巧無論哪種方案都建議把indicatorSize、widthInset、bottomGap這些值抽成常量或主題參數(shù)而不是散落在 build 方法里。一旦產(chǎn)品提出“夜間模式換一套指示器配色”這種需求你能在一小時(shí)內(nèi)全部改完而不是從幾十處代碼里一個(gè)個(gè)找數(shù)字。這個(gè)看似無關(guān)緊要的習(xí)慣在項(xiàng)目后期能省下大量情緒消耗。