歡迎光臨
每天分享高質量文章

零Flutter基礎,四天搞定Flutter玩Android客戶端攻略

作者:有女票的程式狗

連結:https://www.jianshu.com/p/e8d49e7a0554

 

身為android開發者,在這幾天深深感到flutter容易上手的特性,尤其是dart,稍微瞭解下基本語法,就能直接寫,爽的一批~

廢話少說,先看成果

 

Day0 環境搭建

環境搭建很簡單,就是下個 Flutter SDK,然後設定設定環境變數什麼的就差不多了,我這裡是按照 Flutter 中文網教程搭建,沒遇到問題。

附上地址:

https://flutterchina.club/get-started/install/

Day1 dart語法學習 + Flutter基本開發瞭解

dart 基本語法學習,看這裡即可

https://book.flutterchina.club/chapter1/dart.html

有 Java 開發基礎,花半小時瞭解 dart 語言特型就能上手開發了。

Flutter 基礎開發需要瞭解的一些知識點

  • Widget 概念

  • 路由管理

  • 包取用

  • Widget 狀態更新

  • 網路請求 + 資料解析

  • 非同步操作

小 Tip: 阿裡某個團隊開源了一個『Flutter Go』專案,遇到不會的原生元件在上面直接搜名字即可看到使用方法,屬性說明什麼的,非常之方便!(開源萬歲)

專案地址:

https://github.com/alibaba/flutter-go

可以仔細做一下 Flutter 中文網的這個教程

https://flutterchina.club/get-started/codelab/ 

初步瞭解Flutter,做完這個教程,基本就可以上手開發我們的簡版『玩Android』客戶端了。

Day2 基本框架搭建

最外層用 Scaffold 包裹,Scaffold 直接支援底部導航欄這種佈局,我們只要實現 body 和 bottomNavigationBar 就可以。

頁面容器我們用 PageView 實現, 底部導航欄用 BottomNavigationBar 實現。

 

Scaffold(
    body: PageView(
      controller: _pageCtr,
      physics: NeverScrollableScrollPhysics(),
      children: [
        HomePage(),
        ProjectPracticePage(),
        WechatArticlePage(),
      ],
    ),
    bottomNavigationBar: BottomNavigationBar(
        currentIndex: _tabIndex,
        type: BottomNavigationBarType.fixed,
        fixedColor: Colors.deepPurpleAccent,
        onTap: (index) => _click(index),
        items: [
          BottomNavigationBarItem(
              title: Text('推薦'), icon: Icon(Icons.home)),
          BottomNavigationBarItem(
              title: Text('專案'), icon: Icon(Icons.map)),
          BottomNavigationBarItem(
              title: Text('公眾號'), icon: Icon(Icons.contact_mail)),
        ]),
  )

三個介面都是有狀態的,所以都繼承 StatefulWidget, 這樣就能簡單實現一個底部導航欄切換頁面的功能。

Day3 串列建立+網路資料獲取

文章和專案模組,用的都是頂部導航欄+串列的形式展示資訊

  • 頂部導航欄選擇flutter自帶的 TabBar

  • 串列還是選擇flutter自帶的 ListView

關於如何使用,Flutter Go 中一查便知

需要註意的是,由於切換到這個模組就需要網路請求,並且有資料後才開始繪製介面,所以我們這裡在構建Widget的時候需要 FutureBuilder,FutureBuilder使用方法可以在文末的專案中找到。

主要就是可以拿到資料回呼的狀態,然後根據這個狀態再構建相應的widght。

網路操作我選擇的是 Dio 2.0,由於剛出來不久,並且和1.0還是有些不同,網上大部分文章都是基於1.0的,所以建議直接看官方檔案學習,地址: 

https://github.com/flutterchina/dio#examples

我的專案中用單例封裝了一下網路請求操作,每個api請求封裝成一個方法,使用起來也很方便,具體在文末專案中可以找到。大概就是長這個樣子:

 

 

我先除錯的是網路請求,獲取到正確的資料後,測試 TabBar,頂部導航欄沒有問題,再建立ListView頁,條目的話就用隨便展示一個標題什麼的就可以。

Day4 跳WebView + ListView完善

為什麼我把 ListView 條目完善放到最後,因為我覺得在程式碼中寫檢視是在是太麻煩了,那麼多層,肯定是一個難啃的硬骨頭,結果上手之後發現,其實也就是看起來很麻煩,真正寫的時候,雖然不如android中XML檔案方便,但是確實有一種行雲流水的感覺QAQ。

好話說在前頭,寫起來雖然問題不大,但是真的不符合主流好嗎,寫完看的我頭大,隨便放張圖感受下:

 

後期維護成本也是問題,希望谷歌在這方面做一些改變,讓 Flutter 可以更好的發展下去。

在設計好一個檢視後,可以橫向縱向一層一層定義結構,行就用 Row,列就用 Colunm,使用方法就在 Flutter Go 上去查。在 Flutter 中,萬物皆為 Widght,可以在圖中看到,即使是一個邊距之類的,都會用一個 Widget 實現。

點選事件也是一個 Widght, 用 GestureDetector 實現。有兩個引數,一個是 onTap(), 也就是點選的回呼,一個是 child,也就是我們需要點選事件的 widght。

這個專案中,點選事件都是跳 WebView 頁,然後看下 WebView 頁怎麼建立。如果不需要狀態管理,那麼就可以正常建立一個介面,然後child用 WebviewScaffold 實現,即可實現 WebView 的功能。

總結

大佬都說大前端是趨勢,身為客戶端開發者,瞭解一些大前端開發技術絕對不虧,甚至真香哈哈。

貼了那麼多地址,最後也把這個專案的地址貼上來吧 :

https://github.com/chinahaozai/enjoy_android

已同步到看一看
贊(0)

分享創造快樂