日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

JetpackCompose?Navigation導航實現流程_Android

作者：知奕奕 ? 更新時間： 2023-02-12 編程語言

Navigation 快速上手

下面案例簡要展示使用 Compose 版本的 Navigation 庫來實現兩個頁面之間的跳轉

這是完整的結構（忽略掉紅線劃過的那個包）

編寫欲跳轉的兩個頁面

編寫 Demo1 頁面

子頁面使用多個 composable 組件相組合的方法一一裝配起來

Demo1main 渲染整個頁面，他接受一個 NavController 對象，用于操縱導航相關的方法

可以注意到 Button 里面的點擊事件還沒寫，后續我們寫好路由后再回來編寫跳轉邏輯

@Composable
fun Demo1main(navController: NavController) {
    body(navController)
}
@Composable
private fun body(navController: NavController) {
    Column(
        modifier = Modifier
            .fillMaxSize()
    ) {
        Button(onClick = {
            // 跳轉邏輯
        }) {
            Text(
                text = "前往demo2",
                modifier = Modifier.fillMaxWidth(),
                textAlign = TextAlign.Center
            )
        }
    }
}

編寫 Demo2 頁面

依葫蘆畫瓢

@Composable
fun Demo2main(navController: NavController) {
    body(navController)
}
@Composable
private fun body(navController: NavController) {
    Column(
        modifier = Modifier
            .fillMaxSize()
    ) {
        Button(onClick = {
            // 這里也寫跳轉邏輯！
        }) {
            Text(
                text = "前往demo1",
                modifier = Modifier.fillMaxWidth(),
                textAlign = TextAlign.Center
            )
        }
    }
}

路由表配置

編寫單例類 RouteConfig 用來存儲路由名稱（等同于 vue-router 中我們設置的 path）

后續為便于理解，統稱為 path

object RouteConfig {
    // 主頁面
    const val ROUTE_MAIN = "main"
    // 兩個跳轉頁面
    const val ROUTE_DEMO1 = "demo1"
    const val ROUTE_DEMO2 = "demo2"
}

總路由

創建文件 MainNav 并在里面實現路由導航的總邏輯

由于我們剛剛入門，路由表可以很簡單，按照以下結構即可

  • rememberNavController 存儲所有 navcontroller 狀態
  • NavHost 一個容器，便于內部頁面的切換，在里面注冊所有頁面
@Composable
fun AppNav() {
    // 存儲navigation狀態
    val navController = rememberNavController()
    // navhost容器
    // startDestination表示起始頁的path，這里我們指定demo1作為起始頁
    NavHost(navController = navController, startDestination = RouteConfig.ROUTE_DEMO1) {
        // 依次傳入path并注冊三個頁面
        composable(RouteConfig.ROUTE_MAIN) {
            MainActivity()
        }
        composable(RouteConfig.ROUTE_DEMO1) {
            Demo1main(navController)
        }
        composable(RouteConfig.ROUTE_DEMO2) {
            Demo2main(navController)
        }
    }
}

主頁面調用總路由

對于 kotlin 而言，非常簡單，直接調用定義好的總路由方法即可

因為總路由默認起始頁為 demo1，故渲染 mainactivity 后就會立即載入 demo1 頁面！

class MainActivity() : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DemoComposeTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    // 一鍵調用，方便快捷
                    AppNav()
                }
            }
        }
    }
}

跳轉邏輯完善

嘿！還記得我們之前置空的按鈕跳轉邏輯嗎？

我們已經配置完了所有路由，為此，僅需將以下代碼添加到按鈕點擊事件即可跳轉到指定頁面了！

// 寫于demo1頁面，點擊按鈕后跳轉到demo2頁面
navController.navigate(RouteConfig.ROUTE_DEMO2)

為便于大家理解，現給出 demo1.kt 目前的完整代碼

@Composable
fun Demo1main(navController: NavController) {
    body(navController)
}
@Composable
private fun body(navController: NavController) {
    Column(
        modifier = Modifier
            .fillMaxSize()
    ) {
        Button(onClick = {
            navController.navigate(RouteConfig.ROUTE_DEMO2)
        }) {
            Text(
                text = "前往demo2",
                modifier = Modifier.fillMaxWidth(),
                textAlign = TextAlign.Center
            )
        }
    }
}

demo2 的跳轉邏輯只需要修改對應的 path 即可

目前僅學到了最簡單的 navigate 跳轉，后續還有帶參跳轉，請關注進階版本！

原文鏈接：https://blog.csdn.net/delete_you/article/details/128068772

欄目分類
最近更新