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

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


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 随时 复制粘贴 使用


早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:设计师小姐姐 返回首页