您可以在 Jetpack Compose 预览中展开下拉菜单吗？

Question

我有以下可组合函数来创建

TopAppBar

。预览显示该栏很好，但是我可以让菜单在预览中展开吗？

@Composable
@Preview
fun AppBarTop(refreshOnClickHandler: (() -> Unit)? = null) {
    var showMenu by remember { mutableStateOf(false) }

    TopAppBar(
        elevation = 10.dp,
        title = {
            Text(stringResource(R.string.app_name))
        },
        actions = {
            IconButton(onClick = { /* //TODO Make this */ }) {
                Icon(
                    Icons.Filled.Search,
                    contentDescription = stringResource(R.string.content_desc_search_icon)
                )
            }
            IconButton(onClick = { showMenu = !showMenu }) {
                Icon(
                    Icons.Filled.MoreVert,
                    contentDescription = stringResource(R.string.content_desc_menu_icon)
                )
            }
            DropdownMenu(
                expanded = showMenu,
                onDismissRequest = { showMenu = false }
            ) {
                DropdownMenuItem(onClick = { /*TODO*/ }) {
                    Text(stringResource(R.string.action_refresh))
                }
                DropdownMenuItem(onClick = { /*TODO*/ }) {
                    Text(stringResource(R.string.action_settings))
                }
            }
        }
    )
}

Answer 1

想通了。交互式预览是一项实验性功能，因此您必须先在 Android Studio 设置中启用它。

File -> Settings -> Experimental

然后选中

Enable interactive and animation preview tools

旁边的框。

完成此操作后，交互式预览按钮将出现在组件预览的正上方。

Answer 2

您可以将参数传递给具有初始展开状态的@Composable（默认为

false

）。然后将

showMenu

的初始值设置为该值。

fun AppBarTop(refreshOnClickHandler: (() -> Unit)? = null, initialShowMenu: Boolean = false) {
    var showMenu by remember { mutableStateOf(initialShowMenu) }

在

@Preview

中只需将此参数设置为

true

即可。