在Compose中,我遇到了一个问题,即将WebView放入可滚动元素(如LazyColumn)中,它将不会实现嵌套滚动并卡住。 解决此问题的一种方法是使用拆分布局,将WebView与可滚动元素分离,并使用Android WebView中的内置滚动。 以下是一个示例代码,演示了如何实现此解决方案:
@Composable fun WebViewDemo() { val webView = remember { WebView(getCurrentActivity()) } val webSettings = webView.settings webSettings.javaScriptEnabled = true
Column {
Text("Header")
LazyColumn(
modifier = Modifier
.weight(1f)
.fillMaxWidth()
) {
items(20) {
Text("item -$it")
}
}
Box(
modifier = Modifier
.weight(1f)
.fillMaxWidth()
.height(200.dp)
) {
AndroidView(
modifier = Modifier.fillMaxSize(),
factory = { webView }
)
VerticalScrollbar(
modifier = Modifier.align(Alignment.CenterEnd)
.fillMaxHeight(),
adapter = rememberScrollbarAdapter(webView),
style = LocalScrollbarStyle.current
)
}
}
}
这个实现方法将在正常嵌套滚动后立即启动WebView内部滚动,并在它到达边界时使用可滚动元素重新整合。