Jetpack Compose 탐색 생성 및 인수 제출

여러분, 안녕하세요. 저는 톨가 카글라얀입니다. 오늘은 Jetpack Compose Navigation으로 작업하는 방법을 예시로 보여드리겠습니다. Jetpack Compose는 새로운 기술입니다. 때때로 우리는 특정 물건을 사용하는 방법에 대한 정보를 찾는 데 어려움을 겪습니다. 그래서 내비게이션 사용법에 대한 글을 쓸 필요성을 느꼈습니다.

그럼 시작하겠습니다.

샘플 응용 프로그램: https://github.com/togisoft/JetpackNavigationExample
  • 먼저 생성한 Jetpack Compose 프로젝트에 내비게이션 패키지를 추가합니다.


  • 그런 다음 폴더와 파일을 만듭니다.


  • State Folder의 Screen.kt에서 경로에 대해 봉인된 클래스를 생성합니다.

  • sealed class Screen(val route: String) {
        object HomeScreen : Screen(route ="home")
        object DetailScreen : Screen(route = "detail")
    
        // To send multiple arguments
        fun withArgs(vararg args: String): String {
            return buildString {
                append(route)
                args.forEach { arg ->
                    append("/$arg")
                }
            }
        }
    }
    


  • HomeScreen용 코드를 생성합니다.

  • @Composable
    fun HomeScreen(navController: NavController) {
        var name by remember { mutableStateOf("") }
        var surname by remember { mutableStateOf("") }
        val context = LocalContext.current
    
        Scaffold(
            topBar = {
                TopAppBar(title = { Text(text = "Home Screen") })
            }
        ) {
            Box(modifier = Modifier.fillMaxSize()) {
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(16.dp),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    OutlinedTextField(
                        value = name,
                        label = { Text(text = "Name") },
                        onValueChange = { name = it },
                        modifier = Modifier.padding(vertical = 16.dp)
                    )
                    OutlinedTextField(
                        value = surname,
                        label = { Text(text = "Surname") },
                        onValueChange = { surname = it },
                        modifier = Modifier.padding(vertical = 16.dp)
                    )
                    Button(onClick = {
                       // Check if textfields are null
                        if (name.isNotEmpty()) {  
    //With route arguments for Detail Screen.                  navController.navigate(Screen.DetailScreen.withArgs(name, surname))
                        } else {
                            Toast.makeText(context, "Fill in the required fields.", Toast.LENGTH_SHORT)
                                .show()
                        }
                    }) {
                        Text(text = "Send Detail Screen")
                    }
                }
            }
        }
    }
    


  • DetailScreen에 대한 코드를 생성합니다.

  • @Composable
    fun DetailScreen(name: String?, surname: String?, navController: NavController) {
    
        Scaffold(
            topBar = {
                TopAppBar(title = { Text(text = "Detail Screen") }, navigationIcon = {
                    IconButton(
                        onClick = {
                            navController.popBackStack()
                        }) {
                        Icon(imageVector = Icons.Rounded.ArrowBack, contentDescription = "posStackBack")
                    }
                })
            }
        ) {
            Box(modifier = Modifier.fillMaxSize()) {
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(16.dp),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Text(text = "Hello $name $surname", fontWeight = FontWeight.Bold)
                }
            }
        }
    }
    


  • 이제 내비게이션을 만듭니다.

  • @Composable
    fun Navigation() {
        val navController = rememberNavController()
        NavHost(navController = navController, startDestination = Screen.HomeScreen.route) {
            composable(route = Screen.HomeScreen.route) {
                HomeScreen(navController = navController)
            }
            composable(route = Screen.DetailScreen.route + "/{name}/{surname}",
                arguments = listOf(
                    navArgument("name") {
                        type = NavType.StringType
                        nullable = false
                    },
                    navArgument("surname") {
                        type = NavType.StringType
                        nullable = false
                    }
                )
            ) { entry ->
                DetailScreen(
                    name = entry.arguments?.getString("name"),
                    surname = entry.arguments?.getString("surname"),
                    navController = navController
                )
            }
        }
    }
    


  • MainActivity 파일을 편집하고 프로그램을 실행합니다.

  • class MainActivity : ComponentActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContent {
                DevToTheme {
                    Navigation()
                }
            }
        }
    }
    


    *** 최종**

    좋은 웹페이지 즐겨찾기