如何在颤振中使用自定义颜色实现自定义点状 Tab 指示器

卡西卡

我想实现点形标签指示器(即,小圆圈)如下图所示,带有自定义颜色。

参考这张图片

请在这方面提供帮助。

莫汉·库马尔

您可以创建一个单独的小部件,将颜色和半径作为参数来实现这一点。

从这里引用

指标参数需要一个装饰,所以我们应该创建一个BoxPainter

import 'package:flutter/material.dart';

class CircleTabIndicator extends Decoration {
 final BoxPainter _painter;

 CircleTabIndicator({@required Color color, @required double radius})
    : _painter = _CirclePainter(color, radius);

 @override
 BoxPainter createBoxPainter([onChanged]) => _painter;
}

class _CirclePainter extends BoxPainter {
 final Paint _paint;
 final double radius;

 _CirclePainter(Color color, this.radius)
    : _paint = Paint()
  ..color = color
  ..isAntiAlias = true;

@override
void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
   final Offset circleOffset =
      offset + Offset(cfg.size.width / 2, cfg.size.height - radius - 5);
   canvas.drawCircle(circleOffset, radius, _paint);
 }

}

并将其用作

 indicator: CircleTabIndicator(color: Colors.white, radius: 3),

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章