Проблема масштабирования содержимого изображения BackdropScaffold backLayerContent

Question

У меня есть экран создания с BackdropScaffold и AsyncImage в backLayerContent, поэтому, когда я открываю экран в первый раз, масштаб изображения работает странно, как в Screenshot1. И когда я снова открываю Экран, изображение размещается правильно, как на Скриншоте 2.

Снимок экрана 1:Изображение со странным масштабом.

Снимок экрана 2:правильное изображение после повторного открытия страницы.

Мой код:

       state.movie?.let { movie ->
        BackdropScaffold(
            scaffoldState = scaffoldState,
            gesturesEnabled = true,
            appBar = { },
            backLayerContent = {
                AsyncImage(
                    model = ImageRequest.Builder(LocalContext.current)
                        .data(movie.poster)
                        .crossfade(true)
                        .build(),
                    placeholder = painterResource(R.drawable.movie_default),
                    contentDescription = null,
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .fillMaxSize()
                        .background(color = Color.Black)
                        .verticalScroll(scrollState)
                        .clickable {
                            if (scaffoldState.isConcealed) {
                                scope.launch {
                                    scaffoldState.reveal()
                                }
                            }
                        },
                )
            },
            frontLayerShape = MaterialTheme.shapes.large,
            frontLayerContent = {
                FrontLayerScreen(movie)
            }
        ) {
            if (scrollState.isScrollInProgress) {
                scope.launch {
                    scaffoldState.conceal()
                }
            }
        }
    }

Кроме того, когда я запускаю прокрутку по вертикали (т. е. когда я меняю scaffoldState), изображение масштабируется правильно, как на скриншоте 2. Проблема возникает только при первом открытии экрана.

Это происходит только с AsyncImage, то есть когда я загружаю его из Интернета. Потому что, когда я использую изображение по умолчанию и загружаю изображение из рисованного, оно работает правильно

Answer 1

Моя проблема заключалась в том, что картинка не загружалась асинхронно. По этой причине я использовал функцию RememberAsyncImagePainter().

Отредактированный код:

               Image(
                painter = rememberAsyncImagePainter(
                    model = ImageRequest.Builder(LocalContext.current)
                        .data(movie.poster)
                        .crossfade(true)
                        .build()
                ),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .fillMaxSize()
                    .background(color = Color.Black)
                    .verticalScroll(scrollState)
                    .clickable {
                        if (scaffoldState.isConcealed) {
                            scope.launch {
                                scaffoldState.reveal()
                            }
                        }
                    },
              )