Android Jetpack Compose 尝试对齐框中的文本

Question

我创建了一个盒子，在里面创建了图像和文本。我将框的内容对齐设置为TopStart但问题是文本相对于图像没有正确对齐。水平方向没问题，但垂直方向看起来有某种填充，但我尝试将填充设置为 0，但结果仍然相同。

即使将其从底部对齐，它也会设置比图像更高的像素

Box(contentAlignment = Alignment.TopStart,) {
    Image(painter = painterResource(id = R.drawable.ic_launcher_background), contentDescription = "",
        modifier = Modifier.size(125.dp),
        colorFilter = ColorFilter.tint(MaterialTheme.colors.onBackground)
    )

    Text(text = "4",
        color = MaterialTheme.colors.primary,
        fontSize = 44.sp,
        textAlign = TextAlign.Center
    )
}

Answer 1

您可以按照这里检查：

@Composable
fun MainScreen() {
.
.
   Box(modifier = Modifier.size(height = 90.dp, width = 290.dp)) {
    Text("TopStart", Modifier.align(Alignment.TopStart))
    Text("TopCenter", Modifier.align(Alignment.TopCenter))
    Text("TopEnd", Modifier.align(Alignment.TopEnd))

    Text("CenterStart", Modifier.align(Alignment.CenterStart))
    Text("Center", Modifier.align(Alignment.Center))
    Text(text = "CenterEnd", Modifier.align(Alignment.CenterEnd))

    Text("BottomStart", Modifier.align(Alignment.BottomStart))
    Text("BottomCenter", Modifier.align(Alignment.BottomCenter))
    Text("BottomEnd", Modifier.align(Alignment.BottomEnd))
   }
}

Answer 2

您需要使用内部的.align()修改器将其居中/定位。例如。TextBoxText(..., modifier = Modifier.align(Center), ..)

或者，您可以使文本填满整个文本Box（通过添加.fillMaxSize()文本）并使用该textAlign属性。