{"id":1563,"date":"2021-06-08T09:27:02","date_gmt":"2021-06-08T01:27:02","guid":{"rendered":"http:\/\/wthee.xyz\/?p=1563"},"modified":"2021-06-08T09:28:15","modified_gmt":"2021-06-08T01:28:15","slug":"jetpack-compose-chipgroup","status":"publish","type":"post","link":"https:\/\/wthee.xyz\/index.php\/2021\/06\/08\/jetpack-compose-chipgroup\/","title":{"rendered":"Jetpack Compose ChipGroup"},"content":{"rendered":"<blockquote>\n<p>Compose \u7248\u672c\uff1a1.0.0-beta08<\/p>\n<\/blockquote>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_38 counter-hierarchy ez-toc-counter ez-toc-transparent ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<span class=\"ez-toc-title-toggle\"><a class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" style=\"display: none;\"><span style=\"display: flex;align-items: center;width: 35px;height: 30px;justify-content: center;\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/wthee.xyz\/index.php\/2021\/06\/08\/jetpack-compose-chipgroup\/#%E6%95%88%E6%9E%9C\" title=\"\u6548\u679c\">\u6548\u679c<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/wthee.xyz\/index.php\/2021\/06\/08\/jetpack-compose-chipgroup\/#%E6%B7%BB%E5%8A%A0%E4%BE%9D%E8%B5%96\" title=\"\u6dfb\u52a0\u4f9d\u8d56\">\u6dfb\u52a0\u4f9d\u8d56<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/wthee.xyz\/index.php\/2021\/06\/08\/jetpack-compose-chipgroup\/#%E4%B8%BB%E8%A6%81%E4%BB%A3%E7%A0%81\" title=\"\u4e3b\u8981\u4ee3\u7801\">\u4e3b\u8981\u4ee3\u7801<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/wthee.xyz\/index.php\/2021\/06\/08\/jetpack-compose-chipgroup\/#%E4%BD%BF%E7%94%A8%E7%A4%BA%E4%BE%8B\" title=\"\u4f7f\u7528\u793a\u4f8b\">\u4f7f\u7528\u793a\u4f8b<\/a><\/li><\/ul><\/nav><\/div>\n<h4><span class=\"ez-toc-section\" id=\"%E6%95%88%E6%9E%9C\"><\/span>\u6548\u679c<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/wthee.xyz\/wp-content\/uploads\/2021\/06\/S10608-09242732-1.png?w=1170&#038;ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/p>\n<h4><span class=\"ez-toc-section\" id=\"%E6%B7%BB%E5%8A%A0%E4%BE%9D%E8%B5%96\"><\/span>\u6dfb\u52a0\u4f9d\u8d56<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<pre><code class=\"\" data-line=\"\">...\n\n\/\/\u6d41\u5f0f\u5e03\u5c40\nval accompanistVersion = &quot;0.11.1&quot;\nimplementation(&quot;com.google.accompanist:accompanist-flowlayout:$accompanistVersion&quot;)\n\n...<\/code><\/pre>\n<h4><span class=\"ez-toc-section\" id=\"%E4%B8%BB%E8%A6%81%E4%BB%A3%E7%A0%81\"><\/span>\u4e3b\u8981\u4ee3\u7801<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<pre><code class=\"\" data-line=\"\">\n\/**\n * ChipGroup\n *\n * @param items \u6570\u636e\u5217\u8868\n * @param selectIndex \u9009\u62e9\u4f4d\u7f6e\u72b6\u6001\n *\/\n@Composable\nfun ChipGroup(\n    items: List&lt;ChipData&gt;,\n    selectIndex: MutableState&lt;Int&gt;,\n    modifier: Modifier = Modifier\n) {\n    FlowRow(modifier = modifier) {\n        items.forEachIndexed { index, chipData -&gt;\n            ChipItem(item = chipData, selectIndex)\n        }\n    }\n}\n\n\/**\n * ChipItem\n *\/\n@Composable\nfun ChipItem(item: ChipData, selectIndex: MutableState&lt;Int&gt;) {\n    val context = LocalContext.current\n    \/\/\u80cc\u666f\u8272\n    val backgroundColor = if (selectIndex.value == item.index)\n        colorResource(id = R.color.purple_500)\n    else\n        colorResource(id = R.color.white)\n    \/\/\u5b57\u4f53\u989c\u8272\n    val textColor = if (selectIndex.value == item.index)\n        MaterialTheme.colors.background\n    else\n        MaterialTheme.colors.onBackground\n\n    Box(\n        modifier = Modifier\n            .padding(6.dp)\n            .clip(CircleShape)\n            .background(backgroundColor, CircleShape)\n            .clickable {\n                selectIndex.value = item.index\n            }\n    ) {\n        Text(\n            text = item.text,\n            color = textColor,\n            style = MaterialTheme.typography.subtitle1,\n            modifier = Modifier.padding(6.dp)\n        )\n    }\n}<\/code><\/pre>\n<h4><span class=\"ez-toc-section\" id=\"%E4%BD%BF%E7%94%A8%E7%A4%BA%E4%BE%8B\"><\/span>\u4f7f\u7528\u793a\u4f8b<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<pre><code class=\"\" data-line=\"\">Surface(color = Color.Gray, modifier = Modifier.fillMaxSize()) {\n    val chipData = arrayListOf(\n        ChipData(0, &quot;Chip 1&quot;),\n        ChipData(1, &quot;Chip 2&quot;),\n        ChipData(2, &quot;Chip 3&quot;),\n        ChipData(3, &quot;Chip 4&quot;),\n        ChipData(4, &quot;Chip 5&quot;),\n        ChipData(5, &quot;Chip 6&quot;),\n    )\n    val indexState = remember {\n        mutableStateOf(0)\n    }\n    Column {\n        Text(text = &quot;\u5df2\u9009\u62e9\uff1a${chipData[indexState.value].text}&quot;)\n        ChipGroup(chipData, indexState)\n    }\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u5b9e\u73b0 ChipGroup \u7ec4\u4ef6<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_jetpack_newsletter_access":""},"categories":[3,19],"tags":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pcwHG0-pd","jetpack-related-posts":[{"id":1579,"url":"https:\/\/wthee.xyz\/index.php\/2021\/06\/09\/jetpack-compose-navigation-%e7%9a%84%e4%bd%bf%e7%94%a8\/","url_meta":{"origin":1563,"position":0},"title":"Jetpack Compose Navigation \u7684\u4f7f\u7528","author":"wthee","date":"2021\u5e746\u67089\u65e5","format":false,"excerpt":"Compose \u7248\u672c\uff1a1.0.0-beta08 Navigation \u7248\u672c\uff1a2.4.0-alpha0\u2026","rel":"","context":"\u5728\u201cAndroid \u5f00\u53d1\u201d\u4e2d","block_context":{"text":"Android \u5f00\u53d1","link":"https:\/\/wthee.xyz\/index.php\/category\/android\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1576,"url":"https:\/\/wthee.xyz\/index.php\/2021\/06\/09\/jetpack-compose-%e6%8b%96%e5%8a%a8%e6%95%88%e6%9e%9c\/","url_meta":{"origin":1563,"position":1},"title":"Jetpack Compose \u62d6\u52a8\u6548\u679c","author":"wthee","date":"2021\u5e746\u67089\u65e5","format":false,"excerpt":"\u5229\u7528 Modifier.draggable \u76d1\u542c\u62d6\u52a8\u8ddd\u79bb\uff0c\u5b9e\u73b0\u62d6\u52a8\u6548\u679c","rel":"","context":"\u5728\u201cAndroid \u5f00\u53d1\u201d\u4e2d","block_context":{"text":"Android \u5f00\u53d1","link":"https:\/\/wthee.xyz\/index.php\/category\/android\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1569,"url":"https:\/\/wthee.xyz\/index.php\/2021\/06\/08\/jetpack-compose-%e6%9d%83%e9%99%90%e7%94%b3%e8%af%b7\/","url_meta":{"origin":1563,"position":2},"title":"Jetpack Compose \u6743\u9650\u7533\u8bf7","author":"wthee","date":"2021\u5e746\u67088\u65e5","format":false,"excerpt":"\u5728 Jetpack Compose \u4e2d\uff0c\u7533\u8bf7\u6743\u9650\u7684\u4e00\u79cd\u65b9\u5f0f","rel":"","context":"\u5728\u201cAndroid \u5f00\u53d1\u201d\u4e2d","block_context":{"text":"Android \u5f00\u53d1","link":"https:\/\/wthee.xyz\/index.php\/category\/android\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1573,"url":"https:\/\/wthee.xyz\/index.php\/2021\/06\/08\/jetpack-compose-%e5%ae%9e%e7%8e%b0%e6%bb%91%e5%8a%a8%e6%8a%98%e5%8f%a0%e6%95%88%e6%9e%9c\/","url_meta":{"origin":1563,"position":3},"title":"Jetpack Compose \u5b9e\u73b0\u6ed1\u52a8\u6298\u53e0\u6548\u679c","author":"wthee","date":"2021\u5e746\u67088\u65e5","format":false,"excerpt":"\u5229\u7528 rememberScrollState() \uff0c\u5b9e\u73b0\u6ed1\u52a8\u6298\u53e0\u7684\u6548\u679c","rel":"","context":"\u5728\u201cAndroid \u5f00\u53d1\u201d\u4e2d","block_context":{"text":"Android \u5f00\u53d1","link":"https:\/\/wthee.xyz\/index.php\/category\/android\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1571,"url":"https:\/\/wthee.xyz\/index.php\/2021\/06\/08\/jetpack-compose-%e4%bd%bf%e7%94%a8-coil-%e5%8a%a0%e8%bd%bd%e5%9b%be%e7%89%87\/","url_meta":{"origin":1563,"position":4},"title":"Jetpack Compose \u4f7f\u7528 Coil \u52a0\u8f7d\u56fe\u7247","author":"wthee","date":"2021\u5e746\u67088\u65e5","format":false,"excerpt":"Accompanist \u63d0\u4f9b\u4e86\u6613\u4e8e\u4f7f\u7528\u7684 Painter\uff0c\u5b83\u53ef\u4ee5\u4f7f\u7528 Coil \u56fe\u50cf\u52a0\u8f7d\u5e93\u4ece\u5916\u90e8\u6765\u6e90\u2026","rel":"","context":"\u5728\u201cAndroid \u5f00\u53d1\u201d\u4e2d","block_context":{"text":"Android \u5f00\u53d1","link":"https:\/\/wthee.xyz\/index.php\/category\/android\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1555,"url":"https:\/\/wthee.xyz\/index.php\/2021\/05\/31\/jetpack-compose-%e5%85%a5%e9%97%a8%e5%bf%85%e7%9c%8b%e7%9a%84%e6%96%87%e6%a1%a3-%e9%a1%b9%e7%9b%ae\/","url_meta":{"origin":1563,"position":5},"title":"Jetpack Compose \u5165\u95e8\u5fc5\u770b\u7684\u6587\u6863\/\u9879\u76ee","author":"wthee","date":"2021\u5e745\u670831\u65e5","format":false,"excerpt":"Jetpack Compose \u76f8\u5173\u7684\u4e00\u4e9b\u6587\u6863\/\u9879\u76ee\u6c47\u603b","rel":"","context":"\u5728\u201cJetpack Compose\u201d\u4e2d","block_context":{"text":"Jetpack Compose","link":"https:\/\/wthee.xyz\/index.php\/category\/android\/jetpack-compose\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/wthee.xyz\/wp-content\/uploads\/2021\/05\/jetpack_compose.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/wthee.xyz\/wp-content\/uploads\/2021\/05\/jetpack_compose.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/wthee.xyz\/wp-content\/uploads\/2021\/05\/jetpack_compose.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/wthee.xyz\/wp-content\/uploads\/2021\/05\/jetpack_compose.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/wthee.xyz\/wp-content\/uploads\/2021\/05\/jetpack_compose.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/posts\/1563"}],"collection":[{"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=1563"}],"version-history":[{"count":3,"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/posts\/1563\/revisions"}],"predecessor-version":[{"id":1568,"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/posts\/1563\/revisions\/1568"}],"wp:attachment":[{"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=1563"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/categories?post=1563"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/tags?post=1563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}