Flutter将自定义小部件推送到布局之外

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的{​​{1}}类

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;
}