在 Jetpack compose 中将文本右对齐按钮

Question

我有带有文字的按钮：

Button(
                colors = ButtonDefaults.buttonColors(
                    backgroundColor = Color.Transparent,
                    contentColor = colors.primary,
                ),
                elevation = null,
                onClick = {},
                border = BorderStroke(0.dp, Color.Transparent),
            ) {
                Text(
                    text = stringResource(id = R.string.name),
                    fontSize = 12.sp,
                    textAlign = TextAlign.Right
                )
            }

现在按钮中的文本居中。如何将此文本移至此按钮的右侧/末尾。

textAlign = TextAlign.Right

不工作。

Answer 1

您必须为

width

和

Button

指定

Text

。

Button(
    colors = ButtonDefaults.buttonColors(
        backgroundColor = Color.Transparent,
        contentColor = colors.primary,
    ),
    elevation = null,
    onClick = {},
    border = BorderStroke(0.dp, Color.Transparent),
    modifier = Modifier.fillMaxWidth()
) {
    Text(
        text = stringResource(id = R.string.name),
        fontSize = 12.sp,
        textAlign = TextAlign.Right,
        modifier = Modifier.fillMaxWidth(),
    )
}

我已经给出了

Button

的全宽

modifier = Modifier.fillMaxWidth()

也让你的

Text

占据那个父母

width

。

modifier = Modifier.fillMaxWidth()

Answer 2

如果你想将整个按钮向右对齐，那么你可以尝试这个。您可以用

Button

小部件包围您的

Row

，并给它一个

horizontalArrangement = Arrangement.End

。试试这个代码：

Row(modifier = Modifier.fillMaxWidth(),
    horizontalArrangement  =  Arrangement.End) {
   Button(
            colors = ButtonDefaults.buttonColors(
                backgroundColor = Color.Transparent,
                contentColor = colors.primary,
            ),
            elevation = null,
            onClick = {},
            border = BorderStroke(0.dp, Color.Transparent),
        ) {
            Text(
                text = stringResource(id = R.string.name),
                fontSize = 12.sp,
                textAlign = TextAlign.Right
            )
        }
}

我希望这有帮助。