当内容伴奏 webview 时，Jetpack Compose TabRow 闪烁

Question

当使用 webview 作为内容的 compose tabBar 实现时，我遇到闪烁或重叠。如果我用另一个视图（例如 Box{Text}）更改网络视图，则不会发生这种情况。

似乎 web 视图在短时间内填充的内容超过了边框（请参见下面的 .gif）

更新：我一直在研究这是否是一个重组问题（因此是简单的测试项目），并且我无法确定它应该重组选项卡栏的任何原因。当我向选项卡栏添加高度时，我可以看到文本始终位于选项卡栏中。

可以在此处获取测试项目： https: //github.com/msuhl/ComposeTabTest，它是一个非常标准的实现

@Composable
private fun MyTabRow(
    pagerState: PagerState,
    coroutineScope: CoroutineScope,
) {
    TabRow(
        selectedTabIndex = pagerState.currentPage,
        indicator = { tabPositions ->
            TabRowDefaults.Indicator(
                Modifier.pagerTabIndicatorOffset(pagerState, tabPositions),
                color = MaterialTheme.colors.secondary
            )
        },
        ) {
        tabRowItems.forEachIndexed { index, item ->
            Tab(
                selected = pagerState.currentPage == index,
                onClick = { coroutineScope.launch { pagerState.animateScrollToPage(index) } },
                icon = {
                    Icon(imageVector = item.icon, contentDescription = "")
                },
                text = {
                    Text(
                        text = item.title,
                        maxLines = 2,
                        overflow = TextOverflow.Ellipsis,
                    )
                },
                )
        }
    }
    HorizontalPager(
        count = tabRowItems.size,
        state = pagerState,
    ) {
        ShowWebView("http://google.com")

    }
}

Answer 1

我参加聚会迟到了，但因为它可能会帮助来自谷歌的其他人：另一种解决方法可能是Modifier.clip(RectangleShape)在 WebView 上使用。

我遇到过类似的情况，我的根 LazyColumn（包含多个项目，包括 WebView）最初会将 WebView 显示得更大（即使使用时.height(X.dp)），从而推低其他项目。当内容加载完成后，所有内容都会再次跳起（也会导致相同的闪烁）。

除了您的解决方法（在我已经存在的 LazyColumn 中使用另一个 LazyColumn）之外，我还可以通过modifier = Modifier.height(X.dp).clip(RectangleShape)在 WebView 上使用来解决它

不管怎样，谢谢你提出这个问题。它帮助我查明问题的原因:)