Compose for Desktop & Jetpack Compose drop down search box implementation

A drop-down search box that can be automatically updated according to the input content (direct input content or pinyin initials). This code is composed using IDEA’s Compose for Desktop, which can be seamlessly ported to Android Jetpack Compose. Real “write once, run Anywhere “, Windows+Android can be directly standard apple SwiftUI. (Running on Android, you still have to adjust some parameters like fonts, otherwise it’s a little uncomfortable).

import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.size import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.material.Text import androidx.compose.material.TextField import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import com.github.promeg.pinyinhelper.Pinyin import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalFocusManager import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.em class TestUI { @Composable fun SearchList(list: MutableList<String>) {remember {mutableStateOf("")} /** * testList = list /** ** input hanZiPinYinList MutableMap<String, String> = mutableMapOf() testList.forEach { hanZiPinYinList[it] = pinyinFirstCharacter(it) } var dropList: MutableList<String> = mutableListOf() var dropListRemember by remember {mutableStateOf(dropList)} /** * Click on the flag bit of the drop-down list option * If the user has not clicked on the drop-down list option and the value is 0, but has clicked on the drop-down list option and the value is 1 * and the value is 1, the search box is assigned to the value of the selected option, And input box loses focus * / var clicked by remember {mutableStateOf (0)} the if (clicked = = 1) {LocalFocusManager. Current. ClearFocus ()} Column(modifier = modification.size (150.dp, 300.dp)) {TextField(value = value, onValueChange = {it -> // Start input, Clear () if (value.length! = 0) / / matching contents and initials hanZiPinYinList. At the same time forEach {the if (it) value) startsWith (value) | | it. The key. The startsWith (value)) dropListRemember.add( it.key ) } }, modifier = Modifier .fillMaxWidth() .border(1.dp, Color.Gray), TextStyle = textStyle (color = color.black, fontSize = 1.4.em, fontWeight = fontweight.bold, */ LazyColumn {items(dropListRemember) {item -> Text(item, modifier = Modifier .fillMaxWidth() .border(1.dp, Color.gray).clickable {value = item droplistremember.clear () Clicked = 1}, fontSize = 1.2.em)}}}} /** ** Clicked on first character, use tinypinyin */ String): String { if (hanzi == "") return "" else { var returnString = "" hanzi.forEach { returnString += Pinyin.toPinyin(it).toLowerCase()[0] } return returnString } } }Copy the code