如何居中对齐按钮文本（Jetpack Compose）答案

【问题标题】：How to center align a button text (Jetpack Compose)如何居中对齐按钮文本（Jetpack Compose）
【发布时间】：2026-02-04 17:15:01
【问题描述】：

我正在尝试将按钮的文本垂直和水平对齐到中心，默认情况下不存在。我尝试使用“偏移”在按钮中定位文本，但不同设备尺寸的定位不一致。

我的按钮代码是：

                Button(
                onClick = {
                    navController.navigate("fourth_screen")
                },
                modifier = Modifier.constrainAs(buttonSave) {
                    top.linkTo(glButtonSaveTop)
                    bottom.linkTo(glButtonSaveBottom)
                    start.linkTo(glLeft)
                    end.linkTo(glRight)
                    width = Dimension.fillToConstraints
                    height = Dimension.fillToConstraints

                },
                enabled = !errorMsg.value,
                colors = if (query.value.text != ""){
                    ButtonDefaults.
                    buttonColors(backgroundColor = colorResource(id = R.color.voodlee_red))}
            else {
                    ButtonDefaults.
                    buttonColors(backgroundColor = colorResource(id = R.color.gray))}

            ) {
                Text(
                    "Save", color = colorResource(id = R.color.dark_blue),
                    fontSize = with(LocalDensity.current) {
                        dimensionResource(id = R.dimen._16ssp).toSp()
                    },
                    fontFamily = FontFamily(Font(R.font.poppins_medium)),
                    textAlign = TextAlign.Center,
                    modifier = Modifier.fillMaxSize().offset(y= (0.15).dp)) //offset for positioning

            }

如何使按钮中的文本垂直和水平居中，适用于所有设备尺寸。

编辑：在稳定的 Jetpack Compose 中有什么解决方案吗？

【问题讨论】：

标签： android button android-jetpack-compose

【解决方案1】：

您可以使用修饰符 align 将 Composable 居中：

Button(
            onClick = {
                navController.navigate("fourth_screen")
            },
            modifier = Modifier.constrainAs(buttonSave) {
                top.linkTo(glButtonSaveTop)
                bottom.linkTo(glButtonSaveBottom)
                start.linkTo(glLeft)
                end.linkTo(glRight)
                width = Dimension.fillToConstraints
                height = Dimension.fillToConstraints

            },
            enabled = !errorMsg.value,
            colors = if (query.value.text != ""){
                ButtonDefaults.
                buttonColors(backgroundColor = colorResource(id = R.color.voodlee_red))}
        else {
                ButtonDefaults.
                buttonColors(backgroundColor = colorResource(id = R.color.gray))}

        ) {
            Text(
                "Save", color = colorResource(id = R.color.dark_blue),
                fontSize = with(LocalDensity.current) {
                    dimensionResource(id = R.dimen._16ssp).toSp()
                },
                fontFamily = FontFamily(Font(R.font.poppins_medium)),
                textAlign = TextAlign.Center,  // horizontal center of the text
                modifier = Modifier.align(Alignment.CenterVertically) //vertical center of the Text composable

        }

【讨论】：

Button( onClick={ }, modifier = Modifier.width(150.dp), elevation = ButtonDefaults.elevation(defaultElevation = 5.dp), shape = CircleShape, colors = ButtonDefaults.buttonColors( backgroundColor = Color.Green )) { Text( text = "开始阅读", fontSize = 20.sp, textAlign = TextAlign.Center, color = Color.Black ) }