Jetpack Compose：设置Accompanist占位符且不影响布局尺寸

你可以通过分层布局+保持原组件测量尺寸的方式实现需求，无需修改库源码：

方案一：双层Box实现指定尺寸占位符 #

核心思路是让外层红边框Box的尺寸始终由原Text组件决定（即使加载状态下Text不可见但仍参与布局测量），在加载时在Box上层叠加一个指定宽高的占位符组件。

var isLoading by remember { mutableStateOf(true) }

Box(
    modifier = Modifier.border(2.dp, Color.Red)
) {
    // 原文本组件：加载时不可见，但仍参与布局测量，保证外层Box尺寸不变
    Text(
        text = "你的文本内容",
        modifier = Modifier.visibility(if (isLoading) Visibility.Invisible else Visibility.Visible)
    )

    // 加载状态的占位符：指定固定宽高，不影响外层Box尺寸
    if (isLoading) {
        Box(
            modifier = Modifier
                .size(width = 62.dp, height = 28.dp)
                .placeholder(visible = true, color = Color.Gray)
                .align(Alignment.Center) // 可根据需求调整占位符位置
        )
    }
}

方案二：自定义drawWithContent绘制占位符 #

直接通过drawWithContent修改绘制逻辑，在加载状态下绘制指定尺寸的占位符，完全复用原组件的布局测量结果：

var isLoading by remember { mutableStateOf(true) }
val placeholderSize = Size(62.dp.toPx(), 28.dp.toPx())

Text(
    text = "你的文本内容",
    modifier = Modifier
        .border(2.dp, Color.Red)
        .drawWithContent {
            if (isLoading) {
                // 计算占位符居中偏移量
                val offsetX = (size.width - placeholderSize.width) / 2
                val offsetY = (size.height - placeholderSize.height) / 2
                
                // 绘制占位符
                drawRect(
                    color = Color.Gray,
                    topLeft = Offset(offsetX, offsetY),
                    size = placeholderSize,
                    alpha = 0.3f // 可调整占位符透明度
                )
                // 如果需要闪烁动画，可自行添加AnimatedVisibility或动画修饰符
            } else {
                drawContent()
            }
        }
)

两种方案都能保证红边框Box始终保持原Text的尺寸，占位符仅作为覆盖层显示，不会干扰布局测量。

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