{"id":2609,"date":"2025-11-03T13:46:40","date_gmt":"2025-11-03T04:46:40","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=2609"},"modified":"2025-11-04T08:05:08","modified_gmt":"2025-11-03T23:05:08","slug":"composeexample2-lazycolumn","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/11\/03\/composeexample2-lazycolumn\/","title":{"rendered":"[Compose]Example2-LazyColumn"},"content":{"rendered":"\n<p>\ud83d\udc49\ud83c\udffb \uc544\ub798\ub294 \ub808\uc774\uc9c0\uceec\ub7fc\uc548\uc5d0 \ubc84\ud2bc \ud074\ub9ad\uc2dc \ud1a0\uc2a4\ud2b8 \uba54\uc138\uc9c0\ub97c \uc2e4\ud589\ud558\ub294 \ucf54\ub4dc \uc785\ub2c8\ub2e4.<br>Below is the code that executes a toast message when a button is clicked in the lazy column.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \ub808\uc774\uc9c0\uceec\ub7fc\uc740 xml\ubc29\uc2dd\uc5d0\uc11c \ub9ac\uc0ac\uc774\ud074\ub7ec\ubdf0 \ube44\uc2b7\ud55c \uc5ed\ud560\uc785\ub2c8\ub2e4.<br>LazyColumn plays a similar role to RecyclerView in XML style method.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \ud1a0\uc2a4\ud2b8\uba54\uc138\uc9c0\ub294 xml\ubc29\uc2dd\uacfc compose\ubc29\uc2dd\uc740 \uc0ac\uc6a9\ubc29\ubc95, \ub514\uc790\uc778,\uae30\ub2a5\uc774 \ub2e4\ub985\ub2c8\ub2e4.<br>Toast messages in XML and Compose  have different usage methods, designs, and functions.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \ucf5c\ubc31\ud568\uc218 : \ud30c\ub77c\uba54\ud130\ub85c \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4.<br>Callback function: This means using a function as a parameter.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \ub808\uc774\uc9c0\uceec\ub7fc\uc5d0\uc11c \ubc84\ud2bc\uc744 \uc815\ub82c\ud558\ub824\uba74 box\uc544\uc774\ud15c\uc73c\ub85c \uac10\uc2f8\uc57c\ud569\ub2c8\ub2e4.(\uc18d\uc131\uc774 \uc5c6\uc74c)<br>To align buttons in a lazy column, you need to wrap them in a box item (the attribute does not exist).<\/p>\n\n\n\n<p><strong>1.\ucf54\ub4dc\/Code<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>package com.freelifemakers.lazycolumnexample\n\nimport android.os.Bundle\nimport android.widget.Toast\nimport androidx.activity.ComponentActivity\nimport androidx.activity.compose.setContent\nimport androidx.activity.enableEdgeToEdge\nimport androidx.compose.foundation.background\nimport androidx.compose.foundation.layout.Arrangement\nimport androidx.compose.foundation.layout.Box\nimport androidx.compose.foundation.layout.PaddingValues\nimport androidx.compose.foundation.layout.fillMaxSize\nimport androidx.compose.foundation.layout.fillMaxWidth\nimport androidx.compose.foundation.layout.padding\nimport androidx.compose.foundation.lazy.LazyColumn\nimport androidx.compose.material3.Button\nimport androidx.compose.material3.Scaffold\nimport androidx.compose.material3.SnackbarDuration\nimport androidx.compose.material3.SnackbarHost\nimport androidx.compose.material3.SnackbarHostState\nimport androidx.compose.material3.Text\nimport androidx.compose.runtime.Composable\nimport androidx.compose.runtime.remember\nimport androidx.compose.runtime.rememberCoroutineScope\nimport androidx.compose.ui.Alignment\nimport androidx.compose.ui.Modifier\nimport androidx.compose.ui.graphics.Color\nimport androidx.compose.ui.platform.LocalContext\nimport androidx.compose.ui.text.style.TextAlign\nimport androidx.compose.ui.tooling.preview.Preview\nimport androidx.compose.ui.unit.dp\nimport com.freelifemakers.lazycolumnexample.ui.theme.LazyColumnExampleTheme\nimport kotlinx.coroutines.launch\n\/*\n*\n* LazyColumn\uc5d0\uc11c \uc544\uc774\ud15c \uc804\uccb4\uc815\ub82c,\uac1c\ubcc4\uc815\ub82c\n* - \uc804\uccb4\uc815\ub82c : horizontalAlignment = Alignment.CenterHorizontally \uc0ac\uc6a9\n* - \uac1c\ubcc4\uc815\ub82c : \ud14d\uc2a4\ud2b8\ub294 \uc790\uccb4 \uc18d\uc131 \uc0ac\uc6a9,\ubc84\ud2bc\uc740 box\ub85c \uac10\uc2f8\uace0 \uac00\uc6b4\ub370 \uc815\ub82c\n* \ubc84\ud2bc \ud074\ub9ad\uc2dc \ud1a0\uc2a4\ud2b8\uba54\uc138\uc9c0 \ub744\uc6b0\uae30(2\uac00\uc9c0 \ubc29\uc2dd)\n*\n* *\/\nclass MainActivity : ComponentActivity() {\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        enableEdgeToEdge()\n        setContent {\n            LazyColumnExampleTheme {\n                \/\/ \ud1a0\uc2a4\ud2b8\uba54\uc138\uc9c02: SnackBar \uc0c1\ud0dc\uc640 Scope\ub97c \ucd5c\uc0c1\uc704\uc5d0\uc11c \uc0dd\uc131\n                val snackbarHostState = remember { SnackbarHostState() }\n                val scope = rememberCoroutineScope()\n\n                Scaffold(modifier = Modifier.fillMaxSize(),\n\n                    \/\/ \ud1a0\uc2a4\ud2b8\uba54\uc138\uc9c02:!!! \ucd5c\uc0c1\uc704 Scaffold\uc5d0 SnackBarHost\ub97c \uc5f0\uacb0 !!!\n                    snackbarHost = {\n                        SnackbarHost(hostState = snackbarHostState)\n                    }\n\n                    ) { innerPadding -&gt;\n\n\n                LazyColumn(\n                    modifier = Modifier\n                        .background(color = Color.LightGray)\n                        .fillMaxWidth()\n                        .padding(innerPadding),\n\n                    \/\/ \uc544\uc774\ud15c \uc804\uccb4\ub97c \uac00\uc6b4\ub370 \uc815\ub82c\ud560 \uacbd\uc6b0 \uc774 \uc18d\uc131\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4.\n                    \/\/ Add this property if you want to center all items.\n                    \/\/horizontalAlignment = Alignment.CenterHorizontally\n\n                    contentPadding = PaddingValues(16.dp), \/\/\n                    verticalArrangement = Arrangement.spacedBy(8.dp)\n                ) {\n                    item{\n                        Text(\n                            text = \"LazyColum Text\",\n                            \/\/ \uc544\uc774\ud15c \uc804\uccb4 \ub108\ube44\ub97c \ucc28\uc9c0\ud558\uac8c \ud568 \/ Make the item take up the entire width\n                            modifier = Modifier.fillMaxWidth(),\n                            \/\/ \uac00\uc6b4\ub370 \uc815\ub82c \/ center aligned\n                            textAlign = TextAlign.Center\n                        )\n                    }\n                    item{\n                        \/\/ LazyColumn\ub0b4\uc5d0\uc11c \ubc84\ud2bc\uc744 \uac00\uc6b4\ub370 \uc815\ub82c\ud558\ub824\uba74 \ubc15\uc2a4\uc548\uc5d0 \ub123\uc5b4\uc11c \uc815\ub82c\n                        \/\/ To center the button within the LazyColumn, place it in a box and align it.\n                        Box(\n                            \/\/ Box\uac00 \uc544\uc774\ud15c \ub108\ube44 \uc804\uccb4\ub97c \ucc28\uc9c0\ud558\uac8c \ud568.\n                            \/\/ Make the box take up the entire width of the item.\n                            modifier = Modifier.fillMaxWidth(),\n\n                            \/\/ \ubc15\uc2a4\ub0b4 \ucee8\ud150\uce20 \uc911\uc559\uc815\ub82c.\n                            \/\/ Center the content within the box.\n                            contentAlignment = Alignment.Center\n                        ) {\n                            \/\/ Snackbar XML style\n                            SnackbarButton1(msg = \"\ud1a0\uc2a4\ud2b8 \uba54\uc138\uc9c01\/Toast Message1\", btnText = \"\ud074\ub9ad\ud558\uc138\uc6941\/Please Click1\")\n                        }\n                    }\n                    item{\n                        \/\/ Snackbar compose\ubc29\uc2dd \/ Snackbar compose style\n                        \/\/ SnackbarButton2\ub97c \ud638\ucd9c\uc2dc SnackBar \ub85c\uc9c1\uc744 \ucf5c\ubc31\uc73c\ub85c \uc804\ub2ec\n                        \/\/ When calling SnackbarButton2, pass the SnackBar logic as a callback.\n                        SnackbarButton2(\n                            msg = \"\uc2a4\ub0b5\ubc14 \uba54\uc138\uc9c0\/Snackbar Message\",\n                            btnText = \"\uc2a4\ub0b5\ubc14 \ub744\uc6b0\uae30\/Show SnackBar\",\n                            acLabel = \"\ub2eb\uae30\/Close\",\n                            onButtonClick = {\n                                \/\/ \ubc84\ud2bc \ud074\ub9ad \uc2dc, MainAcitivity\uc758 Scope\uc640 State\ub97c \uc0ac\uc6a9\ud558\uc5ec SnackBar \uc2e4\ud589\n                                scope.launch {\n                                    snackbarHostState.showSnackbar(\n                                        message = \"\uc2a4\ub0b5\ubc14 \uba54\uc138\uc9c0\/Snackbar Message\",\n                                        actionLabel = \"\ub2eb\uae30\/Close\",\n                                        duration = SnackbarDuration.Short\n                                    )\n                                }\n                            }\n                        )\n                    }\n                    items(100){\n                        index -&gt;\n                        Text(\" text : $index\")\n                    }\n                    item{\n                        Text(\"--End--\")\n                    }\n                }\n\n\n\/\/                    Greeting(\n\/\/                        name = \"Android\",\n\/\/                        modifier = Modifier.padding(innerPadding)\n\/\/                    )\n\n\n                }\n            }\n        }\n    }\n}\n\n@Composable\nfun SnackbarButton1(modifier: Modifier = Modifier,msg:String,btnText:String){\n\n    \/\/ \ucee8\ud14d\uc2a4\ud2b8 \uac00\uc838\uc624\uae30\n    val context = LocalContext.current\n    \/\/Text(\"ButtonEvent\")\n\n    \/\/ Button \ucef4\ud3ec\uc800\ube14 \ucd94\uac00\n    Button(onClick ={\n        println(\"$msg\")\n        Toast.makeText(context,\"$msg\",Toast.LENGTH_LONG).show()\n    },\n        modifier = modifier\n\n    ) {\n        \/\/ \ubc84\ud2bc \ub0b4\ubd80\uc5d0 \ud45c\uc2dc\ud560 \ub0b4\uc6a9 \uc815\uc758\n        Text(\"$btnText\")\n    }\n}\n\n@Composable\nfun SnackbarButton2(\n    modifier: Modifier = Modifier,\n    msg: String,\n    btnText: String,\n    acLabel: String,\n    onButtonClick: () -&gt; Unit \/\/ \ud074\ub9ad \uc774\ubca4\ud2b8\ub97c \ucc98\ub9ac\ud560 \ucf5c\ubc31 \ud568\uc218 \ucd94\uac00 \/ Add Callback function to handle click events\n) {\n    \n    Button(\n        onClick = onButtonClick, \/\/ \ucf5c\ubc31 \ud568\uc218 \uc2e4\ud589 \/ Run callback function\n        modifier = Modifier.fillMaxWidth()\n    ) {\n        Text(btnText)\n    }\n}\n\/\/@Composable\n\/\/fun Greeting(name: String, modifier: Modifier = Modifier) {\n\/\/    Text(\n\/\/        text = \"Hello $name!\",\n\/\/        modifier = modifier\n\/\/    )\n\/\/}\n\n@Preview(showBackground = true)\n@Composable\nfun GreetingPreview() {\n    LazyColumnExampleTheme {\n        \/\/Greeting(\"Android\")\n    }\n}<\/code><\/pre>\n\n\n\n<p><strong>2.\uc2a4\ud06c\ub9b0\uc0f7\/Screen Shot<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"446\" height=\"974\" data-id=\"2611\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-lazycolumn-1.png\" alt=\"\" class=\"wp-image-2611\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-lazycolumn-1.png 446w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-lazycolumn-1-137x300.png 137w\" sizes=\"auto, (max-width: 446px) 100vw, 446px\" \/><figcaption class=\"wp-element-caption\">XML Snackbar<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"428\" height=\"958\" data-id=\"2613\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-lazycolumn-2.png\" alt=\"\" class=\"wp-image-2613\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-lazycolumn-2.png 428w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-lazycolumn-2-134x300.png 134w\" sizes=\"auto, (max-width: 428px) 100vw, 428px\" \/><figcaption class=\"wp-element-caption\">Compose Snackbar<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"444\" height=\"974\" data-id=\"2612\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-lazycolumn-3.png\" alt=\"\" class=\"wp-image-2612\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-lazycolumn-3.png 444w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-lazycolumn-3-137x300.png 137w\" sizes=\"auto, (max-width: 444px) 100vw, 444px\" \/><figcaption class=\"wp-element-caption\">LazyColumn<\/figcaption><\/figure>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udc49\ud83c\udffb \uc544\ub798\ub294 \ub808\uc774\uc9c0\uceec\ub7fc\uc548\uc5d0 \ubc84\ud2bc \ud074\ub9ad\uc2dc \ud1a0\uc2a4\ud2b8 \uba54\uc138\uc9c0\ub97c \uc2e4\ud589\ud558\ub294 \ucf54\ub4dc \uc785\ub2c8\ub2e4.Below is the code that executes a toast message when a button is clicked in the lazy column. \ud83d\udc49\ud83c\udffb \ub808\uc774\uc9c0\uceec\ub7fc\uc740 xml\ubc29\uc2dd\uc5d0\uc11c \ub9ac\uc0ac\uc774\ud074\ub7ec\ubdf0 \ube44\uc2b7\ud55c \uc5ed\ud560\uc785\ub2c8\ub2e4.LazyColumn plays a similar role to RecyclerView in XML style method. \ud83d\udc49\ud83c\udffb \ud1a0\uc2a4\ud2b8\uba54\uc138\uc9c0\ub294 xml\ubc29\uc2dd\uacfc compose\ubc29\uc2dd\uc740 \uc0ac\uc6a9\ubc29\ubc95, \ub514\uc790\uc778,\uae30\ub2a5\uc774 \ub2e4\ub985\ub2c8\ub2e4.Toast messages in XML and Compose [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,1],"tags":[],"class_list":["post-2609","post","type-post","status-publish","format-standard","hentry","category-kotlin","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2609","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=2609"}],"version-history":[{"count":13,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2609\/revisions"}],"predecessor-version":[{"id":2626,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2609\/revisions\/2626"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=2609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=2609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=2609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}