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

Posted 2023-04-18

【中文标题】如何使用 Jetpack Compose 使 LinearProgressIndicator 宽度动态化

【英文标题】：How to Make LinearProgressIndicator Width Dynamic With Jetpack Compose

【发布时间】：2021-12-19 04:40:51

【问题描述】：

我正在尝试使用 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 的宽度动态来完成该布局，这看起来很简单，但显然我错过了一些东西。

【参考方案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)
    

【讨论】：

我按照您的建议创建了一个issue，所以我们将看看它会产生什么结果。另外，我正在考虑使用 Layout 可组合，但现在我看到通过使用 SubcomposeLayout 我可以根据其他可组合的大小调整可组合的大小，这最适合我的情况。非常感谢。