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

Question

I'm trying to align the text of my button to the center vertically and horizontally, which isn't there by default. I have tried to use 'offset' to position text in my button but the positioning isn't consistent across various device sizes.

The code for my button is:

                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

            }

How do I center the text in my button vertically and horizontally that works on all device sizes.

EDIT: Any solution for this in stable Jetpack Compose?

Answer 1

You can just use the modifier align to center a 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

        }