Flutter 自定义TabBar样式

TabBar根本特点

   TabBar的根本构造办法和含义

  const TabBar({
    Key? key,
    required this.tabs,    // 一般运用Tab目标,当然也可所以其他的Widget
    this.controller,    // TabController目标
    // 1、是否可翻滚这个特点需求尤为留意，当你的tab数量很少又想要均分屏幕宽度能够设置isScrollable为false，
    // 1、一起外层的container需求设置宽度为屏幕宽度
    // 2、当你的tab数量许多想要平均分能够设置isScrollable为true
    this.isScrollable = false,    
    this.padding,    // 内边距
    this.indicatorColor, // 指示器色彩
    this.automaticIndicatorColorAdjustment = true,    // 是否主动调整indicatorColor
    this.indicatorWeight = 2.0, //指示器宽度
    this.indicatorPadding = EdgeInsets.zero, // 指示器内边距
    this.indicator,     // 指示器decoration，例如边框等
    this.indicatorSize,    // 指示器巨细计算方式
    this.labelColor,    // 选中tab文字色彩
    this.labelStyle,   // 选中tab文字款式
    this.labelPadding,     // 选中文字内边距
    this.unselectedLabelColor,     // 非选中文字色彩
    this.unselectedLabelStyle,    // 非选中文字款式
    this.dragStartBehavior = DragStartBehavior.start,
    this.overlayColor,    // 呼应焦点、悬停和飞溅色彩
    this.mouseCursor,    // 鼠标指针进入或悬停在鼠标指针上时的光标
    this.enableFeedback,     // 检测到的手势是否应提供声音和/或触觉反应
    this.onTap,    // 单击Tab时的回调
    this.physics,    // TabBar的翻滚视图如何呼应用户输入
  }) 

TabBar的根本运用

  Widget _buildListTab() {
    return Container(
      color: const Color(0xffF1F1F1),
      child: Column(
        children: [
          Expanded(
            child: DefaultTabController(
              length: 6,
              child: Column(
                children: [
                  Container(
                    color: Colors.white,
                    child:TabBar(
                       isScrollable: true,
                       indicatorSize: TabBarIndicatorSize.label,
                       indicatorColor: Colors.blue,
                       labelColor: Colors.black,
                       unselectedLabelColor: Colors.black54,
                       tabs: [
                         const TCTab(text: "测验1"),
                         const TCTab(text: "测验2"),
                         const TCTab(text: "测验3"),
                         const TCTab(text: "测验4"),
                         const TCTab(text: "测验5"),
                         const TCTab(text: "测验6"),
                       ],
                     )
                 ),
                 Expanded(
                   child: TabBarView(children: [
                   // 下面所对应的页面都是能够自界说要显现的内容的Widget，完成已省略
                     _buildTabWidget(""), // 对应【测验1】页面
                     _buildTabWidget(""), // 对应【测验2】页面
                     _buildTabWidget(""), // 对应【测验3】页面
                     _buildTabWidget(""), // 对应【测验4】页面
                     _buildTabWidget(""), // 对应【测验5】页面
                     _buildTabWidget(""), // 对应【测验6】页面
                   ]),
                 ),
               ],
             )),
           ),
        ],
      ),
    );
  }

显现的作用如下：

  如上图所示已经知道TabBar的根本运用，本文首要讨论指示条的自界说过程，详细的的运用这儿不过多赘述，让咱们想一个问题：指示器的款式和位置在已有的TabBar中没办法调整，例如咱们想让指示横条能够往上走一点，宽度能够自界说，而且还能是四角圆角该怎样完成呢？

自界说Tbabbr

  经过TabBar提供的特点咱们能够发现，指示横条对应的特点indicator咱们能够进行自界说，找到这个特点

  这样咱们就能够经过复写UnderlineTabIndicator中的内容来自界说自己想要的indicator。值的留意的是:关于不同版别的Flutter，或许存在UnderlineTabIndicator完成的不同，所以直接copy网上的自界说代码会有报错的或许。以我运用的Flutter版别为例（flutter –version）

