Memo

メモ > 技術 > IDE: AndroidStudio > アプリの作成（Jetpack Compose / 一覧と詳細）
アプリの作成（Jetpack Compose / 一覧と詳細）

Jetpack Compose入門 アプリを作る知識-2(一覧から詳細への画面遷移~rememberNavControllerなど)
https://zenn.dev/ko2ic/articles/f00dbfd350d521@Composable
fun MainScreen(modifier: Modifier = Modifier) {
    val mocks = (1..100).map {
        Pair("リストのタイトル${it}", "これはリストのメッセージ${it}です。")
    }
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "ListScreen") {
        composable("ListScreen") {
            ListScreen(
                mocks,
                onNavigateToDetailScreen = { title, body -> navController.navigate("DetailScreen/$title/$body") }
            )
        }
        composable(
            "DetailScreen/{title}/{body}",
            arguments = listOf(
                navArgument("title") { type = NavType.StringType },
                navArgument("body") { type = NavType.StringType }
            )
        ) { backStackEntry ->
            val title = backStackEntry.arguments?.getString("title") ?: ""
            val body = backStackEntry.arguments?.getString("body") ?: ""
            DetailScreen(
                title,
                body,
                onNavigateToFirstScreen = { navController.navigateUp() }
            )
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun ListScreen(contents: List<Pair<String, String>>, onNavigateToDetailScreen: (String, String) -> Unit) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("リストのサンプル") }
            )
        }
    ) { innerPadding ->
        LazyColumn(
            modifier = Modifier
                .padding(innerPadding),
            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            items(contents.size) { index ->
                val content = contents[index]
                ListTitle(title = content.first, body = content.second)
                {
                    onNavigateToDetailScreen(content.first, content.second)
                }
            }
        }
    }
}

@Composable
private fun ListTitle(
    title: String,
    body: String,
    onClick: () -> Unit
) {
    Surface(
        modifier = Modifier.clickable { onClick() },
        shape = MaterialTheme.shapes.medium
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.padding(all = 4.dp)
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 16.dp, vertical = 8.dp),
            ) {
                Text(title)
                Spacer(modifier = Modifier.height(4.dp))
                Text(body)
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun DetailScreen(
    title: String,
    body: String,
    onNavigateToFirstScreen: () -> Unit
) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("詳細") },
                navigationIcon = {
                    IconButton(onClick = onNavigateToFirstScreen) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "戻る"
                        )
                    }
                }
            )
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding)
                .padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            Text("これは詳細画面です。")
            Text("タイトル: ${title}")
            Text("本文: ${body}")
        }
    }
}
Memo

Advertisement
