Jetpack Compose Navigation
1data class Todo(val id: UUID, val text: String)
2
3class MainActivity : ComponentActivity() {
4 override fun onCreate(savedInstanceState: Bundle?) {
5 super.onCreate(savedInstanceState)
6 enableEdgeToEdge()
7 setContent {
8 TodoAppTheme {
9 Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
10 TodoListScreen(modifier = Modifier.padding(innerPadding))
11 }
12 }
13 }
14 }
15}
16
17@Composable
18fun TodoListScreen(modifier: Modifier = Modifier) {
19 val todos = listOf(
20 Todo(UUID.randomUUID(), "Todo #1"),
21 Todo(UUID.randomUUID(), "Todo #2"),
22 Todo(UUID.randomUUID(), "Todo #3"),
23 )
24 Column(modifier = modifier) {
25 Text(text = "Text List")
26 todos.map {
27 TodoListItem(todo = it)
28 }
29 Button(onClick = { }) {
30 Text(text = "Create")
31 }
32 }
33}
34
35@Composable
36fun TodoListItem(todo: Todo) {
37 Text(text = todo.text, modifier = Modifier.clickable { })
38}
39
40@Composable
41fun TodoDetailScreen(
42 modifier: Modifier = Modifier
43) {
44 Column(modifier = modifier) {
45 Text(text = "Text Detail")
46 OutlinedTextField(value = "Text #1", onValueChange = { })
47 Button(onClick = { }) {
48 Text(text = "Save")
49 }
50 }
51}1[versions]
2[...]
3navigationCompose = "2.9.6"
4
5[libraries]
6[...]
7androidx-navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigationCompose" }
8
9[...]1[...]
2
3dependencies {
4 [...]
5 implementation(libs.androidx.navigation.compose)
6 [...]
7} 1data class Todo(val id: UUID, val text: String)
2
3class MainActivity : ComponentActivity() {
4 override fun onCreate(savedInstanceState: Bundle?) {
5 super.onCreate(savedInstanceState)
6 enableEdgeToEdge()
7 setContent {
8 TodoAppTheme {
9 Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
10 TodoNavHost(modifier = Modifier.padding(innerPadding))
11 }
12 }
13 }
14 }
15}
16
17@Composable
18fun TodoNavHost(modifier: Modifier = Modifier) {
19 val navController = rememberNavController()
20 return NavHost(
21 navController = navController,
22 startDestination = "todo-list"
23 ) {
24 composable(route = "todo-list") {
25 TodoListScreen(
26 onCreate = { navController.navigate(route = "todo-detail/new") },
27 onUpdate = { id -> navController.navigate(route = "todo-detail/$id")},
28 modifier = modifier
29 )
30 }
31 composable(route = "todo-detail/{id}") {
32 TodoDetailScreen(
33 navigateBack = { navController.popBackStack() },
34 modifier = modifier
35 )
36 }
37 }
38}
39
40@Composable
41fun TodoListScreen(
42 onCreate: () -> Unit,
43 onUpdate: (id: UUID) -> Unit,
44 modifier: Modifier = Modifier
45) {
46 val todos = listOf(
47 Todo(UUID.randomUUID(), "Todo #1"),
48 Todo(UUID.randomUUID(), "Todo #2"),
49 Todo(UUID.randomUUID(), "Todo #3"),
50 )
51 Column(modifier = modifier) {
52 Text(text = "Text List")
53 todos.map {
54 TodoListItem(todo = it, onUpdate = onUpdate)
55 }
56 Button(onClick = onCreate) {
57 Text(text = "Create")
58 }
59 }
60}
61
62@Composable
63fun TodoListItem(
64 todo: Todo,
65 onUpdate: (id: UUID) -> Unit
66) {
67 Text(text = todo.text, modifier = Modifier.clickable() { onUpdate(todo.id) })
68}
69
70@Composable
71fun TodoDetailScreen(
72 navigateBack: () -> Unit,
73 modifier: Modifier = Modifier
74) {
75 Column(modifier = modifier) {
76 Text(text = "Text Detail")
77 OutlinedTextField(value = "Text #1", onValueChange = { })
78 Button(onClick = navigateBack) {
79 Text(text = "Save")
80 }
81 }
82}Tutorials