如何在Compose中优化AndroidView与懒惰列表的布局组合

Question

我有两个问题，浏览lazycolumn或verticalpager androidview填充整个屏幕，因为屏幕上的项目滞后于屏幕和滚动行为。几毫秒以及重叠的物品。在我的代码中androidView创建Playerview，我还尝试用playerview textview来检查可能问题。与Playerview本身。我似乎无法完全找到问题的根源，也许使用androidView或实现verticalpager本身，还是因为它填充了整个屏幕？

viewScreen

@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
            )
        }
    }
}

videoplayer

@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()
        }
    }
}

rememberexoplayerwithlifecycle

@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
}

记住playplayerview

@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
}

build> build.gradle.gradle（project）

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

build。 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

使用expactratioframelayout.resize_mode_fit

Answer 2

我遇到了同样的问题，并将垂直码器更新为0.25.1外部词汇到2.18.1，并使用了StyledPlayerview而不是Playerview，并且似乎在起作用。

Answer 3

而不是将

resizeMode = AspectRatioFrameLayout.RESIZE_MODE_ZOOM

其替换为

resizeMode = AspectRatioFrameLayout.RESIZE_MODE_FIT
player.videoScalingMode = C.VIDEO_SCALING_MODE_SCALE_TO_FIT_WITH_CROPPING