如何使用 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: there are currently 3 fixed widths in Android, should this be flexible? Material says the width should be 240dp here.

我认为你应该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)
    }
}

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

How to Make LinearProgressIndicator Width Dynamic With Jetpack Compose

android

android-layout

kotlin

android-jetpack

android-jetpack-compose