码迷,mamicode.com
首页 > 其他好文 > 详细

ClipOval,ClipRRect,ClipRect,ClipPath(每日Flutter 小部件)

时间:2020-03-23 15:08:03      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:border   baidu   gty   mic   ica   class   pre   network   hud   

Clip的相关组件:

ClipOval: 圆形裁剪

ClipRRect: 圆角矩形裁剪

ClipRect:矩形裁剪

ClipPath: 路径裁剪

 

 

参数:

clipper:裁剪路径  CustomClipper<Path> 的实现

 

class ClipWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return getLv(context);
  }

//  ClipOval: 圆形裁剪
//  ClipRRect: 圆角矩形裁剪
//  ClipRect:矩形裁剪
//  ClipPath: 路径裁剪

  Widget getLv(BuildContext context) {
    return Expanded(
        child: ListView(children: <Widget>[
      ClipOval(
        child: SizedBox(
          width: 200,
          height: 200,
          child: getImageWidget(),
        ),
      ),
      ClipRect(
        child: getImageWidget(),
      ),
      ClipRRect(
        borderRadius: BorderRadius.all(Radius.elliptical(30, 10)),
        child: getImageWidget(),
      ),
      ClipPath(
        clipper: TheTriangleCustomClipper(),
        child: getImageWidget(),
      )
    ]));
  }

  Widget getImageWidget() {
    return Image.network(
      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584787666369&di=2595aefbc771e601d57cfc5102135d78&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F68%2F61%2F300000839764127060614318218_950.jpg",
      fit: BoxFit.fill,
    );
  }
}

class TheTriangleCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path()
      ..moveTo(0.0, 0.0)
      ..lineTo(size.width, size.height)
      ..lineTo(0.0, size.height)
      ..close();
    return path;
  }

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

 

效果图:

技术图片

 

 

技术图片

 

ClipOval,ClipRRect,ClipRect,ClipPath(每日Flutter 小部件)

标签:border   baidu   gty   mic   ica   class   pre   network   hud   

原文地址:https://www.cnblogs.com/wjw334/p/12552172.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!