自定义形状 - 底部导航栏 - Flutter

时间:2021-03-28 19:54:12

标签: flutter bottomnavigationview custom-painter

我正在尝试为底部导航栏添加自定义形状。我尝试了ContinuousRectangleBorder 和Custom Paint。但是现在注意起作用了。有人可以帮我吗?

Nav Bar

class BottomBarBorder extends ContinuousRectangleBorder {
  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    Size size = rect.size;
    double horizontalOffset = size.height / 2;
    double horizontalRoundingPoint = size.height / 25;

    var path = new Path();
    path.lineTo(0, size.height * 1.4);
    var firstControlPoint = new Offset(horizontalRoundingPoint, 
     size.height);
    var firstEndPoint = new Offset(horizontalOffset, size.height);
    var secondControlPoint =
        new Offset(size.width - horizontalOffset, size.height);
    var thirdControlPoint =
        new Offset(size.width - horizontalOffset, size.height);
    var thirdMiddlePoint =
        new Offset(size.width - horizontalRoundingPoint, size.height);
    var thirdEndPoint = new Offset(size.width, size.height / 1.6);

    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstEndPoint.dx, firstEndPoint.dy);
    path.lineTo(secondControlPoint.dx, secondControlPoint.dy);
    path.cubicTo(
        thirdControlPoint.dx,
        thirdControlPoint.dy,
        thirdMiddlePoint.dx,
        thirdMiddlePoint.dy,
        thirdEndPoint.dx,
        thirdEndPoint.dy);

    path.lineTo(size.width, size.height / 3);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }
}

0 个答案:

没有答案