Compose DropdownMenu下拉弹出框组件的简单使用

随着JetPack Compose组件版本升级至1.1.0版本，便开始对compose进行初步的学习，由于有flutter的开发经验，很多控件都能马上上手，如Column、Row、Scaffold等，其中也有很多不同的控件需要进行学习。
现在开始对DropdownMenu 下拉组件进行学习。
与flutter DropdownButton不同，Compose DropdownMenu是一个独立的弹出列表，需要包裹一层Column或者Row，搭配显示、点击事件的控件一并使用，如Button、EditText、TopAppBar。
现在通过Botton与DropdownMenu组合实例来进行一个简单的使用。

• 在方法中声明@Composable并使用Column\Button\DropdownMenu进行组合

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ActivationCodeTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    MainPage()
                }
            }
        }
    }
}

@Composable
fun MainPage() {
    Scaffold(
        modifier = Modifier.fillMaxSize(),
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "test")
                }
            )
        },
        content = {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .verticalScroll(rememberScrollState()),
                content = {
                    SelectTypeView()
                }
            )
        }
    )
}

@Composable
fun SelectTypeView() {
    val typeList = mutableListOf(
        "重庆",
        "成都",
        "上海",
        "北京",
        "深圳",
        "香港",
    )
    val isClick = rememberSaveable { mutableStateOf(false) }
    val selectType = rememberSaveable { mutableStateOf("重庆") }
    Column(
        modifier = Modifier.fillMaxWidth(),
    ) {
        Button(
            onClick = {isClick.value = !isClick.value},
            content = {
                Text(text = selectType.value)
            },
        )
        DropdownMenu(
            expanded = isClick.value,
            modifier = Modifier.fillMaxWidth(),
            onDismissRequest = {},
            content = {
                typeList.forEach {
                    DropdownMenuItem(
                        onClick = {
                            isClick.value = !isClick.value
                            selectType.value = it
                        },
                        content = {
                            Text(text = it)
                        }
                    )
                }
            },
        )
    }
}

以上代码中SelectTypeView()是本次功能实现的核心代码，rememberSaveable是compose的一种状态储存，类似于flutter provider Selector组件，对ui进行局部刷新并保持状态，remember在使用上也有缺陷，支持类型少如Int、String等，对自己新建的实体或者list就没法支持。可通过ViewModel MutableLiveData进行状态管理或者重写remember里的saver进行实现。
DropdownMenu默认参数中expanded为启用状态，负责组件是否显示、onDismissRequest为显示消失后的回调、content存放DropdownMenuItem用于内容显示。
DropdownMenuItem作为菜单显示可在content的中添加Icon、ImageView进行美化，默认为Row横向排列。
具体实现代码中isClick.value是对DropdownMenu显示状态进行储存，由Button和DropdownMenuItem进行控制；selectType.value负责储存已选择的数据；Button负责DropdownMenu的显示和点击DropdownMenuItem后显示相关数据；DropdownMenuItem负责点击后隐藏DropdownMenu并把数据显示在Button上；

实现效果：