在 android jetpack compose 中触发状态变化事件

Question

我有一个 Web 视图和一个 TextField。我想在 textField 触发 onGo 动作或其值更改时触发 Web 视图重新加载。

下面是可变字符串：

var urlValue: MutableState<String> = mutableStateOf(DefaultUrl)

textField 看起来像这样

var textFieldValue by remember { mutableStateOf(DefaultUrl) }

val textStyle = androidx.compose.ui.text.TextStyle(
    fontSize = ToolbarUrlFontSize.sp
)

BasicTextField(
    value = textFieldValue,
    onValueChange = { text ->
        textFieldValue = text
    },
   
    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Go),
    keyboardActions = KeyboardActions(
        onGo = {
            urlValue.value = textFieldValue
        }
    )
) { innerTextField ->
    innerTextField()
}

下面是网页视图的代码：

AndroidView({ context ->
    WebView(context).apply {
        if(urlValue.value.isNotEmpty()) {
            Log.i("TAG", "MainComposable: ${urlValue.value}")
            loadUrl(urlValue.value)
        }

        webViewClient = object : WebViewClient() {
            override fun shouldOverrideUrlLoading(
                view: WebView,
                url: String
            ): Boolean {
                view.loadUrl(url)
                return false
            }
        }
    }
}

但是网络视图不会重新加载新的 URL。如何在移动操作触发器上执行新的 URL 加载？

Answer 1

您可以使用 update 属性.
类似于：

    AndroidView(
        factory = {
            WebView(it).apply {
                this.webViewClient  =  WebViewClient()
                this.loadUrl("defaultUrl")
            }
        },
        update = {
            it.loadUrl(urlValue)
        },
    )

Answer 2

检查以下代码以在 WebView 中呈现：

@SuppressLint("SetJavaScriptEnabled")
@Composable
fun WebPageScreen(urlToRender: String) {
    AndroidView(factory = {
        WebView(it).apply {
            webViewClient = object : WebViewClient() {
                override fun shouldOverrideUrlLoading(
                    view: WebView?,
                    request: WebResourceRequest?
                ): Boolean {
                    return false
                }
            }
        }
    }, update = {
        it.loadUrl(urlToRender)
    })
}

AndroidView() 可组合函数的 update 块在布局膨胀后调用。

在 android jetpack compose 中触发状态变化事件

Trigger event on state change, in android jetpack compose

android

kotlin

android-webview

android-jetpack-compose