App 架構
程式碼範例 – 基本用法
build.gradle.kt (Module level: app)
...
dependencies {
...
implementation("androidx.navigation:navigation-compose:2.9.0")
}
AuthScreens.kt
這個檔案放了我們會用到的 3 個 Screen
@Composable
fun IntroScreen(
onLoginClick: () -> Unit,
onRegisterClick: () -> Unit,
) {
Column(
modifier = Modifier.padding(50.dp),
) {
Text(text = "Intro Screen")
Button(
onClick = onLoginClick
) {
Text(text = "Login")
}
Button(
onClick = onRegisterClick
) {
Text(text = "Register")
}
}
}
@Composable
fun RegisterScreen() {
Column(
modifier = Modifier.padding(50.dp)
) {
Text(text = "Register Screen")
}
}
@Composable
fun LoginScreen() {
Column(
modifier = Modifier.padding(50.dp)
) {
Text(text = "Login Screen")
}
}MainActivity.kt
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
NavigationLab1Theme {
val navController = rememberNavController()
NavHost(
navController = navController,
startDestination = "intro",
modifier = Modifier
) {
composable(route="intro") {
IntroScreen(
onLoginClick = {
navController.navigate("login")
},
onRegisterClick = {
navController.navigate("register")
}
)
}
composable(route="register") {
RegisterScreen()
}
composable(route="login") {
LoginScreen()
}
}
}
}
}
}程式碼範例 – 重構：將 NavGraph 萃取出來
我們將以上三個 Screen 歸類為 auth 功能，然後建立一個 authGraph，讓整個程式碼更為簡單易懂。
MainActivity
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
NavigationLab1Theme {
val navController = rememberNavController()
NavHost(
navController = navController,
startDestination = "intro",
modifier = Modifier
) {
authGraph(navController)
}
}
}
}
}
fun NavGraphBuilder.authGraph(
navController: NavHostController
) {
composable(route="intro") {
IntroScreen(
onLoginClick = {
navController.navigate("login")
},
onRegisterClick = {
navController.navigate("register")
}
)
}
composable(route="register") {
RegisterScreen()
}
composable(route="login") {
LoginScreen()
}
}
Comments