Flutter切圆角几种方式

2022-12-31  本文已影响0人  刀客666

切圆形图是需求很频繁的一个点,Flutter中实现的方式还挺多,总结一二,不同方法各有侧重,实现效率也不同,实践中还需要结合实际。

总结5种Flutter切圆角方式:

ClipRRect

var roundImage = ClipRRect(
  borderRadius: BorderRadius.circular(100),
  child: image,
);

Container设置圆形的decoration

var roundImage = Container(
  clipBehavior: Clip.hardEdge,
  decoration: const BoxDecoration(shape: BoxShape.circle),
  child: image,
);

CircleAvatar设置backgroundImage

var roundImage = CircleAvatar(
  radius: 100,
  backgroundImage: NetworkImage("url"),
);

ClipOval

var roundImage = ClipOval(
  child: image,
);

ClipPath

var roundImage = ClipPath.shape(
  shape: const CircleBorder(),
  child: image,
);

小结

人人都笑孔乙己,人人都是孔乙己。孔乙己在封建腐朽思想和科举度的毒害下,变得腐朽不堪、麻木不仁、四体不勤、穷困潦倒,在人们的嘲笑中混渡时日,最后身死。鲁迅先生的刻画是超越时代的,我也时常告诫自己,勿因循守旧,勿卖弄学识。

当下的知识,似乎成了流量的附庸,我希望我在学习Flutter过程中,能够回归初心,能够学以致用,而不是拿着总结的知识点,在向别人卖弄回字有几种写法。

上一篇下一篇

猜你喜欢

热点阅读