自定义剪辑路径 appbar 颤动答案

【问题标题】：Custom clip path appbar flutter自定义剪辑路径 appbar 颤动
【发布时间】：2022-06-15 11:25:18
【问题描述】：

我想创建自定义应用栏形状，如下图所示。我们如何使用剪贴路径来制作这样的形状？

尝试过的代码：

class CustomAppBarShape extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    double height = size.height;
    double width = size.width;
    var path = Path();
    path.lineTo(0, size.height);
    path.arcToPoint(Offset(size.width, size.height),
        radius: Radius.elliptical(30, 10),
    );
    path.lineTo(size.width, 0);
    path.close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return true;
  }
}

【问题讨论】：

请分享你所做的事情

标签： flutter

【解决方案1】：

我通过为AppBar 边框提供自定义形状来创建所需的AppBar 形状，查看实时示例here。

如果您想剪裁AppBar，您也可以在剪裁器中使用类似的Path，但我认为为边框提供自定义形状会更好。

自定义AppBar边框形状的代码：

class CustomAppBarShape extends ContinuousRectangleBorder {
   @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    double height = rect.height;
    double width = rect.width;
    var path = Path();
    path.lineTo(0, height + width * 0.1);
    path.arcToPoint(Offset(width * 0.1, height),
        radius: Radius.circular(width * 0.1),
    );
    path.lineTo(width * 0.9,  height);
    path.arcToPoint(Offset(width, height + width * 0.1),
        radius: Radius.circular(width * 0.1),
    );
    path.lineTo(width,  0);
    path.close();

    return path;
  }
}

编辑：

对于动态边缘半径，使用乘数 multi 作为构造函数参数更新 customAppBarShape，并使用 multi 创建外部路径。

class CustomAppBarShape extends ContinuousRectangleBorder {
  final double multi;
  const CustomAppBarShape({this.multi = 0.1});
   @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    double height = rect.height;
    double width = rect.width;
    var path = Path();
    path.lineTo(0, height + width * multi);
    path.arcToPoint(Offset(width * multi, height),
        radius: Radius.circular(width * multi),
    );
    path.lineTo(width * (1 - multi),  height);
    path.arcToPoint(Offset(width, height + width * multi),
        radius: Radius.circular(width * multi),
    );
    path.lineTo(width,  0);
    path.close();

    return path;
  }
}

然后像这样在构造函数参数中发送你想要的值，

appBar: AppBar(
   title: Text(widget.title),
   shape: const CustomAppBarShape(multi: 0.02),
)

确保 multi 的值小于 1 以获得所需的形状。

【讨论】：

我想减少边缘柔化。这可能吗？
@BurakMeteErdoğan 请检查编辑后的答案

【解决方案2】：

如果您仍然喜欢使用剪裁器而不是自定义形状，您可以使用我下面的代码来制作剪裁图像。

class BannerClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var height = size.height;
    var width = size.width;

    double radius = 20;

    Path path = Path()
      ..lineTo(0, height)
      ..arcToPoint(Offset(20, height - 20), radius: Radius.circular(radius))
      ..lineTo(width - 20, height - 20)
      ..arcToPoint(Offset(width, height), radius: Radius.circular(radius))
      ..lineTo(width, 0)
      ..close();

    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

【讨论】：