如何在 Jetpack Compose 中从 DrawScope 调用 @Composable 函数？

Question

我画条形图。我想在列表加载栏的末尾绘制动画（作为单独的函数），但我无法调用 @Composable 函数。 错误：

@Composable 调用只能在 a 的上下文中发生 @可组合函数

@Composable
fun Chart(
    modifier: Modifier = Modifier,
    model: BarData
) {
    Column(modifier = modifier) {
        Canvas(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
            
        ) {
            val radius = 45f
            
            val (paidBarHeight, incomingBarHeight) = computeBarsHeights(
                paidRatioAnim,
                incomingRatioAnim,
                size
            )

            if(!model.isLoading) {
                rotate(180f, pivot = size.center) {
                    drawRoundRect(
                        color = ChartBackgroundGreyColor,
                        size = size.copy(height = incomingBarHeight),
                        cornerRadius = CornerRadius(radius, radius)
                    )
                    drawRoundRect(
                        color = ChartBasicGreenColor,
                        size = size.copy(height = paidBarHeight),
                        cornerRadius = CornerRadius(radius, radius)
                    )
                }
            } else {
                //HOW TO DRAW LOADING BAR
            }
        }
    

} }

Answer 1

如您所见，

Canvas

可组合项不允许您直接在其中绘制。在这方面，它类似于

LazyColumn

。您需要使用

DrawScope

方法来绘制您想要的内容。

在这种情况下，您应该在画布外部绘制加载栏：

    Column(modifier = modifier) {
        if (model.isLoading) {
            // draw loader
        } else
           Canvas(...)
        }
    }