Compose第二弹 导航+多页面

目标：

1.Compose单Activity，多个页面怎么表示？

2.页面怎么进行路由和导航？

一、导航组件

我们可以定义一个导航组件NavView(可组合函数)

setContent {
                LlamaAndroidTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
//                    color = MaterialTheme.colorScheme.background
                ) {
                    NavView(this, viewModel)
                }
            }
        }

1.1 导航组件

自定义导航组件，Compose导航需要使用到rememberNavController()

@ExperimentalMaterial3Api
@Composable
fun NavView(activity:Activity, appViewModel: AppViewModel = viewModel()) {
    val navController = rememberNavController()
    // 创建路由定义
    NavHost(navController = navController, startDestination = "chat") {
        composable("model") { ModelChooseView(navController, appViewModel) }
        composable("chat") { ChatView(navController, appViewModel.chatState, activity) }
    }
}

1.1.1 路由定义NavHost

@Composable
public fun NavHost(
    navController: NavHostController,
    startDestination: String,
    modifier: Modifier = Modifier,
    route: String? = null,
    builder: NavGraphBuilder.() -> Unit
) {
    NavHost(
        navController,
        remember(route, startDestination, builder) {
            navController.createGraph(startDestination, route, builder)
        },
        modifier
    )
}

在NavHost中定义路由定义，

• 需要定义一个路由导航控制器，NavHostController
• 初始导航页面：startDestination，初始导航的目标页面
• builder路由表构建器，定义路由表的构建。

1.1.2 路由表

在路由表中，定义了两个页面路由：

@ExperimentalMaterial3Api
@Composable
fun NavView(activity:Activity, appViewModel: AppViewModel = viewModel()) {
    val navController = rememberNavController()
    // 创建路由定义
    NavHost(navController = navController, startDestination = "chat") {
        composable("model") { ModelChooseView(navController, appViewModel) }
        composable("chat") { ChatView(navController, appViewModel.chatState, activity) }
    }
}

model: 导航到页面ModelChooseView

chat: 导航到页面ChatView

1.1.3 路由跳转

通过路由控制器，导航到对应的页面，

返回上一页：

navController.popBackStack()

导航到目标页

navController.navigate("model")