iT邦幫忙

2022 iThome 鐵人賽

DAY 8
0
自我挑戰組

30 天初探 Flutter系列 第 13

Day 13 - 頁面跳轉不可能這麼單純吧

  • 分享至 

  • xImage
  •  

當專案越來越大時,APP 的頁面也會越來越多、越來越複雜,這時候使用上一篇的方式可能會不易管理,因此我們可以使用「命名路由」來統一管理。

方法為在 root 組件中,加入 routes 來管理,而每個頁面我們可以自己命名,如我將菜單中義大利麵頁面命名為 /pasta

routes: <String, WidgetBuilder> {
"/pasta": (BuildContext context) => PastaPage(),
},

這後我們原本寫的

Navigator.push(context, MaterialPageRoute(builder: (context) => PastaPage()));

改為下面的寫法 (很好分辨,有命名的路由就使用 pushNamed)

Navigator.pushNamed(context, "/pasta");

另外在方法上,應該還會看到 pushReplacementNamedpopAndPushNamed 等等非常多,這可以適用在不同的情境,下方舉兩個一開始可能就會常碰到的情境:

[ menu , pasta , burger ] ⇒ [ menu, burger ]

比如說如果我們菜單有漢堡選單可以直接從 pasta 頁面再點擊到其他餐點頁面如 burger,但當我從 pasta 直接點擊進入到 burger 頁面,可是我返回時不想退回到 burger 頁面,這時候就可以使用 pushReplacementNamed() / popAndPushNamed() / pushReplacement()(對,都可以!)。

[ login, menu, pasta, logout ] ⇒ [ login ]

很多 APP 是有會員機制,需要登入的,那假設 user 點擊了登出,此時不能使用單純的 push 回到登入頁面,而是應該要登出 user 後,清除所有的跳轉頁面紀錄,回到登入頁面,此時可以使用 pushNamedAndRemoveUntil() / pushAndRemoveUntil()

未來實際開發時一定還會有更多複雜的路由情境,先有概念,一樣等到遇到時再利用這個印象去查找方法,會快速很多!

OK!我們明天見~


上一篇
Day 12 - APP 不可能只有一頁吧
下一篇
Day 14 - 產生列表並呈現在 APP 上
系列文
30 天初探 Flutter14
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言