如何在撰写中将文本居中放置在 DropdownMenuItem 中

Question

目前，当我创建 DropdownMenu 时，它总是在开头显示文本。我希望它居中，但没有找到任何资源来回答这个问题。

Answer 1

下拉项采用可组合项，您可以使用 Box 并将内容对齐方式设置为居中

    DropdownMenu(
        expanded = expanded,
        onDismissRequest = { expanded = false },
        modifier = Modifier.fillMaxWidth())
    ) {
        items.forEachIndexed { index, s ->
            DropdownMenuItem(onClick = {
                selectedIndex = index
                expanded = false
            }) {
                val disabledText = if (s == disabledValue) {
                    " (Disabled)"
                } else {
                    ""
                }
                Box(contentAlignment = Alignment.Center) {
                    Text(text = s + disabledText)
                }
            }
        }
    }

Answer 2

默认情况下，Box 换行内容大小，因此对于内部的单个视图，没有额外的修饰符，contentAlignment 没有区别。要使@Francesc 的答案生效，您需要将 Modifier.fillMaxWidth() 应用于方框：

DropdownMenuItem(onClick = {}) {
    Box(
        contentAlignment = Alignment.Center, 
        modifier = Modifier.fillMaxWidth()
    ) {
        Text(text = "text")
    }
}

或者，您可以在不使用 Box 的情况下使用 textAlign 参数执行此操作，并且您还需要 Modifier.fillMaxWidth():

DropdownMenuItem(onClick = {}) {
    Text(
        text = "text",
        textAlign = TextAlign.Center,
        modifier = Modifier.fillMaxWidth()
    )
}

如何在撰写中将文本居中放置在 DropdownMenuItem 中

How to center text inside DropdownMenuItem in compose

android

android-jetpack-compose