Flutter ClipOval 圆形裁剪实现的图形图片

Flutter ClipOval 圆形裁剪实现的图形图片

Android小彩虹2021-08-22 7:16:58420A+A-

题记 —— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精。


Flutter是谷歌推出的最新的移动开发框架。

Clip 家族的 Widget 用来裁剪其他 Widget ,以实现各种形状的样式。

Clip 裁剪相关 Widget 如下 :

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

在 Flutter 中 ClipOval可以将子 Wiget 裁剪成圆形或者椭圆形。 在业务开发应用场景中,如圆形图片的实现,就可使用 ClipOval 来包裹一个 Image 组件,如下 Demo:


class TestClipOvalPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ClipOvalState();
  }
}

class _ClipOvalState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: new AppBar(title: Text(" ClipOval "),),
      body: Container(
        width: 100,
        height: 100,
        ///裁剪组件
        child: ClipOval(
          ///一个图片
          child: new Image.network(
              imageUrl, //图片地址
              ///填充
              fit: BoxFit.fill),
        ),
      ),
    );
  }

  String imageUrl =
      "https://timgsa.baidu.com/timg?demo.image&quality=80&size=b9999_10000&sec=1578583093&di=0bf687d9589dc5c6c0778de9576ee077&imgtype=jpg&er=1&src=http%3A%2F%2Ffile.mumayi.com%2Fforum%2F201403%2F28%2F111010vhgc45hkh41f1mfd.jpg";
}

运行效果如下: 在这里插入图片描述


完毕

当然 以小编的性格,是必须有源码的:本文章的全部代码在这里

当然 以小编的性格,必需有一个详细属性使用的视频讲解,点击这里查看


【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过

【x2】各种系列的视频教程 免费开源 关注 你不会迷路

【x3】系列文章 百万 Demo 随时 复制粘贴 使用


点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示 | 支付宝红包
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们