Flutter轻松实现Adobe全家桶Logo列表

版权声明：本文首发在公众号Flutter那些事，未经容许，严禁转载。html

Adobe公司的产品你们应该都是很熟悉了，咱们就看它的产品Logo，一看就能够记住好几个，好比：PS、Ai、Pr、Dw等。并且绝大多数Logo都是很一致的，外面要么方正，要么是带圆弧的矩形，中间是两个英文字母，第一个字母大写，第二个字母小写。总之，一看就可让人记住，真是具备的魔性Logo，不得不佩服Adobe公司设计Logo的团队的创意人才，今天我要给你们带来的是使用Flutter实现Adobe公司的Logo并让它们同屏展出，所有用代码实现，不借助任何外部工具，一次性带领你们看看这些有趣的Logo。做者写文章不容易，以为好看的话，点个赞支持一下吧，谢谢你们。git

本文内容图文并茂，但愿你们能够认真看完。为了不你们犯困，我这里特地准备了本文配套的两个视频，下面这个是腾讯视频的播放连接：github

腾讯视频连接：Flutter轻松实现Adobe全家桶Logo列表功能bash

若是你喜欢去B站观看本文配套的视频讲解，请点击Bilibili连接：markdown

B站连接： Flutter轻松实现Adobe全家桶Logo列表功能ide

按照国际惯例，先来一张效果图镇楼。函数

怎么样？是否是很牛逼！！！下面开始带领你们直接撸码：工具

本文配套源码，你能够在个人github下载：github.com/AweiLoveAnd…oop

首先建立列表

首先咱们建立一个GridView，咱们使用GridView.count，而后咱们先用10个Container填充一下，也就说每个item都是Container，里面是一个居中的Text，Container的代码以下：ui

