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


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

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

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

效果图

通过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"),
            ),

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


文章作者: 姜康
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 姜康 !
评论
 上一篇
Dart基础语法 Dart基础语法
重要的概念 任何你可以放在一个变量中的都是一个object,并且每个object都是一个class的实例,甚至于数字,functions,null都是对象,所有的对象继承自Object类。 即使Dart是强类型的,但是类型说明是可选的,因为
2020-05-08
下一篇 
Flutter深色模式 Flutter深色模式
这些年,移动端UI的深色模式还是比较常见你的,IOS在系统级别已经率先支持了,Flutter作为一款优秀的跨端UI框架,在处理深色模式上是比较简单的。 BrightnessFlutter中有一个Brightness的概念,用来表示主题和
2020-05-08
  目录