如何在Flutter TextField中实现逐行按首字符切换文本方向？

可以通过Flutter原生组件实现该需求，核心思路是重写TextField的buildTextSpan方法，对文本按行拆分后，为每行单独判断并设置文本方向。

具体实现代码 #

首先导入依赖的dart包：

import 'dart:ui' show UnicodeScript;
import 'package:flutter/material.dart';

自定义支持双向文本的TextField：

class BidirectionalTextField extends TextField {
  BidirectionalTextField({
    super.key,
    super.controller,
    super.decoration,
    super.style,
    super.maxLines,
    super.minLines,
  });

  @override
  TextSpan buildTextSpan({
    required BuildContext context,
    TextStyle? style,
    required bool withComposing,
  }) {
    final displayText = controller?.text ?? '';
    final baseStyle = style ?? this.style ?? DefaultTextStyle.of(context).style;
    final textSpans = <TextSpan>[];

    // 按换行符拆分所有文本行
    final lines = displayText.split('\n');
    
    for (int i = 0; i < lines.length; i++) {
      final lineContent = lines[i];
      
      if (lineContent.isEmpty) {
        // 处理空行
        textSpans.add(TextSpan(text: '\n', style: baseStyle));
        continue;
      }

      // 取行内第一个非空白字符判断方向
      final firstNonBlankChar = lineContent.trimLeft().isNotEmpty 
          ? lineContent.trimLeft()[0] 
          : lineContent[0];
      final charScript = UnicodeScript.getCharScript(firstNonBlankChar.codeUnitAt(0));
      final lineDirection = _getTextDirection(charScript);

      // 为当前行创建带方向的TextSpan
      textSpans.add(TextSpan(
        text: lineContent,
        style: baseStyle,
        textDirection: lineDirection,
      ));

      // 非最后一行添加换行符
      if (i != lines.length - 1) {
        textSpans.add(TextSpan(text: '\n', style: baseStyle));
      }
    }

    return TextSpan(style: baseStyle, children: textSpans);
  }

  // 根据Unicode脚本判断文本方向
  TextDirection? _getTextDirection(UnicodeScript script) {
    switch (script) {
      case UnicodeScript.arabic:
      case UnicodeScript.hebrew:
      case UnicodeScript.persian:
      case UnicodeScript.urdu:
        return TextDirection.rtl;
      default:
        return TextDirection.ltr;
    }
  }
}

使用示例 #

在页面中直接使用这个自定义TextField即可：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('双向文本输入框')),
    body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: BidirectionalTextField(
        controller: TextEditingController(),
        decoration: const InputDecoration(hintText: '输入混合语言文本'),
        maxLines: null,
        minLines: 1,
      ),
    ),
  );
}

实现说明 #

1. 行拆分与方向判断：将文本按换行符拆分后，取每行第一个非空白字符的Unicode脚本，判断属于LTR还是RTL语言。
2. 自定义TextSpan：为每行单独创建TextSpan并设置对应的textDirection，确保每行按自身方向渲染。
3. 原生兼容：基于原生TextField扩展，保留所有原生TextField的属性和功能，无需依赖第三方库。

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