我正在显示从数据库中检索到的项目列表. 每个项目都有一个图像URL和一个布尔天气,无论是溢价还是不溢价.


我想如果它是溢价显示Box以上的实际图像,这是用户可以点击观看广告,以能够看到图像.

我加载图像使用线圈,所以我的问题是,当该项目是保费和图像仍在加载Box组成,但与当前的大小,并在图像加载后,Box不调整大小

这会导致Box无法按预期填满可用空间(见附图)

这是我的ImageItem个可组合的乐趣:

 @Composable
    private fun ImageItem(
        wallpaperItem: Wallpaper
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
        ) {
            // Getting the image using coil
            SubcomposeAsyncImage(
                model = ImageRequest.Builder(LocalContext.current)
                    .data(wallpaperItem.imageUrl)
                    .crossfade(true)
                    .build(),
                loading = { LinearProgressIndicator() },
                onLoading = { viewModel.isLoading(true) },
                onSuccess = {
                    viewModel.isLoading(false)

                },
                onError = { viewModel.sendUiEvent(UiEvent.ShowSnackbar(it.result.throwable.message.toString())) },
                contentDescription = null,
                contentScale = ContentScale.Fit,
                modifier = Modifier
                    .clickable { viewModel.onEvent(HomeEvent.OnWallpaperClick(wallpaperItem)) }
                    .clip(RoundedCornerShape(12.dp))
            )
            // Checking weather the image is premium or not
            if (wallpaperItem.isPremium) {
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .alpha(0.5f)
                        .background(colorResource(id = R.color.darkGreen))
                ) {
                    Text(
                        text = "Watch ad\nTo view the wallpaper",
                        textAlign = TextAlign.Center,
                        modifier = Modifier
                            .fillMaxSize()
                    )
                }
            }
        }
    }

结果

结果

预期

预期

加载图像时

Images being loaded

我已经探索了各种解决方案,比如使用weight和onSizeChanged修饰符,但不幸的是,还没有找到一个成功的解决方案.我是一个相对较新的composer ,非常感谢您对解决这个问题的任何见解或建议.

感谢您的时间和支持!

推荐答案

你的ImageItemComposable很可能放在LazyColumn里.因此,将嵌套的可合成对象设置为fillMaxSize时,该修改器将被忽略.

然后发生的是父Box包装SubcomposeAsyncImage高度.一旦高度发生变化,子框大小不会更新.

请看一下matchParentSize修饰符.

测量完所有其他内容元素后,调整元素大小以匹配Box的大小.

此修改器也适用于LazyColumn.
您可以按如下方式调整代码:

if (wallpaperItem.isPremium) {
    Box(
        modifier = Modifier
            .matchParentSize()
            .alpha(0.5f)
            .background(colorResource(id = R.color.darkGreen))
    ) {
        // ...
    }
}

Android相关问答推荐

以编程方式更改Android应用程序上的文件许可

如何在Android Emulator上从物理设备接收TCP消息

无法在Jetpack Compose中显示Admob原生广告

格雷德的两个星号是什么意思?非路径

在带有REACT-Native-CLI的开发和生产中使用Firebase的最佳实践

在柯特林连续测量网速

在java android studio项目上安装mapbox

如何在 Jetpack Compose 中处理水平滚动手势和变换手势

当 Firebase Firestore 发生变化时,Kotlin ViewModel 不会更新

浏览器未命中断点判断 USB 连接设备

如何在 React Native 下载文件之前打开文件管理器并 Select 一个目录

服务似乎在启动时忽略传递的变量

在 Jetpack Compose 中自动滚动后面的项目

每次在 Jetpack Compose 中调用导航

Jetpack Compose - 每次点击按钮都不起作用

从 Firebase 云存储中获取照片会导致 Android Jetpack Compose 闪烁

无法 HEAD 'https://jcenter.bintray.com/com/facebook/react/react-native/maven-metadata.xml'

如何从日期 Select 器计算年龄?

如何修复 api 调用在浏览器中工作但在 android studio 中为 403

优化 Room 数据库迁移