android-jetpack-compose - 当内容伴奏 webview 时，Jetpack Compose TabRow 闪烁

Question

在使用 webview 作为内容的 compose tabBar 实现时，我遇到了闪烁或重叠。如果我用另一个 View (例如 Box{Text})更改 WebView ，则不会发生。

似乎 web View 在短时间内填充的内容超过了边框(请参见下面的 .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

我迟到了，但因为它可能会帮助来自 google 的其他人:另一个解决方法可能是在 WebView 上使用 Modifier.clip(RectangleShape)。

我也遇到过类似的情况，我的根 LazyColumn(包含多个项目，包括 WebView)最初会将 WebView 显示得更大(即使使用 .height(X.dp))，插入放下其他元素。当内容加载完成后，所有内容都会再次跳起来(也会导致同样的闪烁)。

除了您的解决方法(在我现有的 LazyColumn 中使用另一个 LazyColumn)之外，我还可以通过在网页 View

无论如何，谢谢你提出这个问题。它帮助我查明问题的原因:)