如何在Jetpack Compose中实现LinearProgressIndicator宽度动态适配文本宽度

你遇到的问题核心在于LinearProgressIndicator默认内置了240dp的最小宽度限制，即使你设置了fillMaxWidth，在固有宽度测量阶段它仍然会返回240dp作为最小宽度，导致设置了IntrinsicSize.Min的父Column被撑开，无法以Text 1的宽度为准。

你只需要给LinearProgressIndicator添加requiredWidthIn(min = 0.dp)修饰符，覆盖其默认的最小宽度约束即可实现需求：

@Composable
fun ExampleCard(
    modifier: Modifier = Modifier
) {
    MaterialTheme {
        Surface(color = Color(0xFFFFFFFF)) {
            Card(
                elevation = 5.dp,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(10.dp)
            ) {
                Column(modifier = Modifier.padding(10.dp)) {
                    Text(
                        text = "Card Title",
                        fontWeight = FontWeight.Bold,
                        fontSize = 24.sp
                    )
                    Row {
                        Column(
                            modifier = Modifier
                                .width(IntrinsicSize.Min)
                                .padding(end = 5.dp)
                        ) {
                            Text("Text 1")
                            LinearProgressIndicator(
                                progress = 0.5f,
                                modifier = Modifier
                                    .fillMaxWidth()
                                    // 新增该行，取消进度条默认的最小宽度限制
                                    .requiredWidthIn(min = 0.dp)
                            )
                        }
                        Text(
                            text = "Text 2",
                            modifier = Modifier.weight(1f)
                        )
                    }
                }
            }
        }
    }
}

原理解释 #

• requiredWidthIn(min = 0.dp)会强制覆盖组件自带的最小宽度约束，进度条的固有最小宽度就会变为0
• 父Column设置IntrinsicSize.Min后，宽度会由内部宽度最大的子组件决定，也就是你的Text 1
• 进度条设置fillMaxWidth后，宽度会自动匹配父Column的宽度，最终实现和Text 1宽度同步变化的效果

该方案同时适配Text 1宽度小于240dp、大于240dp的所有场景，不需要额外手动测量组件宽度。

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