🌟

JetpackComposeでWebViewを使う方法

2021/09/23に公開

Android

Jetpack Compose

tech

ComposeでのWebView

早速ですがComposeではWebView自体はサポートされていません(え？？？)

ですがComposeには従来のView機能をサポートする仕組みがあります。

こちらのAndroidViewですね。

val url = "https://hogehoge.com"

@Composable
fun WebViewWidget(
    url: String
) {
    AndroidView(
        factory = {
            WebView(it)
        },
	update = { webView ->
            webView.webViewClient = WebViewClient()
            webView.loadUrl(url)
        }
    )
}

WebViewをComposeで使用するための簡単なwidget

簡単に説明すると、

factoryで生成したWebViewをupdateで描画するというような感じ。

なのでもうちょっとカスタムしたい場合などはupdate部に色々書く。

update = { webView ->
            webView.apply {
                scrollBarStyle = WebView.SCROLLBARS_OUTSIDE_OVERLAY
                isScrollbarFadingEnabled = false
                webViewClient = WebViewClient()
            }
            webView.loadUrl(url)
        }

というような感じにすると、

スクロールバーを常に表示したWebViewにできる。

JetpackComposeでWebViewを使う方法

ComposeでのWebView

WebView Widget

参考記事

Discussion