Android 用Jektpack Compose 來開發app【03】 - Compose導航篇
2024, May 27
前言
- 這是這個系列的第三篇
因爲有機會開發整個專案全用Compose來完成的經驗
所以經過一番摸索後
有些心得
決定把這個過程寫成筆記分享給大家
初期建置
- 使用的library如下：
Function
Lib
build
gradle.kts + toml
api
okhttp + retrofit2
navigation
navigation-compose
design
material 3
di
hilt
ui
jetpack compose
json
kotlinx.serialization
db
room
實作Navigation for Compose
- 這邊預計使用一個Main activity去導航、跳轉到其他畫面
所以今天我們要來實作 Compose中的NavHost
step1. 建立各個畫面的enum
- 首先先定義一個enum
裡面會放你預期會需要導航的內容
後續也能隨需求增加而慢慢擴充
step2. 定義Compose Screen
- 針對你需要的畫面去實作，例如：
step3. 建立每個畫面的router
- 因為我們到時候要用到NavGraphBuilder
所以透過擴充NavGraphBuilder來指定每個畫面的router
像這邊就是把剛剛定義好的Login當作是他router的一個參考指標
然後為了導航到LoginScreen畫面所以在後面lambda裡面加入該畫面
step4. 註冊每個畫面
- 接著把你所有要導航的畫面加入到
NavHost內
startDestination:是你的開始畫面
navController:用來指定跳轉的控制器
跳轉畫面只要用navController去控制即可
如：navController.navigate(ElegantAccessScreen.Feedback.name)
step5. 達成一個activity多screen
- 最終你要新增畫面的時候
只要不斷實作Screen即可
實際使用：