Android中Shape功能在Flutter中的实现

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

Android中使用shape可以很方便的构建资源文件以实现圆角，描边，填充以及渐变效果。那么在Flutter中这些效果应该如何实现呢？本文将介绍Flutter中如何实现这些效果：

• 圆角
• 描边
• 填充
• 渐变
• 阴影

Flutter给控件设置背景或者前景时使用Container控件，它本身只是对其他容器类组件的组合并不提供具体的配置属性，而实现shape相关功能的实现是在decoration（装饰）这个属性中来设置。

圆角（shape用corners实现）

child: Container(
  width: 100,
  height: 100,
  alignment: Alignment.center,
  child: Text('Button'),
  decoration: BoxDecoration(
      borderRadius: BorderRadiusDirectional.circular(10),
      color: Colors.blue),
),
复制代码

这段代码实现了给文字设置一个圆角为10的背景，其中起到和shape中cornes标签功能一致的是BoxDecoration对象中borderRadius的值。BorderRadiusDirectional的构造方法BorderRadiusDirectional.only可以分别给四个角设置radius，这里就不多赘述。下面是设置圆角的效果。

描边（shape用stroke实现）

在Android中stroke属性是用来描会资源文件边的，能够设置边的宽度，颜色以及线的类型，那么接下来给大家展示一下Flutter中是如何实现这个功的：

child: Container(
  width: 100,
  height: 100,
  alignment: Alignment.center,
  child: Text('Button'),
  decoration: BoxDecoration(
      border: BorderDirectional(
        top: BorderSide(
            color: Colors.orange,
            width: 5,
            style: BorderStyle.solid),
      ),
      color: Colors.blue),
)
复制代码

Flutter中实现shape中stroke的功能，是通过BoxDecoration的border属性来完成的。border的值BorderDirectional可以设置四边的填充状态包括颜色，宽度以及线是否填充。下面是描边效果：

填充（shape用solid实现）

Flutter中对于box的填充只需要设置BoxDecoration的color属性即可：

渐变（shape用gradient实现）

在Android的shape中可以实现linear（线性渐变）、radial（放射性渐变）、sweep（扫描式渐变）三种渐变样式，在Flutter中对应三个渐变类的子类。

接下来我们看看他们怎么实现，以及效果如何：

LinearGradient

Container(
  width: 100,
  height: 100,
  alignment: Alignment.center,
  child: Text('Button'),
  decoration: BoxDecoration(
      gradient: LinearGradient(
          colors: [Colors.orange, Colors.greenAccent]),
      color: Colors.blue),
),
复制代码

这里有点需要注意，当设置渐变色时设置的填充色就会失效。

SweepGradient

代码就不贴了只是把LinearGradient替换即可。

RadialGradient

和SweepGradient一样，直接上效果图：

阴影

Andorid中实现阴影主要使用的方式包括.9图和layer-list，Flutter中则主要依靠BoxShadow类，下面我们来实现看看：

Container(
  width: 100,
  height: 100,
  alignment: Alignment.center,
  child: Text('Button'),
  decoration: BoxDecoration(boxShadow: [
    BoxShadow(
        color: Colors.greenAccent,
        offset: Offset(5, 5),
        blurRadius: 10)
  ], color: Colors.blue),
)
复制代码

BoxShadow的属性非常好理解，color：阴影的颜色，offset：阴影的偏移量有dx和dy，以及阴影的圆角等。

以上就是Flutter中简要的实现shape所能完成的功能，对于decoration是如何绘制和渲染的后续会做继续深入的研究，感谢阅读。