如何从非Composable回调打开Jetpack Compose的WebViewScreen组件？

你遇到的核心问题是：Button的onClick属于非Composable上下文，无法直接调用带@Composable注解的函数或lambda。下面提供两种可行的解决方式：

方案一：通过状态控制WebView的显示/隐藏 #

在父组件中维护状态，用状态触发WebViewScreen的渲染，而非直接在回调中调用Composable函数。

修改后的代码示例 #

@AndroidEntryPoint
class MainActivity : ComponentActivity() {

    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val newsViewModel: NewsViewModel = hiltViewModel()
            val newsHeadLines = newsViewModel.newsPager.collectAsLazyPagingItems()
            // 新增状态：控制WebView是否显示、当前加载的链接
            var showWebView by remember { mutableStateOf(false) }
            var currentWebLink by remember { mutableStateOf("") }

            BeerPagingTheme {
                val scrollBehavior = enterAlwaysScrollBehavior()

                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    NewsScreen(
                        newsPagingData = newsHeadLines,
                        modifier = Modifier
                            .fillMaxSize()
                            .nestedScroll(connection = scrollBehavior.nestedScrollConnection),
                        topAppBarScrollBehavior = scrollBehavior,
                        onNewsLinkedClicked = { newsLink ->
                            // 更新状态，触发WebView显示
                            currentWebLink = newsLink
                            showWebView = true
                        }
                    )

                    // 根据状态渲染WebView，用Dialog包裹实现弹窗效果（也可直接全屏覆盖）
                    if (showWebView) {
                        Dialog(onDismissRequest = { showWebView = false }) {
                            WebViewScreen(webLink = currentWebLink)
                        }
                    }
                }
            }
        }
    }
}

// WebViewScreen保持不变
@Composable
fun WebViewScreen(webLink: String) {
    AndroidView(
        factory = { context ->
            WebView(context).apply {
                layoutParams = ViewGroup.LayoutParams(
                    LayoutParams.MATCH_PARENT,
                    LayoutParams.MATCH_PARENT
                )
                loadUrl(webLink)
            }
        },
        update = { webView ->
            webView.loadUrl(webLink)
        },
        modifier = Modifier.fillMaxSize()
    )
}

// NewsScreen的回调声明改为普通lambda（无需@Composable）
@Composable
fun NewsScreen(
    // 其他参数...
    onNewsLinkedClicked: (String) -> Unit
) {
    // 内部Button的onClick直接调用回调
    Button(onClick = { onNewsLinkedClicked("https://example.com/news") }) {
        Text("打开新闻链接")
    }
}

方案二：使用Navigation Compose实现页面跳转 #

如果需要全屏的WebView页面，推荐使用Jetpack Navigation组件，将WebViewScreen作为独立的导航目的地。

步骤1：添加Navigation依赖（如果未添加） #

在build.gradle中添加：

implementation "androidx.navigation:navigation-compose:2.7.7"

步骤2：修改代码实现导航 #

@AndroidEntryPoint
class MainActivity : ComponentActivity() {

    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val newsViewModel: NewsViewModel = hiltViewModel()
            val newsHeadLines = newsViewModel.newsPager.collectAsLazyPagingItems()
            // 创建导航控制器
            val navController = rememberNavController()

            BeerPagingTheme {
                val scrollBehavior = enterAlwaysScrollBehavior()

                // 定义导航图
                NavHost(navController = navController, startDestination = "news_screen") {
                    composable("news_screen") {
                        NewsScreen(
                            newsPagingData = newsHeadLines,
                            modifier = Modifier
                                .fillMaxSize()
                                .nestedScroll(connection = scrollBehavior.nestedScrollConnection),
                            topAppBarScrollBehavior = scrollBehavior,
                            onNewsLinkedClicked = { newsLink ->
                                // 导航到WebView页面，传递链接参数
                                navController.navigate("web_view_screen/$newsLink")
                            }
                        )
                    }
                    // 定义WebView页面，接收链接参数
                    composable(
                        route = "web_view_screen/{webLink}",
                        arguments = listOf(navArgument("webLink") { type = NavType.StringType })
                    ) { backStackEntry ->
                        val webLink = backStackEntry.arguments?.getString("webLink") ?: ""
                        WebViewScreen(webLink = webLink)
                    }
                }
            }
        }
    }
}

// WebViewScreen保持不变
@Composable
fun WebViewScreen(webLink: String) {
    AndroidView(
        factory = { context ->
            WebView(context).apply {
                layoutParams = ViewGroup.LayoutParams(
                    LayoutParams.MATCH_PARENT,
                    LayoutParams.MATCH_PARENT
                )
                loadUrl(webLink)
            }
        },
        update = { webView ->
            webView.loadUrl(webLink)
        },
        modifier = Modifier.fillMaxSize()
    )
}

// NewsScreen的回调声明为普通lambda
@Composable
fun NewsScreen(
    // 其他参数...
    onNewsLinkedClicked: (String) -> Unit
) {
    Button(onClick = { onNewsLinkedClicked("https://example.com/news") }) {
        Text("打开新闻链接")
    }
}

为什么之前的方法会出错？ #

• 直接在回调中调用WebViewScreen：WebViewScreen是@Composable函数，只能在其他@Composable函数或带@Composable注解的lambda中调用，而你最初的回调是普通lambda，不属于Composable上下文，因此报错。
• 将回调声明为@Composable (String) -> Unit：此时这个lambda只能在Composable上下文里调用，但Button的onClick是普通非Composable函数，无法调用带@Composable的lambda，因此出现新错误。

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