I am creating a custom composable in Jetpack Compose using Canvas.
How to center text when using drawText?

Code

@OptIn(ExperimentalTextApi::class)
@Composable
fun MyCenterTextInCanvas() {
    val width: Dp = 200.dp
    val height: Dp = 40.dp
    val textMeasurer = rememberTextMeasurer()
    Canvas(
        modifier = Modifier
            .background(Color.LightGray)
            .wrapContentSize(
                align = Alignment.Center,
            )
            .requiredSize(
                width = width,
                height = height,
            ),
    ) {
        drawText(
            textMeasurer = textMeasurer,
            text = "Sample Text",
            topLeft = Offset(
                x = (width / 2).toPx(),
                y = (height / 2).toPx(),
            ),
        )
    }
}

Compose version
jetpackComposeVersion = "1.3.0-alpha02"

UI

enter image description here

推荐答案

您可以通过测量文本并将其放置为

@OptIn(ExperimentalTextApi::class)
@Composable
fun MyCenterTextInCanvas() {
    val width: Dp = 200.dp
    val height: Dp = 40.dp
    val textMeasurer = rememberTextMeasurer()

    val textLayoutResult: TextLayoutResult =
        textMeasurer.measure(text = AnnotatedString("Sample Text"))
    val textSize = textLayoutResult.size
    Canvas(
        modifier = Modifier
            .background(Color.LightGray)
            .requiredSize(
                width = width,
                height = height,
            ),
    ) {

        val canvasWidth = size.width
        val canvasHeight = size.height


        drawText(
            textMeasurer = textMeasurer,
            text = "Sample Text",
            topLeft = Offset(
                (canvasWidth - textSize.width) / 2f,
                (canvasHeight - textSize.height) / 2f
            ),
        )
    }
}

enter image description here

Android相关问答推荐

长流与长流的比较<>

如何使用Gradle风味在两个Kotlin导入(Google vs Amazon Java billing library)之间进行 Select ?

使用Retrofit2的API调用:我如何能够一直进行API调用,以更新数据而无需重新打开应用程序

我正在创建一个简单的连接四个游戏,我需要一个弹出式窗口当你赢了

在 kotlin 协同 routine 中,如何将数据范围限定为请求路径(以 MDC 为例)?

减少Compose中可滚动选项卡之间的间距

Jetpack Compose:在屏幕外制作长水平图像的动画

如何知道我的应用程序的新版本是否显示广告?

Jetpack Compose:如何绘制异形边框?

判断 AAR 元数据时发现 Android 问题:androidx.core:core:1.12.0-alpha01 和 androidx.core:core-ktx:1.12.0-alpha01

Android CompanionDeviceManager 永远找不到任何附近的蓝牙设备

如何正确地将图像上传到 Jetpack Compose 中的 LazyList 中的项目?

Jetpack Compose UI - 在 AlertDialog 中单击时按钮宽度会发生变化

如何在组件之间导航

状态值更改时屏幕未重新组合 - Jetpack Compose

无法使用 Gradle 托管设备对基线配置文件运行测试

Android TTS 在屏幕关闭一段时间后停止朗读

MpAndroidChart:在轴的末尾添加一个箭头

模拟器在 android studio bumblebee 中不起作用

已弃用的 ManagedQuery() 问题