Flutter 入门与实战：仿一个微信价值几个亿的页面

网传微信支付页面的第三方链接一个格子需要广告费1一个亿，微信支付页非常适合做功能导航，本篇使用 ListView和 GridView 模仿了微信支付的页面，同时介绍了如何装饰一个组件的背景和边缘样式。

左侧是微信支付的界面， 右侧是开发完成后的效果，图标是从 iconfont 上下载的。首先介绍一下本篇涉及到的组件。

带装饰效果的 Container

实际过程中我们经常会遇到一个容器需要额外的样式，例如圆角，背景色等。在 Flutter 中，对于各种容器都有一个 decoration 的属性，可以用于装饰容器。典型的用法有设置背景色、圆角、边框和阴影等，其中背景色可以使用渐变色。decoration 是一个 Decoration 对象，最常用的是 BoxDecoration，BoxDecoration 的属性如下所示：

const BoxDecoration({
    this.color,
    this.image,
    this.border,
    this.borderRadius,
    this.boxShadow,
    this.gradient,
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,
  }) 

其中color为使用颜色填充容器，image 为 使用图片作为背景，border 为边框，borderRadius 为边框圆角，boxShadow 为容器阴影，gradient 使用渐变色作为背景，backgroundBlendMode 是指与容器的混合模型，默认是覆盖，shape 是背景形状，默认是矩形。其中背景部分我们一般只会选择一种。这里以上面的绿色圆弧背景为例，还加上了一点点渐变（渐变色支持多个，可以根据需要调节），示例代码如下：

return Container(
      //......
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(4.0),
        gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color(0xFF56AF6D),
              Color(0xFF56AA6D),
            ]),
      ),
  		//...
    );
<