Jetpack Compose中如何传入Text组件测量DP单位的文本宽度

直接用Compose原生的SubcomposeLayout做离屏测量即可，不需要硬编码固定文本，完全支持传入任意配置的Text Composable作为测量对象。

方法定义 #

import androidx.compose.foundation.layout.SubcomposeLayout
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.Dp

@Composable
fun measureTextWidth(measureContent: @Composable () -> Unit): Dp {
    var textWidth by remember { mutableStateOf(0.dp) }
    val density = LocalDensity.current
    
    SubcomposeLayout { constraints ->
        // 离屏子组合传入的Composable，不实际渲染到界面
        val measuredPlaceable = subcompose(
            slotId = "text_measure_slot",
            content = measureContent
        ).first().measure(constraints)
        
        // 把像素值转成Dp返回
        with(density) {
            textWidth = measuredPlaceable.width.toDp()
        }
        
        // 布局本身占0大小，不影响页面原有排版
        layout(0, 0) {}
    }
    
    return textWidth
}

调用方式 #

完全匹配预期的调用逻辑，直接把要测量的Text组件传进去就行：

import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.width
import androidx.compose.ui.graphics.Color

@Composable
fun DemoScreen() {
    // 直接拿到目标Text的渲染宽度
    val targetTextWidth = measureTextWidth {
        Text(
            text = "Hello World",
            style = MaterialTheme.typography.body2
        )
    }

    // 拿到宽度后可直接用于布局配置
    Box(
        modifier = Modifier
            .width(targetTextWidth)
            .background(Color.LightGray)
    ) {
        Text(
            text = "Hello World",
            style = MaterialTheme.typography.body2
        )
    }
}

注意事项 #

• 该方案不会硬编码任何文本或样式，你传入的Text不管是普通字符串、富文本、自定义字体、改了字重/行高/字间距，都能拿到准确的实际渲染宽度
• 返回的宽度值是响应式的，如果你传入的Text内容、样式发生变化，返回值会自动重组更新，不需要手动触发测量
• 测量过程是离屏完成的，不会在页面上渲染多余内容，也不会打断原有布局逻辑
• 这个方法必须在Composable上下文内调用，依赖Compose的布局测量管线，不能在普通Java/Kotlin函数里直接使用

内容的提问来源于stack exchange，提问作者Anand Chaudhari