Flutter 2.10.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision c860cba910 (1 year, 4 months ago) • 2022-03-25 00:23:12
-0500
Engine • revision 57d3bac3dd
Tools • Dart 2.16.2 • DevTools 2.9.2

  我的自界说UnderlineTabIndicator如下：

// ignore_for_file: unnecessary_null_comparison
import 'package:flutter/material.dart';
// ignore: implementation_imports
import 'package:flutter/src/foundation/diagnostics.dart';
class TCUnderlineTabIndicator extends Decoration {
  const TCUnderlineTabIndicator({
    this.borderSide = const BorderSide(width: 2.0, color: Colors.white),
    this.insets = EdgeInsets.zero,
    this.indicatorBottom = 0.0,
    this.indicatorWidth = 28,
    this.isRound = false,
  }) : assert(borderSide != null),assert(insets != null);
  final BorderSide borderSide;
  final EdgeInsetsGeometry insets;
  final double indicatorBottom; // 自界说指示条间隔底部间隔
  final double indicatorWidth; // 自界说指示条宽度
  final bool? isRound; // 自界说指示条是否是圆角
  @override
  Decoration? lerpFrom(Decoration? a, double t) {
    if (a is TCUnderlineTabIndicator) {
      return TCUnderlineTabIndicator(
        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 TCUnderlineTabIndicator) {
      return TCUnderlineTabIndicator(
        borderSide: BorderSide.lerp(borderSide, b.borderSide, t),
        insets: EdgeInsetsGeometry.lerp(insets, b.insets, t)!,
      );
    }
    return super.lerpTo(b, t);
  }
  @override
  BoxPainter createBoxPainter([ VoidCallback? onChanged ]) {
    return _UnderlinePainter(this, onChanged, isRound ?? false);
  }
  Rect _indicatorRectFor(Rect rect, TextDirection textDirection) {
    assert(rect != null);
    assert(textDirection != null);
    final Rect indicator = insets.resolve(textDirection).deflateRect(rect);
    //    return Rect.fromLTWH(
    //      indicator.left,
    //      indicator.bottom - borderSide.width,
    //      indicator.width,
    //      borderSide.width,
    //    );
    //取中间坐标
    double cw = (indicator.left + indicator.right) / 2;
    // ***************************这儿能够自界说指示条的宽度和底部间距***************************
    Rect indictorRect = Rect.fromLTWH(cw - indicatorWidth / 2, indicator.bottom - borderSide.width-indicatorBottom, indicatorWidth, borderSide.width);
    return indictorRect;
  }
  @override
  Path getClipPath(Rect rect, TextDirection textDirection) {
    return Path()..addRect(_indicatorRectFor(rect, textDirection));
  }
}
class _UnderlinePainter extends BoxPainter {
  _UnderlinePainter(this.decoration, VoidCallback? onChanged, this.isRound)
    : assert(decoration != null),
      super(onChanged);
  final TCUnderlineTabIndicator decoration;
  bool isRound = false;
  @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 = decoration._indicatorRectFor(rect, textDirection).deflate(decoration.borderSide.width / 2.0);
    //***************************这儿能够自界说指示条是否是圆角***************************
    final Paint paint = decoration.borderSide.toPaint()..strokeCap = isRound ? StrokeCap.round : StrokeCap.square;
    canvas.drawLine(indicator.bottomLeft, indicator.bottomRight, paint);
  }
}
const double _kTextAndIconTabHeight = 72.0;
enum TabBarIndicatorSize {
  tab,
  label,
}
class TCTab extends StatelessWidget implements PreferredSizeWidget {
  const TCTab({
    Key? key,
    this.text,
    this.icon,
    this.iconMargin = const EdgeInsets.only(bottom: 10.0),
    this.height,
    this.child,
    this.tabBarHeight = 44,
  }) : assert(text != null || child != null || icon != null),assert(text == null || child == null),super(key: key);
  final String? text;
  final Widget? child;
  final Widget? icon;
  final EdgeInsetsGeometry iconMargin;
  final double? height;
  final double tabBarHeight; // 自界说tab的高度
  Widget _buildLabelText() {
    return child ?? Text(text!, softWrap: false, overflow: TextOverflow.fade);
  }
  @override
  Widget build(BuildContext context) {
    assert(debugCheckHasMaterial(context));
    final double calculatedHeight;
    final Widget label;
    if (icon == null) {
      calculatedHeight = tabBarHeight;
      label = _buildLabelText();
    } else if (text == null && child == null) {
      calculatedHeight = tabBarHeight;
      label = icon!;
    } else {
      calculatedHeight = _kTextAndIconTabHeight;
      label = Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            margin: iconMargin,
            child: icon,
          ),
          _buildLabelText(),
        ],
      );
    }
