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