TabBar指标自定义形状

Question

我试图根据此形状创建TabBar指示器。

我当前的代码如下

TabBar(
  isScrollable: true,
  controller: _tabController,
  tabs: _tabList,
  labelColor: Colors.black,
  labelStyle: _generalTitleStyle,
  // indicatorColor: Colors.black,
  indicatorSize: TabBarIndicatorSize.tab,
  indicatorWeight: 4.0,
  indicatorPadding: EdgeInsets.symmetric(horizontal: 8.0),
  indicator: ShapeDecoration(
    shape: UnderlineInputBorder(
      borderSide: BorderSide(width: 8.0),
      borderRadius: BorderRadius.only(
        topLeft: Radius.elliptical(50, 360),
        topRight: Radius.elliptical(50, 360),
      ),
    ),
  ),
),

导致它是这样的

但是当我将borderRadius位更改为

borderRadius: BorderRadius.only(
  bottomLeft: Radius.elliptical(50, 360),
  bottomRight: Radius.elliptical(50, 360),
),

它确实有效，但不是我想要的形式

我实际上如何做到使其形状像顶部的图像？

谢谢！

Answer 1

您可以为指标创建自己的自定义形状。

代码如下：

class MyShape extends ShapeBorder {
  int shapeDistance = 5;
  @override
  // TODO: implement dimensions
  EdgeInsetsGeometry get dimensions => null;

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) {
    // TODO: implement getInnerPath
    return null;
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    // TODO: implement getOuterPath
    return null;
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {
    final paint = Paint();
    Path path = new Path();
    path.moveTo(rect.bottomLeft.dx + shapeDistance, rect.bottomLeft.dy);
    path.lineTo(rect.bottomLeft.dx, rect.bottomLeft.dy + shapeDistance);
    path.lineTo(rect.bottomRight.dx, rect.bottomRight.dy + shapeDistance);
    path.lineTo(rect.bottomRight.dx - shapeDistance, rect.bottomRight.dy);
    canvas.drawPath(path, paint);
  }

  @override
  ShapeBorder scale(double t) {
    // TODO: implement scale
    return null;
  }
}

然后将其设置为

ShapeDecoration(
   shape: MyShape()
)