Google 又搞事情了，Flutter 1.0.0 來了。

頭條的代碼格式化真是醉了，截圖處理吧。

嚐鮮，官方 Demo

這個請看官方教程，注意科學上網，否則你可能會掛在路上。

1. Xcode(iOS 必須)
2. Android Studio(Android 了)

開發工具，本人前端，固選擇了 VS Code，有很好用的插件。

Mac 相關可能遇到的問題：

• HomeBrew 源處理
• Xcode 賬號處理

源（終端）：

# 替換現有上游
cd "$(brew --repo)"
git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git
cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-core.git
brew update
# 使用homebrew-science或者homebrew-python
cd "$(brew --repo)/Library/Taps/homebrew/homebrew-science"
git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-science.git
cd "$(brew --repo)/Library/Taps/homebrew/homebrew-python"
git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-python.git
brew update
 

Xcode 如果是第一次用，記得打開示例 Demo 的 ios 文件夾，按下面步驟處理：

下面按照官方教程一步一步走即可（不適合純小白，切記），最終的 Demo 就是個列表加收藏夾的玩意兒。

缺失

這個 Demo 很好玩，但是實際上來說，功能還是缺失嚴重，比如異步，請求等（人家就是演示 Demo 嘛）。

所以我又弄了個基本沒有 UI 優化的小 Demo，做個簡單的天氣預報演示。為什麼幾乎沒有 UI 優化，因為我也是 Demo 嘛。

天氣預報

起初我也想著，恩，要不要弄點背景圖、動畫效果、插圖等，後來因為懶，算了，就列表到詳情，然後回來吧。

主要補充兩大塊知識點：

1. 異步 http 請求
2. 路由傳參與回調

異步 http 大家都知道，注意下寫法即可：

簡單說明一下，async 與 await，如果是前端小夥伴，應該是比較熟悉的，沒見過的同學，你就知道 async 聲明瞭一個異步函數，在這個異步函數里面才可以使用 await 標記，await 就是字面意思，等後面的事情走完了，繼續執行。

上面 url 請自行替換天氣或其他的相關 get url。

這裡有個 widget.title，稍後會說到，這個是有上個頁面路由過來時候傳參。

setState，React 很像的感覺，不過裡面是個匿名函數，不是 React 那種對象。

_data 就是私有變量了，在 setState 裡面操作私有變量會映射到視圖上，這裡就是把請求的天氣預報數據放到相關字段上面展示了。

然後說說傳參與回調：

靜態路由不玩傳參，我們用的動態路由。

首先，這個 Widget 得是 stateful 的，stateless 的貌似不能獲取 context，如有錯誤請糾正。

然後，push 就是常規的壓棧操作，壓如新的視圖（Widget）到棧頂，注意，Dart 2.0 開始可以省略實例化的 new 關鍵詞。這裡的 return Detail(title: _city) 就是 return new Detail(title: _city)。

那很明白了，那個 title: _city 就是傳參了。獲取方式上面代碼已經有了。

再然後就是回調，額，簡單理解就是在棧頂（或相對的子級頁面）頁面返回或顯式調用 Navigator.pop() 時候觸發的事件，就是下面的 then 了。有前端 Promise 基礎的一看就懂，不瞭解的，當做標準使用就行（自己補課去）。

實例與核心代碼：

注意，中間返回時帶參數的回調，上面默認是不帶參數的。代碼針對有參數做得處理。

main.dart

home.dart

detail.dart

結合官網 Demo 和這裡補充的東西，基本可以實現很多 APP 常見的需求了，當然還有組件通信等等，等我用到再補充，當下這個 Demo 還算夠用。

整理一下：

1. main 入口函數
2. import 包
3. stateless 與 stateful 的 Widget
4. 路由傳參回調
5. 異步 http

如果你都學會了，那麼真的可以做個小 APP 玩玩了，百看不如上手，相信自己吧。

項目源碼地址：GitHub 搜 ZweiZhao/flutter_weather 即可。

閱讀更多 前端紳士 的文章

關鍵字: 嚐鮮 Origin 編程語言