Flutter 实现控件圆角的方式

实现控件圆角的方式

  • 使用Card的shape属性
  • 使用Container的decoration
  • 使用ClipRRect
//第一种Container(margin: const EdgeInsets.only(left: 10, right: 10, top: 100, bottom: 100),decoration: ShapeDecoration(image: const DecorationImage(image: NetworkImage('https://th.bing.com/th/id/OIP.1_lUKm-qhDMmh_zz3fw7EwHaE7?w=284&h=189&c=7&r=0&o=5&dpr=2&pid=1.7'),fit: BoxFit.cover),shape: RoundedRectangleBorder(borderRadius:BorderRadiusDirectional.circular(20))),width: double.maxFinite,child: const Align(child: Padding(padding: EdgeInsets.all(8.0),child: Text("Container decoration实现圆角(radius = 20)",style: TextStyle(color: Colors.blueAccent),),),alignment: Alignment.bottomCenter,),),//第二种
Card(shape: RoundedRectangleBorder(borderRadius: BorderRadiusDirectional.circular(20)),clipBehavior: Clip.antiAlias,child:AssetImage('images/pic_1.jpg', width: double.maxFinite,),
)
//第三种
ClipRRect( borderRadius: BorderRadius.circular(20),child:AssetImage("images/pic_2.jpeg"),
)


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部