Flutter实现类WhatsApp可点击日期时间文本，求类似Chrono的Dart库

针对你要在用户生成文本块中实现类似WhatsApp的可点击日期/时间片段的需求，这里有现成的Dart库替代JavaScript的Chrono，能直接处理多语言、多样化的自然语言时间表述（比如“3天后”“周五”“3 Tagen”这类），附具体实现方案：

对标Chrono的Dart库 #

• chrono_dart：这是JavaScript Chrono的官方Dart移植版本，支持多语言（含中文、德语等），能精准识别自然语言里的模糊时间、相对时间、具体日期时间等各类表述。
• natural_date_parser：轻量型自然语言日期解析库，适配移动端场景，支持多种语言的常见时间表述，体积更小。

结合Flutter实现可点击片段的步骤 #

1. 解析文本中的时间实体 #

用上述库扫描用户输入的文本，提取所有匹配的时间片段、位置及对应的DateTime对象。以chrono_dart为例：

import 'package:chrono_dart/chrono_dart.dart';

final userText = "明天下午3点开会，或者3天后的周五也行，德语表述是3 Tagen später";
final parseResults = Chrono.parse(userText, locale: ['zh', 'de']);

每个parseResults里的对象会包含匹配的文本内容、起止索引、解析后的DateTime值。

2. 构建带点击事件的富文本 #

遍历解析结果，把原文本拆成普通文本片段和可点击的时间片段，给时间片段添加手势识别器和样式：

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

List<TextSpan> buildClickableTimeSpans(String text, List<ParseResult> results) {
  final spans = <TextSpan>[];
  int currentPos = 0;

  for (final result in results) {
    // 插入匹配前的普通文本
    if (result.start > currentPos) {
      spans.add(TextSpan(text: text.substring(currentPos, result.start)));
    }
    // 插入可点击的时间片段
    spans.add(TextSpan(
      text: result.text,
      style: const TextStyle(
        color: Colors.blue,
        decoration: TextDecoration.underline,
      ),
      recognizer: TapGestureRecognizer()
        ..onTap = () {
          // 点击后的自定义逻辑，比如弹出日程编辑框、展示时间详情
          debugPrint("点击了时间: ${result.start}");
        },
    ));
    currentPos = result.end;
  }
  // 插入剩余的普通文本
  if (currentPos < text.length) {
    spans.add(TextSpan(text: text.substring(currentPos)));
  }
  return spans;
}

3. 在Widget中使用富文本 #

把生成的TextSpan传入RichText组件即可：

RichText(
  text: TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: buildClickableTimeSpans(userText, parseResults),
  ),
)

注意事项 #

• 初始化解析库时记得指定目标语言列表，确保多语言时间表述都能被识别。
• 处理长文本时建议异步解析，避免阻塞UI线程。
• 可点击片段的样式尽量贴近WhatsApp的蓝色下划线风格，符合用户使用习惯。

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