如何在Flutter中实现HTML锚点跳转至页面指定区域？

要实现类似HTML中基于ID的锚点跳转功能，你可以按以下步骤操作：

1. 记录带ID元素的位置 #

首先在customWidgetBuilder中识别带id属性的元素，为它们绑定GlobalKey并将ID与Key关联存储：

final Map<String, GlobalKey> _anchorKeys = {};

// 在HtmlWidget的配置中
customWidgetBuilder: (element) {
  if (element.attributes.containsKey('id')) {
    final anchorId = element.attributes['id']!;
    final key = GlobalKey();
    _anchorKeys[anchorId] = key;
    // 用带Key的容器包裹元素内容
    return Builder(
      key: key,
      builder: (context) => HtmlWidget(
        element.outerHtml,
        customStylesBuilder: customStylesBuilder,
      ),
    );
  }
  return null; // 返回null使用默认渲染逻辑
},

2. 处理锚点链接点击 #

修改onTapUrl方法，判断是否为锚点链接（以#开头），若是则执行滚动跳转，否则继续用url_launcher处理外部链接：

onTapUrl: (url) async {
  if (url.startsWith('#')) {
    final targetId = url.substring(1);
    final targetKey = _anchorKeys[targetId];
    if (targetKey != null && targetKey.currentContext != null) {
      // 平滑滚动到目标元素位置
      await Scrollable.ensureVisible(
        targetKey.currentContext!,
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
      );
      return true; // 标记为已处理
    }
  }
  // 非锚点链接，调用url_launcher打开
  await launchUrlString(url);
  return true;
},

3. 确保页面可滚动 #

必须将HtmlWidget包裹在可滚动组件内（比如SingleChildScrollView），否则滚动跳转无法生效：

SingleChildScrollView(
  child: HtmlWidget(
    html ?? '',
    // 其他配置项...
  ),
)

完成以上配置后，点击HTML中的锚点链接，就能实现平滑滚动到对应ID元素位置的效果，和HTML原生锚点功能一致。

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