Flutter Html组件onLinkTap跳转页面遇RenderContext类型错误

问题根源是Html组件的onLinkTap回调中提供的context是RenderContext，而Navigator导航需要的是BuildContext，两者类型不兼容，直接使用就会报错。

解决方案1：直接使用当前BuildContext #

在build方法中，直接用方法参数里的BuildContext调用导航，无需依赖onLinkTap里的RenderContext：

@override
Widget build(BuildContext context) { // 这个context是正确的BuildContext
  return Html(
    data: '<a href="/profile">前往个人主页</a>',
    onLinkTap: (url, _, __, ___) {
      if (url == '/profile') {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => const ProfilePage()),
        );
      } else if (url != null) {
        // 外部链接继续用launchUrl处理
        launchUrl(Uri.parse(url));
      }
    },
  );
}

解决方案2：通过GlobalKey获取BuildContext #

如果组件结构复杂，直接传递context不方便，可用GlobalKey获取有效的BuildContext：

final GlobalKey _pageKey = GlobalKey();

@override
Widget build(BuildContext context) {
  return Scaffold(
    key: _pageKey,
    body: Html(
      data: '<a href="/settings">打开设置页面</a>',
      onLinkTap: (url, _, __, ___) {
        if (url == '/settings' && _pageKey.currentContext != null) {
          Navigator.push(
            _pageKey.currentContext!,
            MaterialPageRoute(builder: (context) => const SettingsPage()),
          );
        }
      },
    ),
  );
}

关键提示 #

永远不要用onLinkTap回调中的RenderContext参数做导航操作，它仅服务于HTML内容的渲染上下文，不具备导航所需的上下文能力。

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