Jetpack Compose implementation for Desktop dropdown selection box

The effect is as follows:

Sometimes the behavior is a little strange. There are some problems when adjusting the layout and binding the state. There is not much information to read, but finally it is done. The functions are divided into several functions, and the parameters and callback functions are passed between the functions.

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.size
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDropDown
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp


class Props {
    var expanded = false
    var selectList: MutableList<String> = mutableListOf("0000"."0001"."0002"."0003")
    var text = selectList[0]
    lateinit var callBack: (String.Boolean) -> Unit
}

class Select(props: Props) {
    private var props: Props = props

    @Composable
    fun Root() {
        var props = props
        /** * Control dropdown selection box */
        var dropExpand by remember { mutableStateOf(props.expanded) }
        // The callback function
        props.callBack = fun(text: String, expand: Boolean) {
            props.text = text
            dropExpand = expand
        }
        var prop by remember { mutableStateOf(props) }

        Column {
            Row {
                SelectedTextBox(prop)
                SelectButton(prop)
            }
            DropdownMenu(
                expanded = dropExpand,
                onDismissRequest = {
                    props.expanded = false
                    props.callBack(props.text, false)},) {
                SelectOption(prop)
            }
        }
    }

    @Composable
    fun SelectedTextBox(props: Props) {
        // Displays the selected text
        TextField(
            props.text,
            onValueChange = {
                props.text = it
            },
            readOnly = true,
            modifier = Modifier.size(90.dp, 50.dp)
        )
    }

    @Composable
    fun SelectButton(props: Props) {
        IconButton(onClick = {
            props.callBack(props.text, true)}) {
            // Pull down the button
            Icon(Icons.Default.ArrowDropDown, "")
        }
    }

    @Composable
    fun SelectOption(props: Props) {
        for (it in props.selectList) {
            DropdownMenuItem(onClick = {
                props.callBack(it, false)}) {
                Text(it)
            }
        }
    }
}
Copy the code