flutter 顶部导航栏TabBarView自定义下划线的宽度和圆角

刺骨的言语ヽ痛彻心扉 2022-10-31 12:25 635阅读 0赞

flutter自带的appbar框架无法自定义下划线的宽度和圆角，需要自定义，如下

# MyUnderlineTabIndicator #

> MyUnderlineTabIndicator 为UnderlineTabIndicator 的拷贝，修改了两处源码实现了下标的宽度固定和圆角功能

// Copyright 2018 The Chromium Authors. All rights reserved.
    // Use of this source code is governed by a BSD-style license that can be
    // found in the LICENSE file.
    
    import 'package:flutter/material.dart';
    import 'package:flutter/widgets.dart';
    
    /// Used with [TabBar.indicator] to draw a horizontal line below the
    /// selected tab.
    ///
    /// The selected tab underline is inset from the tab's boundary by [insets].
    /// The [borderSide] defines the line's color and weight.
    ///
    /// The [TabBar.indicatorSize] property can be used to define the indicator's
    /// bounds in terms of its (centered) widget with [TabIndicatorSize.label],
    /// or the entire tab with [TabIndicatorSize.tab].
    class MyUnderlineTabIndicator extends Decoration {
      /// Create an underline style selected tab indicator.
      ///
      /// The [borderSide] and [insets] arguments must not be null.
      const MyUnderlineTabIndicator({
        this.borderSide = const BorderSide(width: 2.0, color: Colors.white),
        this.insets = EdgeInsets.zero,
      })  : assert(borderSide != null),
            assert(insets != null);
    
      /// The color and weight of the horizontal line drawn below the selected tab.
      final BorderSide borderSide;
    
      /// Locates the selected tab's underline relative to the tab's boundary.
      ///
      /// The [TabBar.indicatorSize] property can be used to define the
      /// tab indicator's bounds in terms of its (centered) tab widget with
      /// [TabIndicatorSize.label], or the entire tab with [TabIndicatorSize.tab].
      final EdgeInsetsGeometry insets;
    
      @override
      Decoration lerpFrom(Decoration a, double t) {
        if (a is UnderlineTabIndicator) {
          return UnderlineTabIndicator(
            borderSide: BorderSide.lerp(a.borderSide, borderSide, t),
            insets: EdgeInsetsGeometry.lerp(a.insets, insets, t),
          );
        }
        return super.lerpFrom(a, t);
      }
    
      @override
      Decoration lerpTo(Decoration b, double t) {
        if (b is MyUnderlineTabIndicator) {
          return MyUnderlineTabIndicator(
            borderSide: BorderSide.lerp(borderSide, b.borderSide, t),
            insets: EdgeInsetsGeometry.lerp(insets, b.insets, t),
          );
        }
        return super.lerpTo(b, t);
      }
    
      @override
      _MyUnderlinePainter createBoxPainter([VoidCallback onChanged]) {
        return _MyUnderlinePainter(this, onChanged);
      }
    }
    
    class _MyUnderlinePainter extends BoxPainter {
      _MyUnderlinePainter(this.decoration, VoidCallback onChanged)
          : assert(decoration != null),
            super(onChanged);
    
      final MyUnderlineTabIndicator decoration;
    
      BorderSide get borderSide => decoration.borderSide;
      EdgeInsetsGeometry get insets => decoration.insets;
    
      Rect _indicatorRectFor(Rect rect, TextDirection textDirection) {
        assert(rect != null);
        assert(textDirection != null);
        final Rect indicator = insets.resolve(textDirection).deflateRect(rect);
    
        //希望的宽度
        double wantWidth = 32;
        //取中间坐标
        double cw = (indicator.left + indicator.right) / 2;
        return Rect.fromLTWH(cw - wantWidth / 2,
            indicator.bottom - borderSide.width, wantWidth, borderSide.width);
      }
    
      @override
      void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
        assert(configuration != null);
        assert(configuration.size != null);
        final Rect rect = offset & configuration.size;
        final TextDirection textDirection = configuration.textDirection;
        final Rect indicator =
            _indicatorRectFor(rect, textDirection).deflate(borderSide.width / 2.0);
        // 改为圆角
        final Paint paint = borderSide.toPaint()..strokeCap = StrokeCap.round;
        canvas.drawLine(indicator.bottomLeft, indicator.bottomRight, paint);
      }
    }

使用案例：

import 'package:flutter/cupertino.dart';  
import 'package:flutter/gestures.dart';  
import 'package:flutter/material.dart';  
import 'package:trade\_app/base/baseColor.dart';  
import 'package:trade\_app/base/baseSize.dart';  
import 'package:trade\_app/pages/utils/icon\_utils.dart';  
import 'package:trade\_app/widgets/extend/my\_underline\_indicator.dart';

///参考 https://www.imooc.com/article/300411  
class MineStencilPage extends StatefulWidget \{  
@override  
MineStencilPageState createState() => MineStencilPageState();  
\}

//使用with SingleTickerProviderStateMixin 防止页面被回收  
class MineStencilPageState extends State<MineStencilPage>  
with SingleTickerProviderStateMixin \{  
TabController \_tabController;

@override  
void dispose() \{  
\_tabController.dispose();  
super.dispose();  
\}

@override  
void initState() \{  
super.initState();  
\_tabController = new TabController(vsync: this, length: 2);  
\}

@override  
Widget build(BuildContext context) \{  
return Scaffold(  
appBar: AppBar(  
elevation: 0,  
brightness: Brightness.light,  
leading: IconButton(  
icon: Image.asset(IconUtils.getIconPath('fanhui')),  
onPressed: () => Navigator.pop(context)),  
title: Text(  
'打印配置',  
style: TextStyle(color: BaseColor.colorFF262626, fontSize: 18),  
),  
backgroundColor: Colors.white,  
bottom: \_tabBarTop(),  
),  
body: Container(child: \_tabBarView()),  
backgroundColor: BaseColor.colorFFF5F5F5,  
);  
\}

\_tabBarView() => TabBarView(  
controller: \_tabController,  
physics: NeverScrollableScrollPhysics(),  
children: <Widget>\[  
Center(child: Text('烟草默认模版')),  
Center(child: Text('商超默认模版')),  
\]);

\_tabBarTop() => TabBar(  
tabs: <Widget>\[  
Tab(text: '烟草默认模版'),  
Tab(text: '商超默认模版'),  
\],  
controller: \_tabController,  
indicatorColor: BaseColor.colorFF03B798,  
indicatorWeight: 3,  
indicatorSize: TabBarIndicatorSize.label,  
indicator: MyUnderlineTabIndicator(  
borderSide: BorderSide(width: 3.0, color: BaseColor.colorFF03B798)),  
indicatorPadding: EdgeInsets.all(5),  
labelColor: BaseColor.colorFF262626,  
labelStyle: TextStyle(fontSize: BaseSize.sp(14)),  
unselectedLabelColor: BaseColor.colorFF999999,  
unselectedLabelStyle: TextStyle(fontSize: BaseSize.sp(14)),  
);  
\}