我有一个简单的
WebPageView.kt
,我可以在我的应用程序中嵌入 Web 视图的其他页面中调用它。它与 LinearProgressIndicatorProgress 一起工作得很好,可以显示每个网页的进度条。
但是,当我尝试添加 PullRefreshIndicator 时,拉动刷新似乎不起作用。
我想知道我的代码有什么问题。
WebPageView.kt
@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterialApi::class)
@Composable
fun WebViewPage(url: String) {
val context = LocalContext.current
var isRefreshing by remember { mutableStateOf(false) }
//WEB-VIEW
val webView = remember(context) {
WebView(context).apply {
webViewClient = WebViewClient()
loadUrl(url)
settings.javaScriptEnabled = true
settings.useWideViewPort = true
setBackgroundColor(0x000000)
webChromeClient = object : WebChromeClient() {
override fun onProgressChanged(view: WebView?, newProgress: Int) {
LinearProgressIndicatorProgress = newProgress / 100f
}
}
}
}
val pullRefreshState = rememberPullRefreshState(
refreshing = isRefreshing,
onRefresh = {
isRefreshing = true
webView.reload()
}
)
//PROGRESS INDICATOR FOR WEB-VIEW
Surface(modifier = Modifier.fillMaxSize()) {
CompositionLocalProvider(LocalContext provides context) {
Box(
modifier = Modifier
.fillMaxSize()
.pullRefresh(pullRefreshState)
) {
Column(modifier = Modifier.fillMaxSize()) {
if (LinearProgressIndicatorProgress < 1f) {
LinearProgressIndicator(
progress = LinearProgressIndicatorProgress,
color = Color(0xffae52de),
modifier = Modifier.fillMaxWidth()
)
}
AndroidView(
factory = { webView },
modifier = Modifier.fillMaxSize()
)
}
//PULL-TO-REFRESH
PullRefreshIndicator(
refreshing = isRefreshing,
state = pullRefreshState,
contentColor = Color(0xffae52de),
modifier = Modifier.align(Alignment.TopCenter)
)
if (isRefreshing) {
Text(
text = "Pull to refresh",
color = Color(0xffae52de),
modifier = Modifier
.align(Alignment.TopCenter)
.padding(top = 60.dp) // Adjust the padding as needed
)
}
}
}
LaunchedEffect(webView) {
webView.webViewClient = object : WebViewClient() {
override fun onPageFinished(view: WebView?, url: String?) {
isRefreshing = false
}
}
}
}
}
private var LinearProgressIndicatorProgress by mutableStateOf(0f)
根据文档:
请注意,此修饰符必须添加到滚动容器(例如惰性列)之上,才能接收滚动事件。
Column
默认情况下不可滚动,您必须使用修饰符:
.verticalScroll(rememberScrollState())