flutter-设置圆角和边框

前言

平时开发中，对UI设置圆角和边框，那是非常常用的操作，例如：设置一个圆角边，设置一个圆形头像，设置下划线等

设置圆角

flutter 中设置圆角常用的有两种方式(设置图片圆形背景不算)：

ClipRRect： 通过 ClipRRect 剪裁 widget，来实现圆角功能，也能将范围内子视图剪裁，因此，带子视图的圆角操作非常常用，一般作为备用手段

decoration： 通过 Container的 decoration 属性设置圆角，此操作，只能设置 Container视图的圆角信息，无法直接切割子视图信息，适合纯背景设置圆角，或者纯图片设置圆角推荐，如果层层包围的可以考虑ClipRRect 来使用

CircleAvatar： 看名字就知道，圆形头像，可以直接通过里面的children、backgroundImage、backgroundColor等参数设置圆形图像时力推

ClipRRect 的设置圆角代码，如下所示

ClipRRect(
  borderRadius: BorderRadius.circular(4),
  child: Image.asset(
    widget.subImageUrl!,
    width: 20,
    height: 20,
    fit: BoxFit.fitWidth,
  )
)

decoration的设置圆角如下所示(设置了就不能使用Container的color)

//顺便提一下，设置圆角边框，可以使用Container的decoration功能
Container(
  width: 20,
  height: 20,
  //设置了 decoration 就不能设置color，两者只能存在一个
  decoration: BoxDecoration(
    color: Colors.red, //设置背景颜色
    image: DecorationImage(image: AssetImage('images/WechatIMG21002.jpeg')), //设置图片
    image: DecorationImage(image: NetworkImage("http://12312.png")), //设置网络图片
    borderRadius:const BorderRadius.all(Radius.circular(6))
  )
)

CircleAvatar的设置圆角如下所示，直接图片或者颜色

//这里设置了背景图片，可以使用其他的纯色
CircleAvatar(
    backgroundImage: NetworkImage(item.imgUrl)
),

设置边框

相信看到了上面 decoration 就能联想到边框的设置，就是在 decoration中设置

decoration 中有多个属性，包括 Color、image、border、borderRadius 等

color: 设置背景，代替了 Container中的color，这也解决了 Container中不能设置 Color 的问题

border: 设置边框，通过该属性，使用Border类可以设置各个边的线条颜色、宽度、风格,即 color、width、style

borderRadius: 同理，通过该属性，使用BorderRadius的only，参数设置各个角的弧度(实际为px)等，也可以通过上面的 all设置所有角落一样

//顺便提一下，设置圆角边框，可以使用Container的decoration功能
Container(
  width: 20,
  height: 20,
  //设置了 decoration 就不能设置color，两者只能存在一个
  decoration: BoxDecoration(
      border: Border(left: BorderSide(width: 1, color: Colors.red)),
      borderRadius: BorderRadius.only(topLeft: Radius.circular(2))
  )
)

虚线边框在系统中没看到，可以使用 dotted_border，简单粗暴