{"id":45532,"date":"2021-11-09T00:29:31","date_gmt":"2021-11-08T15:29:31","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45532"},"modified":"2021-11-12T16:32:45","modified_gmt":"2021-11-12T07:32:45","slug":"layouts-in-jetpack-compose-slot-api","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45532","title":{"rendered":"Layouts in Jetpack Compose – Slot API"},"content":{"rendered":"\n

\ucef4\ud3ec\uc988\ub294 UI\ub97c \ub9cc\ub4e4 \ub54c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uace0\uc218\uc900\uc758 \uba38\ud14c\ub9ac\uc5bc \ucef4\ud3ec\ub10c\ud2b8 \ucef4\ud3ec\uc800\ube14\uc744 \uc81c\uacf5\ud55c\ub2e4. <\/p>\n\n\n\n

Slot API\ub294 \ucef4\ud3ec\uc800\ube14\uc5d0 \uc0ac\uc6a9\uc790 \uc815\uc758 \uacc4\uce35\uc744 \uc5b9\uae30 \uc704\ud55c \ud328\ud134\uc774\ub2e4. \uc774 \uc720\uc988\ucf00\uc774\uc2a4\ub294 Material Componts \ucef4\ud3ec\uc800\ube14\uc744 \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n

Note:<\/strong> \uc774\ubc88 \uc139\uc158\uc740 \uc774\ub860\uc801\uc778 \ub0b4\uc6a9\ub9cc \uc788\uc73c\ubbc0\ub85c, \uc5ec\uae30 \uc788\ub294 \ucf54\ub4dc\ub97c \uc548\ub4dc\ub85c\uc774\ub4dc \uc2a4\ud29c\ub514\uc624\uc5d0\uc11c \uc0ac\uc6a9\ud558\uc9c0 \ub9d0\uc790.<\/p><\/blockquote>\n\n\n\n

\uc608\uc81c\ub97c \uc0b4\ud3b4\ubcf4\uc790.<\/p>\n\n\n\n

\uba38\ud14c\ub9ac\uc5bc \ubc84\ud2bc\uc5d0 \ub300\ud574 \uc0dd\uac01\ud574\ubcf4\uba74, \ubc84\ud2bc\uc774 \uc5b4\ub5bb\uac8c \ubcf4\uc5ec\uc9c0\uace0, \ubc84\ud2bc\uc774 \ubb34\uc5c7\uc744 \ud3ec\ud568\ud574\uc57c \ud558\ub294\uc9c0\uc5d0 \ub300\ud55c \uc815\ud574\uc9c4 \uac00\uc774\ub4dc\uac00 \uc788\ub2e4. \uc774\ub97c \uac04\ub2e8\ud55c API\ub85c \ubcc0\ud658\ud558\uc5ec \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n

Button(text = \"Button\")<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uadf8\ub7ec\ub098 \uc885\uc885 \uae30\ub300\ud558\ub294 \uac83 \uc774\uc0c1\uc73c\ub85c \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 \ucee4\uc2a4\ud140\ud654\ud558\uace0 \uc2f6\uc744 \ub54c\uac00 \uc788\ub2e4. \ucee4\uc2a4\ud140 \ud560 \uc218 \uc788\ub294 \ub3c5\ub9bd\uc801\uc778 \uc694\uc18c\ub4e4\uc5d0 \ub300\ud574 \ubb34\uc5b8\uac00 \uc2dc\ub3c4\ud558\uac70\ub098 \ub9e4\uac1c\ubcc0\uc218\ub97c \ucd94\uac00\ud560 \uc218\ub3c4 \uc788\uc9c0\ub9cc, \uae08\uc138 \uac10\ub2f9\ud560 \uc218 \uc5c6\uac8c \ub418\uc5b4\ubc84\ub9b0\ub2e4.<\/p>\n\n\n\n
Button(
    text = \"Button\",
    icon: Icon? = myIcon,
    textStyle = TextStyle(...),
    spacingBetweenIconAndText = 4.dp,
    ...
)<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uadf8\ub7ec\ubbc0\ub85c \uc6b0\ub9ac\uac00 \uc608\uce21\ud560 \uc218 \uc5c6\ub294 \ubc29\uc2dd\uc73c\ub85c \uc5ec\ub7ec \ub9e4\uac1c\ubcc0\uc218\ub97c \ucd94\uac00\ud558\uc5ec \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\uc790\ud654\ud558\ub294 \uac83 \ub300\uc2e0\uc5d0, Slots\uc744 \ucd94\uac00\ud558\ub3c4\ub85d \ud558\uc790. Slot\uc740 \uac1c\ubc1c\uc790\uac00 \uc6d0\ud558\ub294 \ub300\ub85c \ucc44\uc6b8 \uc218 \uc788\ub3c4\ub85d UI\uc5d0 \ube48 \uacf5\uac04\uc744 \ub0a8\uae34\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Button\uc758 \uacbd\uc6b0 \uc608\ub97c\ub4e4\uba74, \uc544\uc774\ucf58\uacfc \ud14d\uc2a4\ud2b8\uac00 \uc788\ub294 Row\ub97c \ub2e4\uc74c\uacfc \uac19\uc774 \ucc44\uc6cc\ub123\uc744 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
Button {
    Row {
        MyImage()
        Spacer(4.dp)
        Text(\"Button\")
    }
}<\/code><\/pre>\n\n\n\n
\uc774\ub97c \uac00\ub2a5\ud558\uac8c \ud558\uae30 \uc704\ud574 \ub78c\ub2e4 \ud45c\ud604\uc2dd\uc73c\ub85c (content: @Composable () -> Unit) \ud558\uc704 \ucef4\ud3ec\uc800\ube14\uc744 \ucde8\ud558\ub294 Button\uc6a9 API\ub97c \uc81c\uacf5\ud55c\ub2e4. \uc774\ub97c \ud1b5\ud574 Button \ub0b4\uc5d0 \uc790\uc2e0\ub9cc\uc758 \ucef4\ud3ec\uc800\ube14\uc744 \ucc44\uc6cc\ub123\uc5b4\uc11c  \uc815\uc758\ud560 \uc218 \uc788\uac8c \ub41c\ub2e4.<\/p>\n\n\n\n
@Composable
fun Button(
    modifier: Modifier = Modifier,
    onClick: (() -> Unit)? = null,
    ...
    content: @Composable () -> Unit
)<\/code><\/pre>\n\n\n\n
content\ub77c\ub294 \uc774\ub984\uc744 \uc9c0\uc815\ud55c \uc774 \ub78c\ub2e4\ud45c\ud604\uc2dd\uc774 \ub9c8\uc9c0\ub9c9 \ub9e4\uac1c\ubcc0\uc218\ub85c \uc788\ub294\ub370, \ud6c4\ud589 \ub78c\ub2e4 \uad6c\ubb38\uc744 \uc0ac\uc6a9\ud558\uc5ec \uad6c\uc870\ud654\ub41c \ubc29\uc2dd\uc73c\ub85c \ubc84\ud2bc\uc5d0 \ucf58\ud150\uce20\ub97c \uc0bd\uc785\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n

Compose\ub294 Top App Bar\uc640 \uac19\uc740 \ub354 \ubcf5\uc7a1\ud55c \uad6c\uc131 \uc694\uc18c\uc5d0\uc11c \uc2ac\ub86f\uc744 \ub9ce\uc774 \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n
\"\"
\uc5ec\uae30\uc5d0\uc11c \uc81c\ubaa9 \uc678\uc5d0 \ub354 \ub9ce\uc740 \uac83\uc744 \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \ud560 \uc218 \uc788\ub2e4.<\/figcaption><\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc0ac\uc6a9 \ubc29\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
TopAppBar(
    title = {
        Text(text = \"Page title\", maxLines = 2)
    },
    navigationIcon = {
        Icon(myNavIcon)
    }
)<\/code><\/pre>\n\n\n\n
\uc790\uc2e0\ub9cc\uc758 \ucef4\ud3ec\uc800\ube14\uc744 \ub9cc\ub4e4 \ub54c, \ub354\uc6b1 \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud558\uac8c \ub9cc\ub4e4\uae30 \uc704\ud574 Slots API \ud328\ud134\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\ub2e4\uc74c \uc139\uc158\uc5d0\uc11c\ub294 \uc0ac\uc6a9\uac00\ub2a5\ud55c \ub2e4\ub978 \uba38\ud14c\ub9ac\uc5bc \ucef4\ud3ec\ub10c\ud2b8 \ucef4\ud3ec\uc800\ube14\uacfc \uadf8\uac83\ub4e4\uc744 \uc5b4\ub5bb\uac8c \uc571\uc744 \ub9cc\ub4e4 \ub54c \uc0ac\uc6a9\ud558\ub294\uc9c0 \uc54c\uc544\ubcf4\uc790.<\/p>\n","protected":false},"excerpt":{"rendered":"
\ucef4\ud3ec\uc988\ub294 UI\ub97c \ub9cc\ub4e4 \ub54c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uace0\uc218\uc900\uc758 \uba38\ud14c\ub9ac\uc5bc \ucef4\ud3ec\ub10c\ud2b8 \ucef4\ud3ec\uc800\ube14\uc744 \uc81c\uacf5\ud55c\ub2e4. Slot API\ub294 \ucef4\ud3ec\uc800\ube14\uc5d0 \uc0ac\uc6a9\uc790 \uc815\uc758 \uacc4\uce35\uc744 \uc5b9\uae30 \uc704\ud55c \ud328\ud134\uc774\ub2e4. \uc774 \uc720\uc988\ucf00\uc774\uc2a4\ub294 Material Componts \ucef4\ud3ec\uc800\ube14\uc744 \uc0ac\uc6a9\ud55c\ub2e4. Note: \uc774\ubc88 \uc139\uc158\uc740 \uc774\ub860\uc801\uc778 \ub0b4\uc6a9\ub9cc \uc788\uc73c\ubbc0\ub85c, \uc5ec\uae30 \uc788\ub294 \ucf54\ub4dc\ub97c \uc548\ub4dc\ub85c\uc774\ub4dc \uc2a4\ud29c\ub514\uc624\uc5d0\uc11c \uc0ac\uc6a9\ud558\uc9c0 \ub9d0\uc790. \uc608\uc81c\ub97c \uc0b4\ud3b4\ubcf4\uc790. \uba38\ud14c\ub9ac\uc5bc \ubc84\ud2bc\uc5d0 \ub300\ud574 \uc0dd\uac01\ud574\ubcf4\uba74, \ubc84\ud2bc\uc774 \uc5b4\ub5bb\uac8c \ubcf4\uc5ec\uc9c0\uace0, \ubc84\ud2bc\uc774 \ubb34\uc5c7\uc744 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[38],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45532"}],"collection":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=45532"}],"version-history":[{"count":3,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45532\/revisions"}],"predecessor-version":[{"id":45546,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45532\/revisions\/45546"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}