// ***********************tab的高度在这儿界说****************************
    return SizedBox(
      height: height ?? calculatedHeight,
      child: Center(
        widthFactor: 1.0,
        child: label,
      ),
    );
  }
  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.add(StringProperty('text', text, defaultValue: null));
    properties.add(DiagnosticsProperty<Widget>('icon', icon, defaultValue: null));
  }
  @override
  Size get preferredSize {
    if (height != null)
      return Size.fromHeight(height!);
    else if ((text != null || child != null) && icon != null)
      return const Size.fromHeight(_kTextAndIconTabHeight);
    else
      return Size.fromHeight(tabBarHeight);
  }
}

运用代码和作用图显现如下：

 Widget _buildListTab() {
    return Container(
      color: const Color(0xffF1F1F1),
      child: Column(
        children: [
          Expanded(
            child: DefaultTabController(
              length: 6,
              child: Column(
                children: [
                  Container(
                    color: Colors.white,
                    child:TabBar(
                      labelColor: Colors.black,
                      unselectedLabelColor: const Color(0xFF666666),
                      labelStyle: const TextStyle(fontSize: 14, fontWeight: FontWeight.w600),
                      unselectedLabelStyle: const TextStyle(fontSize: 14, fontWeight: FontWeight.normal),
                      isScrollable: true,
                      indicator: const TCUnderlineTabIndicator(
                        indicatorBottom: 6,
                        indicatorWidth: 28,
                        borderSide: BorderSide(
                          width: 3,
                          color: Color(0xFF1989FA),
                        )
                      ),
                      tabs: [
                        const TCTab(text: "测验1"),
                        const TCTab(text: "测验2"),
                        const TCTab(text: "测验3"),
                        const TCTab(text: "测验4"),
                        const TCTab(text: "测验5"),
                        const TCTab(text: "测验6"),
                      ],
                    );
                 ),
                 Expanded(
                   child: TabBarView(children: [
                   // 下面所对应的页面都是能够自界说要显现的内容的Widget
                     _buildTabWidget(""), // 对应【测验1】页面
                     _buildTabWidget(""), // 对应【测验2】页面
                     _buildTabWidget(""), // 对应【测验3】页面
                     _buildTabWidget(""), // 对应【测验4】页面
                     _buildTabWidget(""), // 对应【测验5】页面
                     _buildTabWidget(""), // 对应【测验6】页面
                   ]),
                 ),
               ],
             )),
           ),
        ],
      ),
    );
  }

总结

关于Flutter TabBar的自界说款式重点关注的就是重写UnderlineTabIndicator和Tab对外暴露出能够扩展的特点，大概就这么多，期望对我们有所帮助！

参考资料：

• #flutter TapBar自界说indicator、固定宽度、圆角、改动indicator和text的间隔
• #Flutter设置TabBar indicator宽度（爆改UnderlineTabIndicator ）
• # Flutter中完成自界说TabBar