项目场景：

实现如图所示仿电池样式的进度条

实现方案

/**
 * 自定义进度条（图片背景、颜色变换、文字显示）
 *
 * @param   progress:进度
 * @param   fontSize:文字大小
 * @param   modifier:修饰符
 *
 */
@Composable
fun ProgressBarWithBackground(
    progress: Int,
    fontSize: Int = 8,
    modifier: Modifier = Modifier
) {
    // 进度颜色
    val fillColor = when {
        progress <= 30 -> Color(0xFFFFC5C4)
        progress <= 70 -> Color(0xFFB5DAFF)
        else -> Color(0xFFBFFFCA)
    }
    //文字颜色
    val textColor = when {
        progress <= 30 -> Color(0xFFF7211E)
        progress <= 70 ->  Color(0xFF3098FF)
        else ->  Color(0xFF0AC429)
    }
    //背景图
    val backgroundPainter = when{
        progress <= 30  -> painterResource(R.mipmap.ic_heart_red)
        progress <= 70  -> painterResource(R.mipmap.ic_heart_blue)
        else -> painterResource(R.mipmap.ic_heart_green)
    }

    // 外层Box：设置背景图片 + 边框 + 圆角
    Box(
        modifier = modifier.fillMaxSize(),
        contentAlignment = Alignment.CenterStart
    ) {
        //底层背景图
        Image(
            painter = backgroundPainter,
            contentDescription = "背景",
            contentScale = ContentScale.Crop,
            modifier = Modifier.fillMaxSize()
        )
        // 内层进度填充
        Box(
            modifier = Modifier
                .fillMaxWidth(progress.coerceIn(0, 100) / 100f)
                .fillMaxHeight()
                .padding(2.dp,1.dp)
                .background(
                    color = fillColor,
                    shape = RoundedCornerShape(4.dp)
                )
        )
        Text(
            text = "${progress}%",
            color = textColor,
            fontSize = fontSize.sp,
            lineHeight = fontSize.sp,
            modifier = Modifier
                .padding(end = 4.dp)
                .align(Alignment.CenterEnd)
        )
    }
}

可能遇到的问题：

文字未能垂直居中

当 Text 的 lineHeight 属性未设置时，可能会遇到该问题