版權(quán)聲明：本文為博主原創(chuàng)文章呐萨，未經(jīng)博主允許不得轉(zhuǎn)載泉瞻。
http://www.reibang.com/p/760906fc2879

轉(zhuǎn)載請(qǐng)標(biāo)明出處：
http://www.reibang.com/p/760906fc2879
本文出自 AWeiLoveAndroid的博客

本文首發(fā)在公眾號(hào)Flutter那些事，未經(jīng)允許五嫂，嚴(yán)禁轉(zhuǎn)載残腌。

本文配套代碼已經(jīng)傳到了github，歡迎朋友們給個(gè)star贫导，感謝大家，希望能在幫助大家的同時(shí)蟆盹，麻煩大家給個(gè)打賞買口水喝孩灯，謝謝大家。

開(kāi)源倉(cāng)庫(kù)地: https://github.com/AweiLoveAndroid/Flutter-learning/

Flutter系列博文鏈接 ↓：

工具安裝：

• Flutter從配置安裝到填坑指南詳解

Flutter基礎(chǔ)篇：

• 谷歌Flutter1.0正式版發(fā)布
• Flutter基礎(chǔ)篇（1）-- 跨平臺(tái)開(kāi)發(fā)框架和工具集錦
• Flutter基礎(chǔ)篇（2）-- 老司機(jī)用一篇博客帶你快速熟悉Dart語(yǔ)法
• Flutter基礎(chǔ)篇（3）-- Flutter基礎(chǔ)全面詳解
• Flutter基礎(chǔ)篇（4）-- Flutter填坑全面總結(jié)
• Flutter基礎(chǔ)篇（5）-- Flutter代碼模板逾滥，解放雙手峰档，提高開(kāi)發(fā)效率必備
• Flutter基礎(chǔ)篇（6）-- 水平和垂直布局詳解
• Flutter基礎(chǔ)篇（7）-- Flutter更新錯(cuò)誤全面解決方案(圖文+視頻講解)
• Flutter基礎(chǔ)篇（8）-- Flutter for Web詳細(xì)介紹
• Flutter基礎(chǔ)篇（9）-- 手把手教你用Flutter實(shí)現(xiàn)Web頁(yè)面編寫
• Flutter1.9升級(jí)體驗(yàn)總結(jié)（Flutter Web 1.9最新版本填坑指南）

Flutter進(jìn)階篇：

• Flutter進(jìn)階篇（1）-- 手把手帶你快速上手調(diào)試Flutter項(xiàng)目
• Flutter進(jìn)階篇（2）-- Flutter路由詳解
• Flutter進(jìn)階篇（3）-- Flutter 的手勢(shì)（GestureDetector）分析詳解
• Flutter進(jìn)階篇（4）-- Flutter的Future異步詳解
• Flutter進(jìn)階篇（5）-- 使用Flutter創(chuàng)建插件詳解并發(fā)布到Pub庫(kù)
• Flutter進(jìn)階篇（6）-- PageStorageKey败匹、PageStorageBucket和PageStorage使用詳解
• Flutter進(jìn)階篇（7）-- Flutter路由輕量級(jí)框架FRouter

Dart語(yǔ)法系列博文鏈接 ↓：

Dart語(yǔ)法基礎(chǔ)篇：

• Flutter基礎(chǔ)篇（2）-- 老司機(jī)用一篇博客帶你快速熟悉Dart語(yǔ)法(這是Dart語(yǔ)法系列的第一篇)
• Dart的語(yǔ)法詳解系列篇（二）-- 類與函數(shù)
• Dart的語(yǔ)法詳解系列篇（三）-- mixin入門
• Dart的語(yǔ)法詳解系列篇（四）-- 泛型、異步讥巡、庫(kù)等有關(guān)詳解
• Dart2.6正式版發(fā)布掀亩，支持編譯為native可執(zhí)行文件

Dart語(yǔ)法進(jìn)階篇：

• Dart語(yǔ)法進(jìn)階篇（一）-- Dart源碼的排序算法詳解

本文首發(fā)在公眾號(hào)Flutter那些事，未經(jīng)允許欢顷，嚴(yán)禁轉(zhuǎn)載槽棍。

Adobe公司的產(chǎn)品大家應(yīng)該都是很熟悉了，我們就看它的產(chǎn)品Logo抬驴，一看就可以記住好幾個(gè)炼七，比如：PS、Ai布持、Pr豌拙、Dw等。而且絕大多數(shù)Logo都是很一致的题暖，外面要么方正按傅，要么是帶圓弧的矩形，中間是兩個(gè)英文字母胧卤，第一個(gè)字母大寫唯绍，第二個(gè)字母小寫」嗦拢總之推捐，一看就可以讓人記住，真是具有的魔性Logo侧啼，不得不佩服Adobe公司設(shè)計(jì)Logo的團(tuán)隊(duì)的創(chuàng)意人才牛柒，今天我要給大家?guī)?lái)的是使用Flutter實(shí)現(xiàn)Adobe公司的Logo并讓它們同屏展出，全部用代碼實(shí)現(xiàn)痊乾，不借助任何外部工具皮壁，一次性帶領(lǐng)大家看看這些有趣的Logo。作者寫文章不容易哪审，覺(jué)得好看的話蛾魄，點(diǎn)個(gè)贊支持一下吧，謝謝大家湿滓。

