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";
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

运行效果如下：

---

完毕

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

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

---

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

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

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

---