У меня есть простой WebPageView.kt, который я могу использовать на других страницах, встраивающих веб-просмотры в мое приложение. С 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())
Ух ты, я этого не заметил. Я очень благодарен. Простите за невежество, но где конкретно мне следует использовать модификатор? Поскольку единственный столбец, который я вижу, — это столбец LinearProgressIndicator? 🙏🏻
Ой, минутку… мне нужно обернуть if (isRefreshing) {..} в ленивый столбец и применить модификатор, пожалуйста?
Просто добавьте этот модификатор к единственному Column, который у вас есть. @Мэри Кей
Хорошо, попробую. 🙏🏻🙂
Это сработало! Как чудесно! Как мне позволить WebView опуститься, когда PullRefresh срабатывает? Значок PullRefresh с текстом Pull to Refresh отображается поверх просмотра веб-страницы. Я бы хотел, чтобы представление веб-страницы могло немного опуститься, чтобы появилось немного пустого пространства с текстом PullRefreshIndicator и Pull to Refresh, и вернуться обратно после завершения, пожалуйста. 🙏🏼
Просто переместите if с этим текстом между LinearProgressIndicator и AndroidView? @Мэри Кей
Есть мысли по этому поводу, пожалуйста?