Container(
  decoration: BoxDecoration(
    color: Colors.grey,
    border: Border.all(color: Colors.blue, width: 5),
  ),
  child: Center(
    child: Text(
      'No.1',
      style: TextStyle(
        fontSize: 35.0,
        color: Colors.blue,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
),
复制代码

看看效果：

上边缘和左右两侧没有边距，看起来不太直观，给每个Container外边加一点边距，修改后的代码以下：

Padding(
    padding: EdgeInsets.all(15),
    child: Container(...)
)
复制代码

效果如图所示：

这里面因为文字太多了，因此一行显示不下了，能够把文字大小调小一点就OK了（暂且不用管它），接下来咱们看咱们的Padding加上Container的代码接近200行了，特别难看，不方便使用和管理，下面对它作一个封装，具体操做请看后文描述。

封装列表内容

首先咱们看，哪些是变化的，哪些是不变的，方便咱们传参。 padding属性是一致的，不用管它。 BoxDecoration里面的color属性和 BoxDecoration的border属性里的color属性都是变化的，须要外部传入的。接下来就是Text的文字内容，以及color都是须要外部传入的。因此这四个属性须要封装一下。我这里封装了一个函数，我把Padding加上Container的那一段代码拿过来了，而后把里面要传参的4个参数提取出来，做为函数的参数，而后咱们调用这个函数，传入这4个参数返回是一个widget类型，这个要记住。接下来看一下代码：

Widget buildItems(
      String text, Color textColor, Color borderColor, Color bgColor) {
    return Padding(
      padding: EdgeInsets.all(15),
      child: Container(
        decoration: BoxDecoration(
          color: bgColor,
          border: Border.all(color: borderColor, width: 5),
        ),
        child: Center(
          child: Text(
            text,
            style: TextStyle(
              fontSize: 35.0,
              color: textColor,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
复制代码

下面看看GridView代码对应的修改部分，代码以下所示：

GridView.count(
  crossAxisCount: 4,
  crossAxisSpacing: 5.0,
  mainAxisSpacing: 5.0,
  children: [
      buildItems('1', Colors.blue, Colors.blue, Colors.grey),
      buildItems('2', Colors.blue, Colors.blue, Colors.grey),
      buildItems('3', Colors.blue, Colors.blue, Colors.grey),
      buildItems('4', Colors.blue, Colors.blue, Colors.grey),
      buildItems('5', Colors.blue, Colors.blue, Colors.grey),
      buildItems('6', Colors.blue, Colors.blue, Colors.grey),
      buildItems('6', Colors.blue, Colors.blue, Colors.grey),
      buildItems('7', Colors.blue, Colors.blue, Colors.grey),
      buildItems('8', Colors.blue, Colors.blue, Colors.grey),
      buildItems('9', Colors.blue, Colors.blue, Colors.grey),
      buildItems('10', Colors.blue, Colors.blue, Colors.grey),
  ]
),
复制代码

咱们能够看到代码明显简洁了许多，看看使用效果图如何：

接下来填充具体的数据

部分代码以下所示：

GridView.count(
  crossAxisCount: 4,
  crossAxisSpacing: 5.0,
  mainAxisSpacing: 5.0,
  children: [
      buildItems('Ps',
        const Color(0XFF00C8FD),
        const Color(0XFF00C8FD),
        const Color(0XFF001C25)
      ),
      buildItems('Ai',
        const Color(0XFFFF7C00),
        const Color(0XFFFF7C00),
        const Color(0XFF271403)
      ),
      buildItems('Id',
        const Color(0XFFDA007A),
        const Color(0XFFDA007A),
        const Color(0XFF412E34)
      ),
      buildItems('Xd',
        const Color(0XFFFE2BC0),
        const Color(0XFFFE2BC0),
        const Color(0XFF2D001D)
      ),
      ...
  ]
),
...
复制代码

截图以下所示：

自定义圆角弧度

咱们发现有的有圆角，有的是没有圆角弧度的，因此这时候要对每个Item进行个性化设置，圆角是在Container里面设置的，我么要对它进行操做，传入一个bool类型的值(也就是showRectRadis参数)进去判断便可，若是为true，那么就添加进去，若是为false，就保持默认的样式就行了，因为它是可选的参数，因此外面加一个大括号，同时这里面还用到“三目运算符”（不清楚 三目运算符 的能够看看我得博客Flutter基础篇（2）-- 老司机用一篇博客带你快速熟悉Dart语法）。下面看看代码是如何封装的：

Widget buildItems(
      String text, Color textColor, Color borderColor, Color bgColor,
      {bool showRectRadis = false}) {
    return Padding(
      padding: EdgeInsets.all(15),
      child: Container(
        decoration: BoxDecoration(
          color: bgColor,
          border: Border.all(color: borderColor, width: 5),
          borderRadius: showRectRadis == true
              ? BorderRadius.circular(15)
              : BorderRadius.circular(0),
        ),
        child: Center(
          child: Text(
            text,
            style: TextStyle(
              fontSize: 35.0,
              color: textColor,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
复制代码

而后咱们要把children里面的代码也相应的作一个调整，若是要显示圆角的，就加上showRectRadis: true这句，其余的保持不变，修改后的部分代码以下所示：

GridView.count(
  crossAxisCount: 4,
  crossAxisSpacing: 5.0,
  mainAxisSpacing: 5.0,
  children: [
      buildItems('Ps',
        const Color(0XFF00C8FD),
        const Color(0XFF00C8FD),
        const Color(0XFF001C25),
        showRectRadis: true
      ),
      buildItems('Ai',
        const Color(0XFFFF7C00),
        const Color(0XFFFF7C00),
        const Color(0XFF271403)
      ),
      buildItems('Id',
        const Color(0XFFDA007A),
        const Color(0XFFDA007A),
        const Color(0XFF412E34)
      ),
      buildItems('Xd',
        const Color(0XFFFE2BC0),
        const Color(0XFFFE2BC0),
        const Color(0XFF2D001D),
        showRectRadis: true
      ),
      ...
  ]
),
...
复制代码

咱们来看看最终的效果，以下图所示：

到此为止，Flutter轻松打造Adobe全家桶Logo的功能已经实现了，是否是很简单？做者辛苦了，麻烦点个赞吧，谢谢你们。

关于做者：公众号“Flutter那些事”，独家放送最新Flutter、Dart和Fuchsia等技术动态，以及众多原创，有技术深度的技术干货文章，还有Flutter实战干货文章，等你来看，喜欢Flutter和跨平台开发以及原生移动端开发的朋友们，赶忙来看看，欢迎你们关注。