菜单导航栏

示例代码

@Composable
fun MenuPage1() {
    Kt_android_demoTheme {
        Scaffold { paddingValues ->
            Box(
                modifier = Modifier
                    .padding(paddingValues)
                    .fillMaxSize()
            ) {
                Text("Page1")
            }
        }
    }
}


@Composable
fun MenuPage2() {
    Kt_android_demoTheme {
        Scaffold { paddingValues ->
            Box(
                modifier = Modifier
                    .padding(paddingValues)
                    .fillMaxSize()
            ) {
                Text("Page2")
            }
        }
    }
}

class NavMainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()

        setContent {
            Kt_android_demoTheme {
                // 创建一个 NavController
                val navController = rememberNavController()

                // 使用 Scaffold 来构建界面
                Scaffold { paddingValues ->
                    Box(
                        modifier = Modifier
                            .padding(paddingValues)
                            .fillMaxSize()
                    ) {
                        // 定义导航图
                        NavHost(navController = navController, startDestination = "home") {

                            // 定义主页
                            composable("home") {
                                // 在主页显示两个按钮，点击按钮跳转到相应页面
                                Box(
                                    modifier = Modifier.fillMaxSize().padding(16.dp)
                                ) {
                                    Column(modifier = Modifier.fillMaxSize()) {
                                        Button(
                                            onClick = {
                                                // 点击第一个按钮跳转到 page1
                                                navController.navigate("page1")
                                            },
                                            modifier = Modifier.padding(8.dp)
                                        ) {
                                            Text("Go to Page 1")
                                        }

                                        Button(
                                            onClick = {
                                                // 点击第二个按钮跳转到 page2
                                                navController.navigate("page2")
                                            },
                                            modifier = Modifier.padding(8.dp)
                                        ) {
                                            Text("Go to Page 2")
                                        }
                                    }
                                }
                            }

                            // 定义 page1 页面
                            composable("page1") {
                                MenuPage1()  // 跳转到 page1 页面
                            }

                            // 定义 page2 页面
                            composable("page2") {
                                MenuPage2()  // 跳转到 page2 页面
                            }
                        }
                    }
                }
            }
        }
    }
}

解释

!info
这段代码使用 Jetpack Compose 来实现简单的页面导航功能。它展示了如何使用 NavController 和 NavHost 来管理页面之间的跳转，并且通过 Button 来实现页面的导航。以下是对这段代码的详细解释：

NavController

NavController 用于管理应用的导航操作。

NavHost

NavHost 是 Compose 提供的导航容器，它定义了整个导航图，并且指明从哪个页面开始（startDestination）。在这里，startDestination = "home" 表示应用启动时会首先显示 "home" 页面。

• 使用 单一的 NavHost 来管理所有页面的导航

跳转

每当你需要跳转到一个新的页面时，需要在 NavHost 中为该页面定义一个 composable，而不是随便跳转到一个页面。

每个页面的目标都通过 composable("pageName") 进行声明，然后通过 navController.navigate("pageName") 实现页面跳转。