如何通过Jetpack Compose Accompanist拦截WebView的Toggle交互

当然可行，Accompanist的WebView组件在onCreated回调中会暴露原生Android WebView实例，你完全可以在这个回调里调用addJavascriptInterface方法实现JS与原生的交互。

具体实现步骤： #

1. 定义JS交互接口类
   先创建一个带@JavascriptInterface注解的类，用来接收Web页面Toggle开关的交互事件：

class WebToggleInterface(private val onToggleCallback: (Boolean) -> Unit) {
    @JavascriptInterface
    fun onToggleStateChanged(isChecked: Boolean) {
        // 将Web端的Toggle状态回调到原生逻辑
        onToggleCallback(isChecked)
    }
}

2. 在Accompanist WebView中添加接口
   在你现有的onCreated回调里，调用原生WebView的addJavascriptInterface方法：

WebView(
    state = state,
    modifier = Modifier.weight(1f),
    onCreated = { webView ->
        webView.settings.javaScriptEnabled = true
        // 添加JS交互接口
        webView.addJavascriptInterface(
            WebToggleInterface { isChecked ->
                // 这里处理Toggle开关的状态变化逻辑
                // 比如更新Compose状态、触发原生操作等
                println("Web Toggle状态：$isChecked")
            },
            "AndroidToggleHandler" // 这个名称是Web端调用时要用的标识
        )
    },
    client = webClient
)

3. Web页面中调用原生接口
   在Web页面的Toggle开关的change事件中，调用我们定义的原生接口：

// 假设你的Toggle元素是id为toggleSwitch的checkbox
document.getElementById('toggleSwitch').addEventListener('change', function() {
    // 调用原生Android端的接口方法
    window.AndroidToggleHandler.onToggleStateChanged(this.checked);
});

注意事项： #

• 必须给接口方法加上@JavascriptInterface注解，否则Web端无法调用
• 接口类的方法必须是public的（Kotlin中默认就是public）
• 确保已经开启了javascriptEnabled（你的代码中已经设置，没问题）

内容的提问来源于stack exchange，提问作者Chait