【问题标题】:Jetpack Compose DropdownJetpack 撰写下拉菜单
【发布时间】:2021-08-05 14:59:02
【问题描述】:

我有这个下拉菜单,但尽管有 Modifier.fillMaxWidth(),它并没有填满所有的屏幕宽度。

顶部应用栏的主要区域横跨屏幕宽度,当我点击它时,我希望下拉菜单以与顶部应用栏相同的宽度展开。但展开后的下拉菜单更窄。

如何更改它以填充最大屏幕宽度?

fun DropdownChildren(
    items: List<ChildUiModel>,
    chosenChild: ChildUiModel?,
    onChildChosen: (ChildUiModel) -> Unit
) {
    var expanded by remember { mutableStateOf(false) }
    var selectedIndex by remember { mutableStateOf(0) }
    Box(modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center)) {
        Row(modifier = Modifier
            .fillMaxSize()
            .clickable(onClick = { expanded = true }),
            verticalAlignment = Alignment.CenterVertically) {
            ChildrenDropdownMenuItem(
                imageUrl = chosenChild?.profileImage?: "https://c8.alamy.com/comp/TBRA08/many-children-on-frame-border-illustration-TBRA08.jpg",
                    text = chosenChild?.name?: stringResource(id = R.string.all_children),
                    chosen = false)

        }

        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier
                .fillMaxWidth()
                .requiredSizeIn(maxHeight = 500.dp)
        ) {
            items.forEachIndexed { index, child ->
                DropdownMenuItem(
                    modifier = Modifier
                        .fillMaxWidth()
                    .background(color = if (child.id == chosenChild?.id) appColors.secondary else appColors.primary),
                    onClick = {
                        expanded = false
                        selectedIndex = index
                        onChildChosen(items[selectedIndex])
                }) {
                    ChildrenDropdownMenuItem(
                        imageUrl = if (child.profileImage == null)
                            "https://pics.freeicons.io/uploads/icons/png/2793494581535699799-512.png"
                        else child.profileImage?: "https://pics.freeicons.io/uploads/icons/png/2793494581535699799-512.png",
                        text = child.name,
                        chosen = child.id == chosenChild?.id)

                }
            }
        }
    }
}

@Composable
fun ChildrenDropdownMenuItem(
    imageUrl: String,
    text: String,
    chosen: Boolean
){
    Row(modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically){
        Avatar(url = imageUrl)
        Text(text = text,
            style = AppTheme.typography.h4,
            color = if (chosen) appColors.primary else appColors.secondary)
    }
} ```

【问题讨论】:

    标签: android android-jetpack-compose


    【解决方案1】:

    阅读DropdownMenu的源码,max是硬编码的,你可以复制源码,把宽度设置成你喜欢的值。

    【讨论】:

    • 你能具体说明我应该在源代码中更改什么吗?我已经复制了它,尝试使用硬编码的宽度、偏移和填充,但没有任何效果。无论我更改什么,它仍然在右侧有这个空白区域。
    猜你喜欢
    • 2020-08-21
    • 2021-07-10
    • 2020-11-03
    • 2021-07-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-11-06
    相关资源
    最近更新 更多