本文已参与「新人创作礼」活动,一同敞开创作之路。

这是【Flutter 问题系列第 14 篇】,假如觉得有用的话,欢迎重视专栏。

一:为什么要自界说 TabBar indicator 的宽度和圆角 ?

假如你收到的原型图是这样的作用,如下图所示

【Flutter 问题系列第 14 篇】Flutter 自定义 TabBar indicator 的宽度和圆角

这样的布局假如用 Flutter 原生 TabBar 中的操控器 indicator 是无法完成这个作用的,有两点

  • 操控器的宽度由特点 indicatorSize 决议,现在只支撑两种,一种是 TabBarIndicatorSize.label,意思是和文字的标签 label 的长度相同,别的一种是 TabBarIndicatorSize.label.tab,意思是和操控器长度相同,而咱们需求的是比文字的长度要短一些。
  • 默许操控器的边角是直角形状。而咱们需求的是圆角形状。

这个时分就需求咱们自己界说操控器了,接下来说的是怎么自界说操控器的宽度和圆角。

二:怎么自界说 TabBar indicator 的宽度和圆角 ?

假如你仅仅需求自界说操控器的代码,可点此跳转到博文尾部,假如你想看下怎么自界说操控器进程,可继续阅览。

自界说的思路

操控器能显示出来,说明原生有操控其款式的功用,最快的自界说就是找到哪里操控着,然后把代码仿制过来,再依据里边哪个当地操控着宽度和边角,修正为自己需求的即可。

过程一:检查默许的操控器源码

跳转到特点 indicator 界说的当地,发现其类型为 Decoration ,源码中很明显的说明晰操控器的默许款式是 UnderlineTabIndicator 类,如下图所示

【Flutter 问题系列第 14 篇】Flutter 自定义 TabBar indicator 的宽度和圆角

先不着急仿制代码,咱们看看源码中哪个当地操控着操控器的宽度和边角。

过程二:检查操控器源码中操控宽度和边角的功用

经检查源码,发现决议操控器宽度的代码是

【Flutter 问题系列第 14 篇】Flutter 自定义 TabBar indicator 的宽度和圆角

而决议操控器边角的代码是

【Flutter 问题系列第 14 篇】Flutter 自定义 TabBar indicator 的宽度和圆角

过程三:仿制源码,修正操控器中操控宽度和边角的功用

仿制 UnderlineTabIndicator 的源码,改名为 CustomUnderlineTabIndicator , 在该类中新增两个特点,别离决议操控器的宽度和边角形状。

  final double width; // 操控器宽度
  final StrokeCap strokeCap; // 操控器边角形状

然后修正决议操控器宽度的代码为

  Rect _indicatorRectFor(Rect rect, TextDirection textDirection) {
    assert(rect != null);
    assert(textDirection != null);
    final Rect indicator = insets.resolve(textDirection).deflateRect(rect);
    // 期望的宽度
    double wantWidth = this.width;
    // 取中心坐标
    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 = decoration
        ._indicatorRectFor(rect, textDirection)
        .deflate(decoration.borderSide.width / 2);
    final Paint paint = decoration.borderSide.toPaint()
      ..strokeCap = decoration.strokeCap; // 这里修正操控器边角的形状
    canvas.drawLine(indicator.bottomLeft, indicator.bottomRight, paint);
  }

怎么使用

仿制文件到你的项目中,直接在 TabBar 的特点 indicator 中,引入 CustomUnderlineTabIndicator 类,然后传入你想要的操控器宽度和边角形状即可。

三:获取自界说操控器的完好代码

完好代码可 点此跳转 GitHub ,假如有用,能够点个 Star 鼓励一下,谢谢。

你的问题得到解决了吗?欢迎在谈论区留言。

赠人玫瑰,手有余香,假如觉得文章不错,期望能够给个一键三连,感谢。


结束语

Google 的 Flutter 越来越火,截止 2021年4月18日 GitHub 标星已达 86K,Flutter 决然是一种趋势,所以作为前端开发者,没有理由不趁早去学习。

无论你是 Flutter 新手还是已经入门了,不妨先点个重视,后续我会将 Flutter 中的常用组件(含有源码分析、组件的用法及注意事项)以及或许遇到的问题写到稀土博客中,期望自己学习的同时,也能够帮助更多的人。