如何使用 Jetpack Compose 使 LinearProgressIndicator 宽度动态化

Question

我正在尝试使用 Compose 进行以下布局：

我遇到的问题是我无法使 LinearProgressIndicator 的宽度与 Text 1 可组合的宽度相同。这是我目前的实现：

@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()
                            )
                        }
                        Text(
                            text = "Text 2",
                            modifier = Modifier.weight(1f)
                        )
                    }
                }
            }
        }
    }
}

这是结果：

正如您所见，LinearProgressIndicator 需要尽可能多的宽度，从而使父 Column 比 Text 1 可组合更宽。这个想法是 LinearProgressIndicator 应该与 Text 1 一样宽，并且随着 Text 1 的扩展，LinearProgressIndicator 也应该如此。请注意，我正在使用内部函数，因为它似乎是解决此问题的方法，但它不起作用，这可能是由于 LinearProgressIndicator 默认具有固定宽度：

@Composable
fun LinearProgressIndicator(
    ...
    modifier: Modifier = Modifier,
    ...
) {
    Canvas(
        modifier
            .progressSemantics(progress)
            .size(LinearIndicatorWidth, LinearIndicatorHeight)
            .focusable()
    ) {
        ...
    }
}

private val LinearIndicatorWidth = 240.dp

我想知道如何使 LinearProgressIndicator 的宽度动态来完成该布局，这看起来很简单，但显然我错过了一些东西。

Answer 1

即使是维护者也不确定这是一个好的解决方案：

TODO：Android 中目前有 3 种固定宽度，这应该灵活吗？ Material说这里的宽度应该是240dp。

我认为您应该 create an issue 让他们知道您对此类功能感兴趣。

与此同时，您可以通过以下方式绕过它：

SubcomposeLayout(Modifier.padding(end = 5.dp)) { constraints ->
    val textPlaceable = subcompose("Text") {
        Text("Text 1")
    }[0].measure(constraints)
    val progressIndicatorPlaceable = subcompose("ProgressIndicator") {
        LinearProgressIndicator(
            progress = 0.5f,
        )
    }[0].measure(constraints.copy(maxWidth = textPlaceable.width))
    layout(
        width = textPlaceable.width,
        height = textPlaceable.height + progressIndicatorPlaceable.height,
    ) {
        textPlaceable.place(0, 0)
        progressIndicatorPlaceable.place(0, textPlaceable.height)
    }
}