在版式之外的Flutter Push自定义小部件

Question

我有一个自定义小部件（这是布局实现）

CustomPaint(
  size: Size(double.infinity, double.infinity),
  painter: OvalPainter(),
)

这是Container的子代。我现在希望将此小部件推出大约30％。这里是可视化

我尝试剪切它，然后使用一些边距，但是它不起作用。在Android Studio中，我只是将android:layout_marginBottom="-50dp"放到我的自定义视图中，但是Padding的负值将引发错误

I / flutter（6808）：'package：flutter / src / rendering / shifted_box.dart'：失败的断言：第107行pos 15：

I / flutter（6808）：'padding.isNonNegative'：不正确。

编辑：解决方案如下

return ClipRect(
  clipper: myClipper(), //optional
  child: OverflowBox(
    minHeight: ITEM_HEIGHT * 1.5,
    maxHeight: ITEM_HEIGHT * 2,
    child: CustomPaint(
      size: Size(double.infinity, ITEM_HEIGHT * 1.5),
      painter: OvalPainter()
    ),
  ),
);

因此，我使小部件大于空间，然后将其裁剪

Answer 1

我用CustomClipper做了类似的事情，那是你想要的吗？

这是带有OvalClipper的CustomClipper类

class OvalClipper extends CustomClipper<Path> {
  static const double PAD = 20;

  @override
  Path getClip(Size size) {
    Path path = Path();

    path.addOval(
      Rect.fromCenter(
        center: Offset(size.width / 2, size.height * 0.7),
        width: size.width - 2 * PAD,
        height: size.height,
      ),
    );

    return path;
  }

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

以及我们如何使用它

Container(
  width: 200,
  height: 200,
  color: Colors.green,
  child: ClipPath(
    clipper: OvalClipper(),
    child: Container(
        color: Colors.red,
      ),
    ),
)