Flutter輕鬆實現Adobe全家桶Logo列表

• 2019 年 11 月 15 日
• 筆記

版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://www.jianshu.com/p/760906fc2879

轉載請標明出處： https://www.jianshu.com/p/760906fc2879 本文出自 AWeiLoveAndroid的部落格

Flutter系列博文鏈接 ↓：

工具安裝：

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

Flutter基礎篇：

• GoogleFlutter1.0正式版發布
• Flutter基礎篇（1）– 跨平台開發框架和工具集錦
• Flutter基礎篇（2）– 老司機用一篇部落格帶你快速熟悉Dart語法
• Flutter基礎篇（3）– Flutter基礎全面詳解
• Flutter基礎篇（4）– Flutter填坑全面總結
• Flutter基礎篇（5）– Flutter程式碼模板，解放雙手，提高開發效率必備
• Flutter基礎篇（6）– 水平和垂直布局詳解
• Flutter基礎篇（7）– Flutter更新錯誤全面解決方案(圖文+影片講解)
• Flutter基礎篇（8）– Flutter for Web詳細介紹
• Flutter基礎篇（9）– 手把手教你用Flutter實現Web頁面編寫
• Flutter1.9升級體驗總結（Flutter Web 1.9最新版本填坑指南）

Flutter進階篇：

• Flutter進階篇（1）– 手把手帶你快速上手調試Flutter項目
• Flutter進階篇（2）– Flutter路由詳解
• Flutter進階篇（3）– Flutter 的手勢（GestureDetector）分析詳解
• Flutter進階篇（4）– Flutter的Future非同步詳解
• Flutter進階篇（5）– 使用Flutter創建插件詳解並發布到Pub庫
• Flutter進階篇（6）– PageStorageKey、PageStorageBucket和PageStorage使用詳解
• Flutter進階篇（7）– Flutter路由輕量級框架FRouter

Dart語法系列博文鏈接 ↓：

Dart語法基礎篇：

• Flutter基礎篇（2）– 老司機用一篇部落格帶你快速熟悉Dart語法(這是Dart語法系列的第一篇)
• Dart的語法詳解系列篇（二）– 類與函數
• Dart的語法詳解系列篇（三）– mixin入門
• Dart的語法詳解系列篇（四）– 泛型、非同步、庫等有關詳解
• Dart2.6正式版發布，支援編譯為native可執行文件

Dart語法進階篇：

• Dart語法進階篇（一）– Dart源碼的排序演算法詳解

Adobe公司的產品大家應該都是很熟悉了，我們就看它的產品Logo，一看就可以記住好幾個，比如：PS、Ai、Pr、Dw等。而且絕大多數Logo都是很一致的，外面要麼方正，要麼是帶圓弧的矩形，中間是兩個英文字母，第一個字母大寫，第二個字母小寫。總之，一看就可以讓人記住，真是具有的魔性Logo，不得不佩服Adobe公司設計Logo的團隊的創意人才，今天我要給大家帶來的是使用Flutter實現Adobe公司的Logo並讓它們同屏展出，全部用程式碼實現，不藉助任何外部工具，一次性帶領大家看看這些有趣的Logo。作者寫文章不容易，覺得好看的話，點個贊支援一下吧，謝謝大家。

本文內容圖文並茂，希望大家可以認真看完。為了避免大家犯困，我這裡特意準備了本文配套的兩個影片，下面這個是騰訊影片的播放鏈接：

騰訊影片鏈接

如果你喜歡去B站觀看本文配套的影片講解，請點擊Bilibili鏈接：

B站鏈接

按照國際慣例，先來一張效果圖鎮樓。

Flutter打造Adobe全家桶Logo

怎麼樣？是不是很牛逼！！！下面開始帶領大家直接擼碼：

首先創建列表

首先我們創建一個GridView，我們使用GridView.count，然後我們先用10個Container填充一下，也就說每一個item都是Container，裡面是一個居中的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,        ),      ),    ),  ),

看看效果：

上邊緣和左右兩側沒有邊距，看起來不太直觀，給每一個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        ),        ...    ]  ),  ...

我們來看看最終的效果，如下圖所示：