Android ISO 都能運行的吃豆項目開發中 Flutter版本吃豆項目

最近公司項目開發已經到了尾聲,我這邊也計劃用Flutter重新寫一遍公司項目,作為公司新技術引入學習,這項目我計劃全部用Flutter自帶的小部件來開發,不用任何第三方項目,這樣做的目的是為了學習新技術,熟悉原汁原味的Flutter自帶小部件,當然這個項目也是我們公司所有前端小夥伴和技術開發人員都能來參與進來,也希望大家能夠積極參與進來一起學習新技術,為公司存儲新技術。

Android ISO 都能運行的吃豆項目開發中 Flutter版本吃豆項目

我公司前端現狀

作為一個北上廣回重慶家鄉發展的前端工程師,來分析一下我現在公司前端技術現狀,前端技術原本就是一個雜而亂、多而繁的技術。特別是二三線城市技術人員的技術參差不齊,而且技術態度也很凌亂,在這樣的一個大環境下想完全一下子改善是很難的,我們公司目前前端分佈情況也很緊張,面對業務也很繁瑣而多,技術也是想到哪兒用到哪兒,APP分為Android,IOS開發,有後臺WEB開發,同時配備了H5混合APP開發,而且還有小程序也是H5來分擔,在任務繁瑣的眼前,每個開發人員在積極完成交代的任務後,基本無過多時間來學習新的項目,每次的迭代都是為了完成工期而無任何架構代碼質量可言,作為公司有自己產品來講,對技術人員的要求還是很高的,不光是要完成任務,而且還要保證代碼質量,空閒還要進行代碼重構是非常重要的,如果直接下達重構代碼任務是很難進行的,代碼沒有任何BUG前讓開發人員動代碼是很有牴觸心理的,所以我的安排就是先從人員技術培訓開發,後續我這邊會安排更多的培訓來讓大家明白代碼質量對於一個有自己產品的公司來講是非常重要的。讓大家明白我們不是在完成任務,我們每一句代碼對產品以後能不能走的更遠是非常重要的。

Android ISO 都能運行的吃豆項目開發中 Flutter版本吃豆項目

接下來安排

最近大家也知道,我更新的頻率沒有以前多了,是因為我這邊最近事情有點多,公司這邊有一些人事變動,自己對2020年也做了一些規劃,但是我沒有忘記我還有一個頭條號,沒有忘記我還要上來更新文章,因為我還有一堆支持我的粉絲。

接下來我這邊會安排定期更新一些Flutter文章,都是原汁原味的Flutter原生API搭建的技術文章,[不忘初心,方得始終],做事情只有不忘記自己最初持守的信念,到最後就一定能獲得成功

Flutter版本的APP底部導航欄選擇

底部導航欄大家應該見過很多很多了,手機上的APP用這樣的導航方式已經很正常了,最開始也有過很多其他的嘗試方式,比如側滑欄來導航的,生命力最強的導航方式就是底部樣式是最久的了,直接打開Flutter官網API,可以很清楚的查看到有如下幾個API:

  1. CupertinoTabScaffold
  2. CupertinoTabView
  3. CupertinoTabBar
  4. BottomNavigationBar
Android ISO 都能運行的吃豆項目開發中 Flutter版本吃豆項目

這幾個導航小部件有什麼區別嗎?怎麼選擇了?

Flutter CupertinoTabScaffold 實現iOS應用程序的選項卡式的根佈局與結構。一個在底部放置標籤欄,標籤欄之間或後面放置內容的腳手架。

CupertinoTabView具有其自己的導航器狀態和歷史記錄的單個選項卡視圖。一個典型的選項卡視圖,用作CupertinoTabScaffold 中每個選項卡的內容,可以將多個具有並行導航狀態和歷史記錄的選項卡共存。

CupertinoTabBar iOS樣式的底部導航選項卡欄。使用BottomNavigationBarItem顯示多個選項卡,其中一個選項卡處於活動狀態,默認情況下第一個選項卡。

BottomNavigationBar顯示在應用程序底部的材質小部件,用於在少量視圖(通常在三到五個之間)中選擇。

看上面的介紹,其中有幾個是IOS樣式風格,然後就是Android樣式風格的導航樣式,一般作為底部導航選擇我們用的比較多的就是「BottomNavigationBar」這個部件了,底部導航一般在3到5個之間,所以我們選擇它再合適不過了。

BottomNavigationBar導航部件用法

底部導航欄通常與Scaffold結合使用,我們先看下 BottomNavigationBar 組件的構造函數:

Android ISO 都能運行的吃豆項目開發中 Flutter版本吃豆項目

BottomNavigationBar

  • items:這是一個 BottomNavigationBarItem 數組,@required 修飾符表明此參數是默認一定要傳的,而且至少2個。官方有建議底欄數目最好是3~5個。關於 BottomNavigationBarItem 組件下面還會說到。
  • onTap:導航欄的點擊事件,通過它來切換頁面
  • currentIndex:用來表明當前選中的是哪一個底部item
  • elevation:陰影高度
  • type:底部item類型,有兩種可選:fixed 自適應,shifting 選擇放大。如果未指定,則它會自動設置為 BottomNavigationBarType.fixed(當項目少於四個時),否則默認為 BottomNavigationBarType.shifting。
  • fixedColor:被選中 item 的 icon 和 label 顏色。這個屬性已經淘汰了,只是為了向後兼容留著的。更建議使用 selectedItemColor 屬性。
  • backgroundColor:底部導航欄顏色
  • iconSize:item圖標大小
  • selectedItemColor:功能同 fixedColor,兩者只能設定一個,建議選 selectedItemColor。
  • unselectedItemColor:未選中 item 的顏色
  • selectedIconTheme:選中 item 的 icon 樣式
  • unselectedIconTheme:未選中 item 的 icon 樣式
  • selectedFontSize:選中 item 的 label 字號
  • unselectedFontSize:未選中 item 的 label 字號。可以看到,默認選中和未選中兩者字號是不一樣的,切換的時候就會有動態變化。如果有需要保持一致,兩個屬性設置成一樣大就可以了
  • selectedLabelStyle:選中 item 的 label 樣式
  • unselectedLabelStyle:未選中 item 的 label 樣式
  • showSelectedLabels:是否要展示選中 item 的 label,默認是
  • showUnselectedLabels:是否要展示未選中 item 的 label
  • BottomNavigationBarItem構造函數如下

  • icon:導航欄item的圖標,一定要設置的
  • title:item的label,雖然沒有加@required 修飾符,但是也是一定要設置的,否則會報:Every item must have a non-null title
  • activeIcon:選中 item 的圖標
  • backgroundColor:底部導航欄的背景動畫的顏色。當導航欄的類型是 BottomNavigationBarType.shifting時,給 item 設置這個屬性會生效。

  • Android ISO 都能運行的吃豆項目開發中 Flutter版本吃豆項目

    完成效果圖:


    Android ISO 都能運行的吃豆項目開發中 Flutter版本吃豆項目

    總結:

    源碼就不拿出來了,雖然是公司新技術學習項目,但是整個圖標都是用的公司項目圖標,所有的網絡請求都是用的公司API。暫時分享到這裡。歡迎大家點贊,轉發,關注,評論。


    分享到:


    相關文章: