Compose Multiplatformのそれっぽいドロップダウンの書き方
Desktopアプリ作成でドロップダウンメニューを作ろうとしたが、意外と実装するのに苦労した。
Boxを上手に使うと表示周りの表現を柔軟にできそう。
import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.border import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.DropdownMenu import androidx.compose.material.DropdownMenuItem import androidx.compose.material.Icon import androidx.compose.material.Text import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.ArrowDropDown import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp @Composable fun Dropdown() { val options = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5") val expanded = remember { mutableStateOf(false) } val selectedOptionText = remember { mutableStateOf(options[0]) } Box( contentAlignment = Alignment.CenterStart, modifier = Modifier .size(250.dp, 50.dp) .clip(RoundedCornerShape(4.dp)) .border(BorderStroke(1.dp, Color.LightGray), RoundedCornerShape(4.dp)) .clickable { expanded.value = !expanded.value }, ) { Text( text = selectedOptionText.value, modifier = Modifier.padding(start = 10.dp) ) Icon( Icons.Filled.ArrowDropDown, "contentDescription", Modifier.align(Alignment.CenterEnd) ) DropdownMenu( expanded = expanded.value, onDismissRequest = { expanded.value = false } ) { options.forEach { selectionOption -> DropdownMenuItem( onClick = { selectedOptionText.value = selectionOption expanded.value = false } ) { Text(text = selectionOption) } } } } }