題記
—— 執劍天涯，從你的點滴積累開始，所及之處，必精益求精，
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 隨時 復制粘貼 使用
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/171773.html
標籤：其他
上一篇：JAVA之forEach遍歷集合
下一篇：預覽圖片的方式