Flutter组件之ClipRect,ClipPath切割组件

Align组件，顾名思义，对齐的意思，用于子组件在父组件的位置控制，比如在Container中居中显示：

Container(
    width: 200,
    height: 200,
    color: Colors.green,
    child: Align(
        alignment: Alignment.Center,
        child: Container(
            width: 40,
            height: 40,
            color: Colors.pink,
        ),
    ),
)

效果如下:

Alignment.Center 也就是 Alignment(0.00,0.00)，居中显示。 Alignment(int x,int y)中x,y的取值为-1.0 ~ 1.0,从左上到右下。超出-1.0或者1.0，表示超出Parent的范围，可以实现特殊效果，比如Alignment(0,-1.5)悬浮效果如下：

ClipRect 可以将子部件切割，配合Align可以实现显示部分内容的效果。

先来个全局图：

ClipRect(
    child: Align(
        alignment: Alignment.topCenter,
        widthFactor: 1.0,
        heightFactor: 1.0,
        child: Image.network("https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/18/1718c3aabba35a04~tplv-t2oaga2asx-image.image"),
    ),
)

如图：

现在让我们修改一下heightFactor为0.5，可以只显示上半部分

ClipRect(
    child: Align(
        alignment: Alignment.topCenter,
        widthFactor: 1.0,
        heightFactor: 0.5,
        child: Image.network("https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/18/1718c3aabba35a04~tplv-t2oaga2asx-image.image"),
    ),
)

要显示下半部分修改alignment 为Alignment.bottomCenter即可。

ClipPath用来自定义形状，比ClipRect更加自定义化。将需要自定义的Widget使用ClipPath包裹起来，然后实现自定义的CustomClipper即可.我们来实现一个二次贝塞尔曲线形状图片吧。

ClipPath(
    clipper: CurvedClipper(),
    child: Image.network("https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/18/1718c3aabba35a04~tplv-t2oaga2asx-image.image"),
),

class CurvedClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    return Path()
      ..lineTo(0, size.height)
      ..quadraticBezierTo(
          size.width / 4, size.height - 40, size.width / 2, size.height - 20)
      ..quadraticBezierTo(
          size.width * 3 / 4, size.height, size.width, size.height - 30)
      ..lineTo(size.width, 0);
  }

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

效果图如下:

ClipRect、ClipPath简单使用，谢谢观看。