本文內(nèi)容圖文并茂滴须，希望大家可以認(rèn)真看完。為了避免大家犯困叽奥，我這里特意準(zhǔn)備了本文配套的兩個(gè)視頻扔水，下面這個(gè)是騰訊視頻的播放鏈接：

騰訊視頻鏈接：Flutter輕松實(shí)現(xiàn)Adobe全家桶Logo列表功能

如果你喜歡去B站觀看本文配套的視頻講解，請(qǐng)點(diǎn)擊Bilibili鏈接：

B站鏈接： Flutter輕松實(shí)現(xiàn)Adobe全家桶Logo列表功能

按照國(guó)際慣例朝氓，先來(lái)一張效果圖鎮(zhèn)樓魔市。

Flutter打造Adobe全家桶Logo

怎么樣主届？是不是很牛逼！４隆君丁！下面開(kāi)始帶領(lǐng)大家直接擼碼：

本文配套源碼，你可以在我的github下載：https://github.com/AweiLoveAndroid/Flutter-learning

首先創(chuàng)建列表

首先我們創(chuàng)建一個(gè)GridView将宪，我們使用GridView.count绘闷，然后我們先用10個(gè)Container填充一下，也就說(shuō)每一個(gè)item都是Container涧偷，里面是一個(gè)居中的Text簸喂，Container的代碼如下：

 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,
      ),
    ),
  ),
),

看看效果：

上邊緣和左右兩側(cè)沒(méi)有邊距，看起來(lái)不太直觀燎潮，給每一個(gè)Container外邊加一點(diǎn)邊距喻鳄，修改后的代碼如下：

Padding(
    padding: EdgeInsets.all(15),
    child: Container(...)
)

效果如圖所示：

這里面由于文字太多了，所以一行顯示不下了确封，可以把文字大小調(diào)小一點(diǎn)就OK了（暫且不用管它）除呵，接下來(lái)我們看我們的Padding加上Container的代碼接近200行了，特別難看爪喘，不方便使用和管理颜曾，下面對(duì)它做一個(gè)封裝，具體操作請(qǐng)看后文描述秉剑。

封裝列表內(nèi)容

首先我們看泛豪，哪些是變化的，哪些是不變的侦鹏，方便我們傳參诡曙。 padding屬性是一致的，不用管它略水。 BoxDecoration里面的color屬性和 BoxDecoration的border屬性里的color屬性都是變化的价卤，需要外部傳入的。接下來(lái)就是Text的文字內(nèi)容渊涝，以及color都是需要外部傳入的慎璧。所以這四個(gè)屬性需要封裝一下。我這里封裝了一個(gè)函數(shù)跨释，我把Padding加上Container的那一段代碼拿過(guò)來(lái)了胸私，然后把里面要傳參的4個(gè)參數(shù)提取出來(lái)，作為函數(shù)的參數(shù)鳖谈，然后我們調(diào)用這個(gè)函數(shù)岁疼，傳入這4個(gè)參數(shù)返回是一個(gè)widget類型，這個(gè)要記住蚯姆。接下來(lái)看一下代碼：

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代碼對(duì)應(yīng)的修改部分五续，代碼如下所示：

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),
  ]
),

我們可以看到代碼明顯簡(jiǎn)潔了許多，看看使用效果圖如何：

接下來(lái)填充具體的數(shù)據(jù)

部分代碼如下所示：

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)
      ),
      ...
  ]
),
...

截圖如下所示：

自定義圓角弧度

我們發(fā)現(xiàn)有的有圓角龄恋，有的是沒(méi)有圓角弧度的疙驾，所以這時(shí)候要對(duì)每一個(gè)Item進(jìn)行個(gè)性化設(shè)置，圓角是在Container里面設(shè)置的郭毕，我么要對(duì)它進(jìn)行操作它碎，傳入一個(gè)bool類型的值(也就是showRectRadis參數(shù))進(jìn)去判斷即可，如果為true显押，那么就添加進(jìn)去扳肛，如果為false，就保持默認(rèn)的樣式就好了乘碑，由于它是可選的參數(shù)挖息，所以外面加一個(gè)大括號(hào)，同時(shí)這里面還用到“三目運(yùn)算符”（不清楚 三目運(yùn)算符 的可以看看我得博客Flutter基礎(chǔ)篇（2）-- 老司機(jī)用一篇博客帶你快速熟悉Dart語(yǔ)法）兽肤。下面看看代碼是如何封裝的：

  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里面的代碼也相應(yīng)的做一個(gè)調(diào)整套腹，如果要顯示圓角的，就加上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
      ),
      ...
  ]
),
...

我們來(lái)看看最終的效果，如下圖所示：

到此為止笤休，F(xiàn)lutter輕松打造Adobe全家桶Logo的功能已經(jīng)實(shí)現(xiàn)了尖飞，是不是很簡(jiǎn)單？作者辛苦了店雅，麻煩點(diǎn)個(gè)贊吧政基，謝謝大家。

關(guān)于作者：公眾號(hào)“Flutter那些事”底洗，獨(dú)家放送最新Flutter腋么、Dart和Fuchsia等技術(shù)動(dòng)態(tài)，以及眾多原創(chuàng)亥揖，有技術(shù)深度的技術(shù)干貨文章珊擂，還有Flutter實(shí)戰(zhàn)干貨文章，等你來(lái)看费变，喜歡Flutter和跨平臺(tái)開(kāi)發(fā)以及原生移動(dòng)端開(kāi)發(fā)的朋友們摧扇，趕緊來(lái)看看，歡迎大家關(guān)注挚歧。