如何在 compose 中使用惰性列表布局优化 AndroidView 可组合项

Question

我遇到两个问题，滚动LazyColumn或VerticalPager填充AndroidView整个屏幕，因为子项目滞后于屏幕，滚动行为持续几毫秒以及重叠项目。在我的代码中，我还尝试用a替换以检查问题是否出在AndroidView其本身。我似乎无法准确地找到问题的根源，也许是因为它本身或它的实现，或者可能是因为它填满了整个屏幕？PlayerViewPlayerViewTextViewPlayerViewAndroidViewVerticalPager

视屏

@OptIn(ExperimentalPagerApi::class)
@Composable
fun VideoScreen() {
    val pagerState = rememberPagerState()
    Box {
        VerticalPager(
            count = videos.size,
            state = pagerState,
            horizontalAlignment = Alignment.CenterHorizontally,
            itemSpacing = 10.dp
        ) { index ->

            VideoPlayer(
                vid = videos[index],
                shouldPlay = false
            )
        }
    }
}

视频播放器

@Composable
fun VideoPlayer(
    vid: Video,
    shouldPlay: Boolean
) {
    val exoPlayer = rememberExoPlayerWithLifecycle(vid.url)
    val playerView = rememberPlayerView(exoPlayer)

        AndroidView(
            factory = { playerView },
            modifier = Modifier,
            update = {
                exoPlayer.playWhenReady = shouldPlay
            }
        )

    DisposableEffect(key1 = true) {
        onDispose {
            exoPlayer.release()
        }
    }
}

记住ExoPlayerWithLifecycle

@Composable
fun rememberExoPlayerWithLifecycle(
    url: String
): ExoPlayer {

    val context = LocalContext.current
    val exoPlayer = remember(url) {
        ExoPlayer.Builder(context).build().apply {
            videoScalingMode = C.VIDEO_SCALING_MODE_SCALE_TO_FIT
            repeatMode = Player.REPEAT_MODE_ONE
            setHandleAudioBecomingNoisy(true)
            val defaultDataSource = DefaultHttpDataSource.Factory()
            val source = ProgressiveMediaSource.Factory(defaultDataSource)
                .createMediaSource(MediaItem.fromUri(url))
            setMediaSource(source)
            prepare()
        }
    }
    var appInBackground by remember {
        mutableStateOf(false)
    }
    val lifecycleOwner = LocalLifecycleOwner.current
    DisposableEffect(key1 = lifecycleOwner, appInBackground) {
        val lifecycleObserver = getExoPlayerLifecycleObserver(exoPlayer, appInBackground) {
            appInBackground = it
        }
        lifecycleOwner.lifecycle.addObserver(lifecycleObserver)
        onDispose {
            lifecycleOwner.lifecycle.removeObserver(lifecycleObserver)
        }
    }
    return exoPlayer
}

记住玩家视图

@Composable
fun rememberPlayerView(exoPlayer: ExoPlayer): PlayerView {
    val context = LocalContext.current
    val playerView = remember {
        PlayerView(context).apply {
            layoutParams = ViewGroup.LayoutParams(MATCH_PARENT, MATCH_PARENT)
            useController = false
            resizeMode = AspectRatioFrameLayout.RESIZE_MODE_ZOOM
            player = exoPlayer
            setShowBuffering(SHOW_BUFFERING_ALWAYS)
        }
    }
    DisposableEffect(key1 = true) {
        onDispose {
            playerView.player = null
        }
    }
    return playerView
}

构建.gradle（项目）

buildscript {
ext {
    compose_version = '1.3.0-beta01'
   }
}
plugins {
    ...
    id 'org.jetbrains.kotlin.android' version '1.7.10' apply false
}
...

构建.gradle（模块）

...
dependencies {
    ...

    //Pager
    implementation "com.google.accompanist:accompanist-pager:0.26.2-beta"

    //Media 3
    def mediaVersion = "1.0.0-beta02"
    implementation "androidx.media3:media3-exoplayer:$mediaVersion"
    implementation "androidx.media3:media3-ui:$mediaVersion"

    ...
}

重叠的项目

Answer 1

使用 AspectRatioFrameLayout.RESIZE_MODE_FIT