compose引用原来的自定义组件

最新推荐文章于 2025-07-29 10:01:25 发布

原创最新推荐文章于 2025-07-29 10:01:25 发布 · 300 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#kotlin #composer #android #前端

博客介绍了已有自定义组件在Compose中的使用方法。原项目的自定义组件稍作修改即可应用，如气泡进度条。可通过AndroidView对控件包装进行Composable改造，像webview也可如此操作，改造后能直接在@Composable函数中使用这些UI。

已有自定义组建

原有的项目有一些自定义的组建，在compose中也想使用的话，可以稍作一些修改直接应用
例如汽包进度条，引用了一个自定义组建
添加链接描述

进行Composable改造

通过 AndroidView 对控件进行包装

@Composable
fun ComposableSeekBar(
    modifier: Modifier,
    min: Float,
    max: Float,
    process: Float,
    firstVisibleItemScrollOffset: State<Int>,
    onProgressChange: (Int) -> Unit
) {

    val bubbleSeekBar = rememberBubbleSeekBar()

    bubbleSeekBar.onProgressChangedListener = object : BubbleSeekBar.OnProgressChangedListener {
        override fun onProgressChanged(
            bubbleSeekBar: BubbleSeekBar?,
            progress: Int,
            progressFloat: Float,
            fromUser: Boolean
        ) {

            if(fromUser){
                onProgressChange.invoke(progress)
            }
        }

        override fun getProgressOnActionUp(
            bubbleSeekBar: BubbleSeekBar?,
            progress: Int,
            progressFloat: Float
        ) {
        }

        override fun getProgressOnFinally(
            bubbleSeekBar: BubbleSeekBar?,
            progress: Int,
            progressFloat: Float,
            fromUser: Boolean
        ) {

        }

    }

    LaunchedEffect(Unit) {
        snapshotFlow {
            firstVisibleItemScrollOffset.value
        }.collect {
            bubbleSeekBar.correctOffsetWhenContainerOnScrolling()
        }
    }

    AndroidView(
        modifier = modifier,
        factory = {
            bubbleSeekBar
        },
        update = {
            bubbleSeekBar.initParam(
                min,
                max,
                process,
                8,
                4,
                8
//                8,
//                com.zkteco.cuswidget.R.color.colorPrimary,
//                com.zkteco.android.zkcore.R.color.colorPrimary,
//                com.zkteco.cuswidget.R.color.colorAccent
            )

        }
    )

}

@Composable
fun rememberBubbleSeekBar(): BubbleSeekBar {
    val context = LocalContext.current
    val bubbleSeekBar = remember {
        BubbleSeekBar(context)
    }
    return bubbleSeekBar
}

类似的还有，webview

@Composable
fun ComposableWebView(modifier: Modifier, url: String) {
    val webView = rememberWebViewWIthLifecycle()

    AndroidView(
        modifier = modifier,
        factory = { context ->
//            val webView = WebView(context)

            webView
        },
        update = { webView ->
            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(url)
        })
}

@Composable
private fun rememberWebViewLifecycleObserver(webView: WebView): LifecycleEventObserver {
    return remember(webView) {
        LifecycleEventObserver { _, event ->
            run {
                when (event) {
                    Lifecycle.Event.ON_RESUME -> webView.onResume()
                    Lifecycle.Event.ON_PAUSE -> webView.onPause()
                    Lifecycle.Event.ON_DESTROY -> webView.destroy()
                    else -> Log.e("WebView", event.name)
                }
            }
        }
    }
}

@Composable
fun rememberWebViewWIthLifecycle(): WebView {
    val context = LocalContext.current
    val webView = remember {
        WebView(context)
    }
    val lifecycleObserver = rememberWebViewLifecycleObserver(webView)
    val lifecycle = LocalLifecycleOwner.current.lifecycle
    DisposableEffect(lifecycle) {
        lifecycle.addObserver(lifecycleObserver)
        onDispose {
            lifecycle.removeObserver(lifecycleObserver)
        }
    }
    return webView
}

使用

然后就可以直接在 @Composable函数中使用这些UI
使用webbiew

                    Column(
                        modifier = Modifier.fillMaxSize(),
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        
                        ComposableWebView(
                            modifier = Modifier.fillMaxWidth(),
                            url = schoolNews.url
                        )
                       
                    }

或者

            item {
                SettingItem("音量") {
                    ComposableSeekBar(
                        modifier = Modifier.fillParentMaxWidth(0.7f).height(50.dp),
                        min = 0f,
                        max = maxVolume.toFloat(),
                        process = curVolume.toFloat(),
                        scrollOffsetState
                    ) { progress ->

                        mAudioManager.setStreamVolume(
                            AudioManager.STREAM_MUSIC, progress, 0
                        )
                    }
                }
            }