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

AWeiLoveAndroid發表於2019-11-14
FlutterGo

版權宣告：本文首發在公眾號Flutter那些事，未經允許，嚴禁轉載。

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

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

騰訊視訊連結：Flutter輕鬆實現Adobe全家桶Logo列表功能

如果你喜歡去B站觀看本文配套的視訊講解，請點選Bilibili連結：

B站連結： Flutter輕鬆實現Adobe全家桶Logo列表功能

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

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,
      ),
    ),
  ),
),
複製程式碼

看看效果：

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

上邊緣和左右兩側沒有邊距，看起來不太直觀，給每一個Container外邊加一點邊距，修改後的程式碼如下：

Padding(
    padding: EdgeInsets.all(15),
    child: Container(...)
)
複製程式碼

效果如圖所示：

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

這裡面由於文字太多了，所以一行顯示不下了，可以把文字大小調小一點就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),
  ]
),
複製程式碼

我們可以看到程式碼明顯簡潔了許多，看看使用效果圖如何：

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

接下來填充具體的資料

部分程式碼如下所示：

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)
      ),
      ...
  ]
),
...
複製程式碼

截圖如下所示：

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

自定義圓角弧度

我們發現有的有圓角，有的是沒有圓角弧度的，所以這時候要對每一個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輕鬆打造Adobe全家桶Logo的功能已經實現了，是不是很簡單？作者辛苦了，麻煩點個贊吧，謝謝大家。

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

相關文章