Flutter 76: 图解基本 TabBar 标签导航栏 (二)

云计算百科 xtyly 1个月前 (02-17) 10次浏览 已收录 0个评论

      小菜刚刚学习了 TabBar 标签导航栏的使用,其中对于标签指示器 indicator 的使用较少;小菜今天尝试一下自定义标签指示器;

      TabBar 提供了 indicator 指示器属性;允许用户自定义 indicator,但自定义的指示器会导致 indicatorColor / indicatorWeight / indicatorPadding 属性失效;默认的指示器是 UnderlineTabIndicator

Decoration get _indicator {   if (widget.indicator != null) return widget.indicator;   final TabBarTheme tabBarTheme = TabBarTheme.of(context);   if (tabBarTheme.indicator != null) return tabBarTheme.indicator;    Color color = widget.indicatorColor ?? Theme.of(context).indicatorColor;   if (color.value == Material.of(context).color?.value) color = Colors.white;    return UnderlineTabIndicator(       insets: widget.indicatorPadding,       borderSide: BorderSide(width: widget.indicatorWeight, color: color)); }

Flutter 76: 图解基本 TabBar 标签导航栏 (二)

源码分析

class ACETabBarIndicator extends Decoration {   @override   BoxPainter createBoxPainter([onChanged]) => _ACETabBarIndicatorPainter(this, onChanged); }  class _ACETabBarIndicatorPainter extends BoxPainter {   final ACETabBarIndicator decoration;   _ACETabBarIndicatorPainter(this.decoration, VoidCallback onChanged);    @override   void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {     // TODO: implement paint   } }

      分析源码可知,自定义 indicator 指示器均需继承自 Decoration;其中绘制 BoxPainter 时可以通过 OffsetImageConfiguration 获取对应 Tab 尺寸和所在位置;

案例尝试

      小菜将自定义 ACETabBarIndicator 单独出来,并未自定义 TabBar,因此不能直接使用 TabBar 中属性,若需要直接使用 TabBar 中属性可以尝试将 ACETabBarIndicator 放置在 TabBar 源码中进行自定义;

      自定义主要是实现各种样式的 paint 绘制过程,小菜简单尝试了如下几种指示器样式;

1. ACETabBarIndicatorType.circle -> 实心圆点

      小菜以设置 height 为直径,在 Tab 底部中间位置绘制一个圆形,注意起始位置为底部中心位置减半径;

canvas.drawCircle(     Offset(offset.dx + (configuration.size.width) / 2, configuration.size.height - _height),     _height, _paint);

Flutter 76: 图解基本 TabBar 标签导航栏 (二)

2. ACETabBarIndicatorType.triangle -> 上三角

      小菜通过绘制 Path 来生成一个上三角;其中需要兼容一个三角高度上限;

if (_height > configuration.size.height)    _height = _kIndicatorHeight; Path _path = Path()   ..moveTo(offset.dx + (configuration.size.width) / 2 - _height, configuration.size.height)   ..lineTo(_height * tan(pi / 6) + offset.dx + (configuration.size.width - _height) / 2,       configuration.size.height - _height)   ..lineTo(_height * tan(pi / 6) + offset.dx + (configuration.size.width + _height) / 2,       configuration.size.height); canvas.drawPath(_path, _paint);

Flutter 76: 图解基本 TabBar 标签导航栏 (二)

3. ACETabBarIndicatorType.rrect -> 圆角矩形(整个 Tab)

      小菜绘制一个圆角矩形,其中矩形的起始位置为 Offset 对应的 Tab 大小为 ImageConfiguration 尺寸;

canvas.drawRRect(     RRect.fromRectAndRadius(         Rect.fromLTWH(offset.dx, offset.dy, configuration.size.width, configuration.size.height),         Radius.circular(_kIndicatorAngle)),     _paint);

Flutter 76: 图解基本 TabBar 标签导航栏 (二)

4. ACETabBarIndicatorType.rrect_inner -> 圆角矩形(有内边距)

      小菜无法准确获取 TabWidgets 位置与尺寸,因此通过 height 来进行处理;其中矩形的起始高度需要减 1,因为 Paint 默认线宽为 1

canvas.drawRRect(     RRect.fromRectAndRadius(         Rect.fromLTWH(             offset.dx + height, height - 1,             configuration.size.width - height * 2,             configuration.size.height - height * 2 - 2),         Radius.circular(_kIndicatorAngle)),     _paint);

Flutter 76: 图解基本 TabBar 标签导航栏 (二)

5. ACETabBarIndicatorType.runderline -> 圆角下划线

      TabBar 默认的指示器样式为 UnderlineTabIndicator;只需调整 Paint 笔触线样式为 round 即可;

canvas.drawLine(     Offset(offset.dx, configuration.size.height - height / 2),     Offset(offset.dx + configuration.size.width, configuration.size.height - height / 2),     _paint..strokeWidth = height / 2);

Flutter 76: 图解基本 TabBar 标签导航栏 (二)

6. ACETabBarIndicatorType.runderline_fixed -> 定长圆角下划线

      小菜设置定长的下划线,需要注意的是若 Tab 宽度小于设置的 width 时,兼容默认的宽度;

if (_width > configuration.size.width)   _width = configuration.size.width / 3; canvas.drawLine(     Offset(offset.dx + (configuration.size.width - _width) / 2, configuration.size.height - height / 2),     Offset(offset.dx + (configuration.size.width + _width) / 2, configuration.size.height - height / 2),     _paint..strokeWidth = height / 2);

Flutter 76: 图解基本 TabBar 标签导航栏 (二)


      ACETabBarIndicator 案例源码


      小菜对自定义标签指示器的适配测试还不够完全,如有错误请多多指导!

来源: 阿策小和尚


阿里云百科网 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Flutter 76: 图解基本 TabBar 标签导航栏 (二)
喜欢 (0)
[[email protected]]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址