flutter 生成圆形/圆角图片【ClipRRect组件等】

sinnoo

发布于 2020-11-12 15:50:51

1.7K00

代码可运行

文章被收录于专栏：技术人生技术人生

运行总次数：0

代码可运行

大咖揭秘Java人都栽在了哪？点击免费领取《大厂面试清单》，攻克面试难关~>>>

一、ClipOval组件

ClipOval(
    child:Image.network(
            'https://n4p.imoxiu.com/e5e90f67f879d213aa5eb46dcc1d95f1669ecb59/200_200',
            width: 100.0,
            height: 100.0,
            fit: BoxFit.cover,
          )
)

二、ClipRRect组件

 Center(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(40),
            child: Image.network('https://n4p.imoxiu.com/e5e90f67f879d213aa5eb46dcc1d95f1669ecb59/200_200'),
          ),
        ),

三、 CircleAvatar组件，需要注意图片的大小

CircleAvatar(
        radius: 3.0,
        child:Image.network('https://n4p.imoxiu.com/e5e90f67f879d213aa5eb46dcc1d95f1669ecb59/200_200'),
      );

四、通过Container的decoration

使用的DecorationImage，相当于把图片当做一个背景，这里需要注意的就是Container的child的尺寸问题，就算不放内容，也需要设置一个带尺寸的child Widget。

Container(
        decoration: ShapeDecoration(
            image: DecorationImage(
                image: NetworkImage(
                    'https://n4p.imoxiu.com/e5e90f67f879d213aa5eb46dcc1d95f1669ecb59/200_200')),
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadiusDirectional.circular(40))),
        width: double.maxFinite,
        height: 200,
      );

五、通过Card的shape属性，唯一值的注意的地方就是borderRadius看准了，不要用错了，要不然没效果。

Center(
        child: Container(
          height: 200,
          width: 200,
          child: Card(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadiusDirectional.circular(50)),
            clipBehavior: Clip.antiAlias,
            child: Image.network(
              "https://n4p.imoxiu.com/e5e90f67f879d213aa5eb46dcc1d95f1669ecb59/200_200",
              width: double.maxFinite,
            ),
          ),
        ),
      );