android 如何在完全组合之上显示半透明加载覆盖

gudnpqoy  于 2023-01-28  发布在  Android
关注(0)|答案(1)|浏览(161)

我正在尝试创建一个可组合文件,它 Package 另一个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
nle07wnf

nle07wnf1#

您应该:

  • contentAlignment = Alignment.Center添加到父Box
  • 卸下Surface
  • 删除Column中的verticalArrangement
  • 添加另一个Box,您可以用半透明背景填充它

比如:

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

    content()
    if (isLoading) {
        Box(
            Modifier
                .matchParentSize()
                .background(Color.Gray.copy(alpha = 0.5f))

        )

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

    }
}

相关问题