iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
0
Mobile Development

用 Flutter 開發一個 Android App 吧系列 第 9

用 Flutter 開發一個 Android App 吧 - Day 9. 個人頁面(續)

  • 分享至 

  • xImage
  •  

本系列同步發表在 個人部落格,歡迎大家關注~

個人頁面(Profile Page) - 續

我們接續昨天的部份,接下來要完成個人頁面的下半部。

首先,第一個 Tab 就是倉庫頁(RepoPage),是不是有種似曾相似的感覺?

沒錯,記得在 Day 5 時有創建一個 RepoPage 給主頁面使用嗎?
在這裡可以直接拿來複用,我就不客氣拿來用吧~

day9-1.gif

痾...
果然,一切不會想像中的順利阿...
RepoPage 裡向下滑動(捲動),上面的 AppBar 竟然不會縮起來...

感性: 怎麼會這樣!?難道我寫錯了什麼嗎~~~ /images/emoticon/emoticon04.gif
理性: 沒事,遇到問題根本就是工程師日常麻~ 平常心拉 /images/emoticon/emoticon30.gif
感性: 那要怎麼解決呢? 揪命阿~~ /images/emoticon/emoticon02.gif
理性: 別緊張,聰明的你一定知道,請教 Google 大神吧~ /images/emoticon/emoticon01.gif
(腦內[腦補]小劇場)

沒錯找 Google,一下就找到 StackOverflow - how to implement a sliverAppBar with a tabBar,裡頭有一個關鍵的 Widget: NestedScrollView

一起讀一下 NestedScrollView 文件吧~

在捲動畫面(視圖)中裡面可以包含不只一個捲動畫面(視圖),且他們都需要知道目前捲動到的位置。

最常見的情況就是捲動畫面裡 SliverAppBar 中頂部包含一個 TabBar ,以及在 body 中使用 TabBarView (這樣作可基於 tab 來改變需捲動的內容)

...
(翻譯自 https://api.flutter.dev/flutter/widgets/NestedScrollView-class.html)

哇靠~ 才讀到第二段落,這不就是我們遇到的問題嗎?
原來, Flutter Team 早就知道會有這個問題拉~

立馬來改一下程式~

day9-2.jpeg

稍作講解

首先,在 NestedScrollView 中有一個 headerSliverBuilder 屬性,將原先的 SliverAppBar 透過這個 Builder 來建造。
接下來, NestedScrollView.body 的部份就可以放 TabBarView 拉~

是不是完全感覺就是給這個頁面設計的阿~ /images/emoticon/emoticon12.gif

小提醒:

  • 在這邊稍微調整了一下昨天 SliverAppBarTabBar 的位置,改放在 SliverAppBar.bottom 這屬性下面,為了是要往下滑動(捲動)時,TabBar 仍然能被操作。
  • 另外也調整 ProfileInfo 的位置,詳細可以看 Commit。

--

修改後成果

day9-3.gif

其他的 Tab,Star 項目頁面暫用 RepoPage 代替(之後接 Github API 會再重構 RepoPage);而 Follower 與 Following 頁面都使用 FollowPage

--

目前個人頁面 GIF

day9-4.gif

點選 GIF 可直接看 Commit

欸!? 休息一下

沒錯! 休息是為了走更長遠的路~

今天到這邊本人的精神也差不多耗弱了~ XD
沒想到會遇到些小插曲,不過也意外的有收穫呢~

有什麼建議或錯誤,歡迎大家留言~~
那麼明天再接再厲囉~~ 在下告辭~~ /images/emoticon/emoticon29.gif


上一篇
用 Flutter 開發一個 Android App 吧 - Day 8. 再修 Bug、個人頁面
下一篇
用 Flutter 開發一個 Android App 吧 - Day 10. 趨勢頁面
系列文
用 Flutter 開發一個 Android App 吧30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言