如何在完整的 Composable 上方显示半透明加载叠加层

Question

我正在尝试创建一个包装另一个 content 可组合项的可组合项，并在其上显示一个 CircularProgressBar 作为叠加层，覆盖整个 content 可组合项。

我几乎让它按预期工作，请参阅以下图片：

初始状态

加载状态

但正如您所见，覆盖图填满了整个屏幕，而不仅仅是灰色的LazyRow 项目和文本字段。因此，按钮被推离屏幕。

这是我当前的代码：

@Composable
fun LoadingBox(
    modifier: Modifier = Modifier,
    isLoading: Boolean = false,
    loadingText: String,
    content: @Composable() () -> Unit
) {
    Box(modifier = modifier
        .fillMaxWidth()
        .wrapContentHeight()
    ) {

        content()
        if (isLoading) {

            Surface(
                modifier = Modifier
                    .fillMaxSize()
                    .alpha(0.5f),
            ) {
                Column(
                    modifier = Modifier.fillMaxSize(),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    CircularProgressIndicator()
                    Text(text = loadingText)
                }
            }
        }
    }
}

在屏幕截图中，我提供了灰色框和文本字段作为content 参数。所以叠加层应该只覆盖灰色的LazyRow 项目和文本字段。

我已经偶然发现了instrinsic measures，但是当我将 LazyRow 提供为content 时，由于以下错误，我无法使用它们，因为应用程序崩溃了：

java.lang.IllegalStateException: Asking for intrinsic measurements of SubcomposeLayout layouts is not supported. This includes components that are built on top of SubcomposeLayout, such as lazy lists, BoxWithConstraints, TabRow, etc. To mitigate this:
- if intrinsic measurements are used to achieve 'match parent' sizing,, consider replacing the parent of the component with a custom layout which controls the order in which children are measured, making intrinsic measurement not needed

Answer 1

去掉Column中的Surface和verticalArrangement，在Box中添加contentAlignment = Alignment.Center：

就像是：

Box(modifier = modifier
    .fillMaxWidth(),
    contentAlignment = Alignment.Center
) {

    content()
    if (isLoading) {


        Column(
            modifier = Modifier.fillMaxWidth().alpha(0.5f),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            androidx.compose.material.CircularProgressIndicator()
            Text(text = loadingText)
        }

    }
}