JetpackCompose从入门到实战学习笔记1—在compose中简单使用webview

JetpackCompose从入门到实战学习笔记1—在compose中简单使用webview

之前在JetpackCompose刚出来时简单学习过，这次是系统地学习，在双11买了JetpackCompose这本书，目前正在一章一章的看，感觉很有意思，本文讲解webview在Compose中的简单使用。

1.保持最新的Compose版本：

buildscript {
    ext {
        compose_version = '1.1.1'
    }
    repositories {
        google()
        mavenCentral()
        maven { url 'https://jitpack.io' }
        maven { url "https://maven.aliyun.com/repository/public" }
    }
}

2.简单的代码示例：

@Composable
fun WebViewPage(modifier: Modifier = Modifier, linkUrl: String) {
    Column(modifier = modifier.fillMaxSize()) {
        AndroidView(modifier = modifier.fillMaxSize(),
            factory = {
                val webView = WebView(it)
                webView.settings.javaScriptEnabled = true
                webView.settings.javaScriptCanOpenWindowsAutomatically = true
                webView.settings.domStorageEnabled = true
                webView.settings.loadsImagesAutomatically = true
                webView.settings.mediaPlaybackRequiresUserGesture = false
                webView.webViewClient = WebViewClient()
                webView.loadUrl(linkUrl)
                webView
            })
    }
}

3.完整的代码示例如下：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
                WebViewPage(modifier = Modifier.fillMaxSize(), linkUrl = "https://juejin.cn/android")
            }
        }
    }
}

@Composable
fun WebViewPage(modifier: Modifier = Modifier, linkUrl: String) {
    Column(modifier = modifier.fillMaxSize()) {
        AndroidView(modifier = modifier.fillMaxSize(),
            factory = {
                val webView = WebView(it)
                webView.settings.javaScriptEnabled = true
                webView.settings.javaScriptCanOpenWindowsAutomatically = true
                webView.settings.domStorageEnabled = true
                webView.settings.loadsImagesAutomatically = true
                webView.settings.mediaPlaybackRequiresUserGesture = false
                webView.webViewClient = WebViewClient()
                webView.loadUrl(linkUrl)
                webView
            })
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    WebViewPage(linkUrl = "https://juejin.cn/android")

4.实现的效果图如下：

5.demo的源码地址如下：

https://gitee.com/jackning_admin/compose-web-view-demo