Эй, ребята! Возьмите чашку кофе ☕️ и давайте создадим открытое выпадающее меню с помощью Jetpack Compose 😎.

Код

Мы создадим раскрывающееся меню пола, поэтому давайте начнем с создания составного объекта GenderDropdownMenu и инициализируем переменные isExpanded и gender.

@Composable
fun GenderDropdownMenu() {
    var isExpanded by remember {
        mutableStateOf(false)
    }

    var gender by remember {
        mutableStateOf("")
    }
}

Теперь добавьте ExposedDropdownMenuBox. Это позволяет нам привязать раскрывающийся список к TextField, который мы создадим через мгновение.

ExposedDropdownMenuBox(
    expanded = isExpanded,
    onExpandedChange = { newValue ->
        isExpanded = newValue
    }
) { /*TODO*/ }

В ExposedDropdownMenuBox мы создадим TextField, который будет доступен только для чтения, иначе мы не сможем вызвать раскрывающееся меню при нажатии на него. Кроме того, мы будем использовать ExposedDropdownMenuDefaults, который дает нам анимированный значок, который показывает, когда раскрывающийся список раскрывается, и цвета по умолчанию TextField.

TextField(
    value = gender,
    onValueChange = {},
    readOnly = true,
    trailingIcon = {
        ExposedDropdownMenuDefaults.TrailingIcon(expanded = isExpanded)
    },
    placeholder = {
        Text(text = "Please select your gender")
    },
    colors = ExposedDropdownMenuDefaults.textFieldColors(),
    modifier = Modifier.menuAnchor()
)

Под TextField мы создадим ExposedDropdownMenu, который содержит список DropdownMenuItem.

ExposedDropdownMenu(
    expanded = isExpanded,
    onDismissRequest = { 
        isExpanded = false 
    }
) {
    DropdownMenuItem(
        text = {
            Text(text = "Male")
        },
        onClick = {
            gender = "Male"
            isExpanded = false
        }
    )
    DropdownMenuItem(
        text = {
            Text(text = "Female")
        },
        onClick = {
            gender = "Female"
            isExpanded = false
        }
    )
    DropdownMenuItem(
        text = {
            Text(text = "Other")
        },
        onClick = {
            gender = "Other"
            isExpanded = false
        }
    )
}

Я надеюсь, что эта статья помогла вам в вашем развитии. Не забудьте оставаться в курсе моих последних материалов, следуя за мной и подписавшись на информационный бюллетень. Спасибо за чтение!