Flutter 圆角(一)BoxDecoration

String imageNetwork = "http://pic41.nipic.com/20140514/5295460_234432363121_2.jpg";
return Container (
   //父视图如果不对宽高进行设置,那么默认取屏幕宽高
   decoration: BoxDecoration(
     color: Colors.red,
     shape: BoxShape.circle,
     image: DecorationImage(image: NetworkImage(imageNetwork),),
   ),
);
BoxShape_circle_1.png
//BoxDecoration不设置image时,父视图的取宽高中的较小值画圆,这时展示的是圆
//BoxDecoration设置image时,以父视图的宽高中的较大值切圆,这时展示的不是圆
return Container (
  decoration: BoxDecoration(
  color: Colors.red,
  shape: BoxShape.circle,
//  image: DecorationImage(image: NetworkImage(imageNetwork),),
),
BoxShape_circle_2.png
//Container 的 color 和 decoration 不能同时设置
//BoxShape.circle  默认切的就是圆,所以不用设置borderRadius
//BoxShape.rectangle  可以切圆角矩形
return Center(
  child: Container(width: 300, height: 300,
  decoration: BoxDecoration(
  shape: BoxShape.circle,
  image: DecorationImage(image: NetworkImage(imageNetwork),),
  ),
 ),
);

return Center(
  child: Container(width: 300, height: 300,
  decoration: BoxDecoration(
  shape: BoxShape.rectangle,
  borderRadius: BorderRadius.circular(20.0),
  image: DecorationImage(image: NetworkImage(imageNetwork),),
  ),
 ),
);
BoxShape_circle_3.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容