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

559 阅读1分钟

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

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

1.保持最新的compose版本:

image.png

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.实现的效果图如下:

image.png

5.demo的源码地址如下:

gitee.com/jackning_ad…