Flutter-实现图片圆角的几种方式

2019年9月7日 273次阅读 来源: jiangkang

关注
https://github.com/jiangkang/flutter-system 了解更多Flutter相关的知识

图片圆角在开发中还是非常常见的，用Flutter实现圆角还是非常简单的，目前了解的大概有下面这几种：

  • 通过Card的shape属性
  • 通过Container的decoration
  • 直接使用ClipRRect

效果图

《Flutter-实现图片圆角的几种方式》

通过Card的shape属性

Card(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadiusDirectional.circular(20)),
            clipBehavior: Clip.antiAlias,
            child: Image.asset(
              "images/landscape0.jpeg",
              width: double.maxFinite,
            ),
          )

唯一值的注意的地方就是borderRadius看准了，不要用错了，要不然没效果。

通过Container的decoration

Container(
          decoration: ShapeDecoration(
              image: DecorationImage(
                  image: AssetImage("images/landscape1.jpeg"),
                  fit: BoxFit.fitWidth),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadiusDirectional.circular(20))),
          width: double.maxFinite,
          height: 300,
          child: Align(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                "Container decoration实现圆角(radius = 20)",
                style: TextStyle(color: Colors.white),
              ),
            ),
            alignment: Alignment.bottomCenter,
          ),
        )

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

直接使用ClipRRect

ClipRRect(
              borderRadius: BorderRadius.circular(20),
              child: Image.asset("images/landscape2.jpeg"),
            ),

这种方式是最简单的，直接使用即可。

    原文作者：jiangkang
    原文地址: https://segmentfault.com/a/1190000019909822
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