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

版權聲明：本文首發在公衆號Flutter那些事，未經容許，嚴禁轉載。

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

本文內容圖文並茂，但願你們能夠認真看完。爲了不你們犯困，我這裏特地準備了本文配套的兩個視頻，下面這個是騰訊視頻的播放連接：

騰訊視頻連接：Flutter輕鬆實現Adobe全家桶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
      ),
      ...
  ]
),
...
複製代碼

咱們來看看最終的效果，以下圖所示：

---

到此爲止，Flutter輕鬆打造Adobe全家桶Logo的功能已經實現了，是否是很簡單？做者辛苦了，麻煩點個贊吧，謝謝你們。

關於做者：公衆號「Flutter那些事」，獨家放送最新Flutter、Dart和Fuchsia等技術動態，以及衆多原創，有技術深度的技術乾貨文章，還有Flutter實戰乾貨文章，等你來看，喜歡Flutter和跨平臺開發以及原生移動端開發的朋友們，趕忙來看看，歡迎你們關注。