Flutter 如何实现根据内容自动适配LTR/RTL的上下文文本方向

结论 #

可以实现，无需依赖全局文本方向配置，仅通过内容本身的字符特征即可动态决定文本的最终展示方向。

实现原理 #

基于双向文本的字符分类规则，拉丁字母、中文等属于LTR（从左到右）强方向字符，阿拉伯语、波斯语、希伯来语等属于RTL（从右到左）强方向字符，我们可以通过匹配字符串开头的首个强方向字符类型，动态给Text组件配置textDirection属性实现需求。如果遇到多语言混合的场景，双向文本内置算法会自动处理不同语言字符的展示顺序，符合常规阅读习惯。

代码实现 #

1. 先编写文本方向检测工具函数 #

TextDirection detectTextDirection(String text) {
  // 匹配RTL强字符覆盖范围：阿拉伯、波斯、希伯来等RTL语言字符
  final rtlRegex = RegExp(r'^[\p{Script=Arabic}\p{Script=Hebrew}]+', unicode: true);
  final trimmedText = text.trim();
  if (trimmedText.isNotEmpty && rtlRegex.hasMatch(trimmedText)) {
    return TextDirection.rtl;
  }
  return TextDirection.ltr;
}

2. 改造原有代码使用检测逻辑 #

Column(
  children: <Widget>[
    Text(
      'English',
      textDirection: detectTextDirection('English'),
    ), // 自动识别为LTR方向
    Text(
      'فارسی',
      textDirection: detectTextDirection('فارسی'),
    ), // 自动识别为RTL方向
    Text(
      stringVriableMaybeLtrMaybeRtl,
      textDirection: detectTextDirection(stringVriableMaybeLtrMaybeRtl),
    ), // 自动根据内容判断方向
  ],
)

3. 可选：封装通用自动方向Text组件 #

如果需要高频使用该能力，可以直接封装通用组件减少重复代码：

class AutoDirectionText extends StatelessWidget {
  final String data;
  final TextStyle? style;
  final int? maxLines;
  final TextOverflow? overflow;
  // 可根据需求补充其他Text组件支持的参数

  const AutoDirectionText(
    this.data, {
    super.key,
    this.style,
    this.maxLines,
    this.overflow,
  });

  @override
  Widget build(BuildContext context) {
    return Text(
      data,
      style: style,
      maxLines: maxLines,
      overflow: overflow,
      textDirection: detectTextDirection(data),
    );
  }
}

封装后使用方式如下：

Column(
  children: <Widget>[
    const AutoDirectionText('English'),
    const AutoDirectionText('فارسی'),
    AutoDirectionText(stringVriableMaybeLtrMaybeRtl),
  ],
)

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