{"id":245,"date":"2024-10-11T16:59:53","date_gmt":"2024-10-11T08:59:53","guid":{"rendered":"https:\/\/newstrong.xyz\/?p=245"},"modified":"2024-10-11T16:59:53","modified_gmt":"2024-10-11T08:59:53","slug":"jetpack-%e8%87%aa%e5%ae%9a%e4%b9%89-dropdownmenu","status":"publish","type":"post","link":"https:\/\/newstrong.top\/index.php\/2024\/10\/11\/jetpack-%e8%87%aa%e5%ae%9a%e4%b9%89-dropdownmenu\/","title":{"rendered":"Jetpack \u81ea\u5b9a\u4e49 DropDownMenu"},"content":{"rendered":"<pre><code class=\"language-java\">@Composable\nfun DropDownMenu(initPosition: Int, values: List&lt;String&gt;, onValueChange: (String) -&gt; Unit) {\n  val expanded = remember { mutableStateOf(false) }\n  val itemPosition = remember { mutableIntStateOf(initPosition) }\n  Box(\n    modifier = Modifier\n      .background(Color.White, shape = RoundedCornerShape(RadiusElement))\n      .border(\n        border = BorderStroke(1.dp, UtilityBackground),\n        shape = RoundedCornerShape(RadiusElement)\n      )\n      .padding(horizontal = SpacingF, vertical = SpacingF)\n  ) {\n    Row(\n      horizontalArrangement = Arrangement.Center,\n      verticalAlignment = Alignment.CenterVertically,\n      modifier = Modifier.clickableNoEffect {\n        expanded.value = true\n      }\n    ) {\n      Text(text = values[itemPosition.intValue], style = contentTextStyle2)\n      Spacer(modifier = Modifier.width(SpacingF))\n      Image(\n        painter = painterResource(id = R.drawable.ic_chevron_down),\n        contentDescription = &quot;DropDown Icon&quot;\n      )\n    }\n\n    DropdownMenu(\n      containerColor = Color.White,\n      expanded = expanded.value,\n      onDismissRequest = {\n        expanded.value = false\n      }) {\n\n      DropdownMenuItem(\n\n        text = {\n          Column(modifier = Modifier.background(Color.White)) {\n            values.forEachIndexed { index, it -&gt;\n              Text(\n                modifier = Modifier\n                  .clickableNoEffect {\n                    expanded.value = false\n                    itemPosition.intValue = index\n                  }\n                  .background(color = if(itemPosition.intValue==index) ColorBrand5 else Color.White, shape = RoundedCornerShape(RadiusElement))\n\n                  .padding(horizontal = SpacingF, vertical = SpacingF), text = it\n              )\n            }\n          }\n        },\n        onClick = {\n          expanded.value = false\n        }\n      )\n    }\n  }\n}\n\n@Composable\n@Preview\nfun DropDownMenuPreview() {\n  DropDownMenu(initPosition = 0, values = listOf(&quot;1&quot;, &quot;2&quot;), onValueChange = {})\n}\n\n@Composable\nfun DropDownDemo() {\n\n  val isDropDownExpanded = remember {\n    mutableStateOf(false)\n  }\n\n  val itemPosition = remember {\n    mutableStateOf(0)\n  }\n\n  val usernames = listOf(&quot;Alexander&quot;, &quot;Isabella&quot;, &quot;Benjamin&quot;, &quot;Sophia&quot;, &quot;Christopher&quot;)\n\n  Column(\n    modifier = Modifier.fillMaxSize(),\n    horizontalAlignment = Alignment.CenterHorizontally,\n    verticalArrangement = Arrangement.Center\n  ) {\n\n    Box {\n      Row(\n        horizontalArrangement = Arrangement.Center,\n        verticalAlignment = Alignment.CenterVertically,\n        modifier = Modifier.clickableNoEffect {\n          isDropDownExpanded.value = true\n        }\n      ) {\n        Text(text = usernames[itemPosition.value])\n        Image(\n          painter = painterResource(id = R.drawable.ic_arrow_left_circle),\n          contentDescription = &quot;DropDown Icon&quot;\n        )\n      }\n      DropdownMenu(\n        containerColor = Color.White,\n        expanded = isDropDownExpanded.value,\n        onDismissRequest = {\n          isDropDownExpanded.value = false\n        }) {\n\/\/        usernames.forEachIndexed { index, username -&gt;\n\/\/          DropdownMenuItem(text = {\n\/\/            Text(text = username)\n\/\/          },\n\/\/            onClick = {\n\/\/              isDropDownExpanded.value = false\n\/\/              itemPosition.value = index\n\/\/            })\n\/\/        }\n        DropdownMenuItem(\n\n          text = {\n            Column(modifier = Modifier.background(Color.White)) {\n              usernames.forEachIndexed { index, it -&gt;\n                Text(modifier = Modifier.clickableNoEffect {\n                  isDropDownExpanded.value = false\n                  itemPosition.value = index\n                }, text = it)\n              }\n            }\n          },\n          onClick = {\n            isDropDownExpanded.value = false\n\n          }\n        )\n      }\n    }\n\n  }\n}\n<\/code><\/pre>\n<p><img decoding=\"async\" src=\"http:\/\/120.46.136.9\/wp-content\/uploads\/2024\/10\/image-1728637169734.png\" alt=\"file\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>@Composable fun DropDownMenu(initPosition: Int, values:&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":246,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-245","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/newstrong.top\/index.php\/wp-json\/wp\/v2\/posts\/245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/newstrong.top\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/newstrong.top\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/newstrong.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/newstrong.top\/index.php\/wp-json\/wp\/v2\/comments?post=245"}],"version-history":[{"count":0,"href":"https:\/\/newstrong.top\/index.php\/wp-json\/wp\/v2\/posts\/245\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/newstrong.top\/index.php\/wp-json\/wp\/v2\/media\/246"}],"wp:attachment":[{"href":"https:\/\/newstrong.top\/index.php\/wp-json\/wp\/v2\/media?parent=245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/newstrong.top\/index.php\/wp-json\/wp\/v2\/categories?post=245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/newstrong.top\/index.php\/wp-json\/wp\/v2\/tags?post=245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}