드롭다운(콤보박스)을 텍스트필드와 연결하여 html의 combobox로 만들려고 한다.

고소해앱에서 실사용하는 모습은 아래와 같다.

일단 코드를 보자

// 드롭다운텍스트필드
@Composable
fun dropDownTextField(items : List<String>, inputString: String) : String {
 
    var isDropDownExpanded by remember {mutableStateOf(false) }  // 드롭다운 변수
 
    val textValue = remember { mutableStateOf(inputString) }
 
    Row(modifier = Modifier.clickable { isDropDownExpanded = !isDropDownExpanded }) {
        OutlinedTextField(
            value =  textValue.value,
            onValueChange = { },
            label = { Text(text = "병원에 안 간 이유", fontSize = 14.sp, style = TextStyle(fontFamily = fontGoryeong))  },
            readOnly = true,
            trailingIcon = {
                IconButton(onClick = { isDropDownExpanded = !isDropDownExpanded }) {
                    Icon(
                        imageVector = Icons.Default.ArrowDropDown,
                        contentDescription = "Select Drop Down"
                    )
                }
            },
            textStyle = TextStyle(fontFamily = fontkjcMyungjo, fontSize = 14.sp, fontWeight = FontWeight.SemiBold, fontStyle = FontStyle.Normal),
            keyboardOptions = KeyboardOptions.Default,
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp)
                .onFocusChanged {
                    if (it.isFocused) {
                        isDropDownExpanded = true
                    } else {
                        isDropDownExpanded = false
                    }
                },
        )
    }
 
    DropdownMenu(
        expanded = isDropDownExpanded,
        onDismissRequest = {
            isDropDownExpanded= false
        }) {
        items.forEachIndexed { _, itemName ->
            DropdownMenuItem(text = {
                Text(text = itemName)
            },
                onClick = {
                    textValue.value = itemName
                    isDropDownExpanded = false
                })
        }
    }
 
    return textValue.value
}

DropdownMenu 콤포즈는 DropdownMenuItem을 아이템요소로 한다. DropdownMenuItem은 일일히 적어줄 수도 있겠지만

일반적으로는 List형으로 받아와서 루프문을 실행해 주는게 편할 것이다.

DropdownMenu를 호출하는것은 하위 펑선에 있는 expanded를 true값으로 해주면 된다. 즉, DropdownMenu는 컴퍼저블 내에서 expanded값으로 팝업을 처리한다.

이는 다이알로그 컴퍼저블과는 다르기 때문에 흥미롭다. 통상 다일알로그 컴퍼저블은 컴퍼저블 바깥에서 if 문으로 호출을 해주기 때문이다. timedialpicker예제와 비교해보자

텍스트필드의 트레일링 아이콘을 클릭하면 expanded 값을 true값으로 설정하게 해주면 dropdownmenu가 나오게 된다.

다음은 위의 컴퍼저블을 호출하는 예제이다.

    medicalHistory = medicalHistory.copy(hasTreatment = false)
    medicalHistory = medicalHistory.copy(plannedToTreatment = dropDownTextField(
    items = listOf("자연 치유가 가능 합니다.", "외상은 없으나 병원 진료를 고려 중 입니다.", "병원에 예약을 하였습니다."),
    inputString = medicalHistory.plannedToTreatment
    ))