首页 > 建站教程 > APP开发,混合APP >  Flutter - 裁剪组件大全(ClipRect、ClipRRect、ClipOval、ClipPath)正文

Flutter - 裁剪组件大全(ClipRect、ClipRRect、ClipOval、ClipPath)

在Flutter中,提供了不少裁剪组件,可以帮助我们实现不同形状的组件,当然,如果需要特殊的形状,那就需要自定义裁剪组件了。

ClipRect - 矩形裁剪
ClipRect组件使用矩形裁剪子组件。通常情况下,ClipRect用于Center、Align、OverflowBox、CustomPaint、CustomSingleChildLayout、CustomMultiChildLayout组件。
Center(
    child: ClipRect(
        child: Image.network(
            'https://p3fx.kgimg.com/v2/fxuserlogo/7e83eb705e9a7dbddfbc4a265e14e018.jpg_200x200.jpg',
            fit: BoxFit.cover,
            width: 100,
            height: 50,
        ),
    ),
)
原图:



裁剪效果:



ClipRRect - 圆角矩形裁剪
ClipRRect组件使用圆角矩形裁剪子组件,默认圆角半径为0.
Center(
  child: ClipRRect(
    borderRadius: BorderRadius.circular(20),
    child: Image.network(
       'https://p3fx.kgimg.com/v2/fxuserlogo/7e83eb705e9a7dbddfbc4a265e14e018.jpg_200x200.jpg',
       fit: BoxFit.cover,
       width: 100,
       height: 100,
    ),
  ),
)
效果图:



ClipOval - 椭圆形裁剪
ClipOval组件使用椭圆形裁剪子组件,如父组件为正方形,裁剪出来的是圆形。

椭圆形:
Center(
  child: ClipOval(
    child: Image.network(
       'https://p3fx.kgimg.com/v2/fxuserlogo/7e83eb705e9a7dbddfbc4a265e14e018.jpg_200x200.jpg',
       fit: BoxFit.cover,
       width: 100,
       height: 50,
    ),
  ),
)
效果图:



圆形:
Center(
  child: ClipOval(
    child: Image.network(
       'https://p3fx.kgimg.com/v2/fxuserlogo/7e83eb705e9a7dbddfbc4a265e14e018.jpg_200x200.jpg',
       fit: BoxFit.cover,
       width: 100,
       height: 100,
    ),
  ),
)
效果图:



ClipPath - 自定义裁剪
ClipPath组件允许我们自定义路径来对子组件进行裁剪。

绘制三角形

首先,我们需要定义裁剪对形状,使用CustomClipper类:
import 'package:flutter/material.dart';
class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path()
      ..moveTo(0.0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width / 2, size.height / 2)
      ..close();
    return path;
  }
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
裁剪子组件:
ClipPath(
   clipper: TriangleClipper(),
   child: Image.network(
      'https://p3fx.kgimg.com/v2/fxuserlogo/7e83eb705e9a7dbddfbc4a265e14e018.jpg_200x200.jpg',
       fit: BoxFit.cover,
       width: 100,
       height: 100,
  ),
)
效果图:



clipper参数定义裁剪规则,也可以说裁剪路径

clipBehavior参数定义裁剪对方式:
    none:不裁剪
    hardEdge:裁剪但不应用抗锯齿
    antiAlias:裁剪且应用抗锯齿,此方式看起来会更平滑,通常用于处理圆形和弧形裁剪
    antiAliasWithSaveLayer:裁剪、应用抗锯齿且有一个缓冲区,此方式裁剪很慢。
注意:但子组件没有超出父组件但范围时,不会发生裁剪,也不会产生任何性能消耗。

文章转载自:http://laixiazheteng.com/article/page/id/WdKmyR8q0hRO