Flutter中如何为TextField的每行单独设置textAlign？

Flutter默认的TextField和EditableText并不支持逐行单独设置文本对齐，要实现Telegram那种行首语言方向决定对齐方式的效果，需要自定义文本的绘制逻辑，核心是拆分每行文本并根据行首字符的方向单独处理对齐。

核心思路 #

• 利用TextPainter获取文本的行信息（LineMetrics），拆分出每一行的实际内容；
• 对每一行的首字符，通过intl.Bidi.detectRtlDirectionality判断其语言方向；
• 自定义绘制逻辑，逐行根据方向设置对齐方式（RTL右对齐，LTR左对齐）；
• 结合EditableText（TextField的底层组件）保留输入交互能力，替换默认渲染逻辑。

代码实现示例 #

以下是一个简化的自定义输入组件，可直接实现需求：

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

class LineAlignedTextField extends StatefulWidget {
  final TextEditingController? controller;
  final TextStyle? style;
  final InputDecoration? decoration;

  const LineAlignedTextField({
    super.key,
    this.controller,
    this.style,
    this.decoration,
  });

  @override
  State<LineAlignedTextField> createState() => _LineAlignedTextFieldState();
}

class _LineAlignedTextFieldState extends State<LineAlignedTextField> {
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = widget.controller ?? TextEditingController();
    _controller.addListener(() => setState(() {}));
  }

  @override
  void dispose() {
    if (widget.controller == null) _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final defaultStyle = Theme.of(context).textTheme.bodyLarge!;
    final textStyle = widget.style ?? defaultStyle;

    return Stack(
      children: [
        // 隐藏的TextField负责处理输入交互（光标、键盘事件等）
        TextField(
          controller: _controller,
          style: textStyle.copyWith(color: Colors.transparent),
          decoration: widget.decoration?.copyWith(
            border: InputBorder.none,
            contentPadding: EdgeInsets.zero,
          ),
          maxLines: null,
          cursorColor: Theme.of(context).primaryColor,
        ),
        // 自定义绘制对齐后的文本
        CustomPaint(
          painter: _LineAlignedTextPainter(
            text: _controller.text,
            style: textStyle,
            textDirection: Directionality.of(context),
            contentPadding: widget.decoration?.contentPadding ?? EdgeInsets.zero,
          ),
          child: SizedBox.expand(),
        ),
      ],
    );
  }
}

class _LineAlignedTextPainter extends CustomPainter {
  final String text;
  final TextStyle style;
  final TextDirection textDirection;
  final EdgeInsets contentPadding;

  _LineAlignedTextPainter({
    required this.text,
    required this.style,
    required this.textDirection,
    required this.contentPadding,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final availableWidth = size.width - contentPadding.left - contentPadding.right;
    final textPainter = TextPainter(
      text: TextSpan(text: text, style: style),
      textDirection: textDirection,
      maxLines: null,
    )..layout(maxWidth: availableWidth);

    final lineMetrics = textPainter.computeLineMetrics();
    double currentY = contentPadding.top;

    for (final line in lineMetrics) {
      // 截取当前行文本，去除左侧空白后判断首字符方向
      final start = line.textStart;
      final end = line.textEnd;
      final lineText = text.substring(start, end).trimLeft();
      
      bool isRtl = lineText.isNotEmpty 
          ? Bidi.detectRtlDirectionality(lineText[0])
          : false;

      // 计算该行的水平偏移
      final lineWidth = line.width;
      double dx = contentPadding.left + (isRtl ? availableWidth - lineWidth : 0);

      // 绘制当前行
      textPainter.paint(
        canvas,
        Offset(dx, currentY),
        startOffset: start,
        endOffset: end,
      );

      currentY += line.height;
    }
  }

  @override
  bool shouldRepaint(covariant _LineAlignedTextPainter oldDelegate) {
    return text != oldDelegate.text || 
           style != oldDelegate.style ||
           contentPadding != oldDelegate.contentPadding;
  }
}

使用方式 #

直接在页面中引入该组件即可：

LineAlignedTextField(
  controller: TextEditingController(),
  style: TextStyle(fontSize: 16),
  decoration: InputDecoration(
    hintText: '输入内容...',
    border: OutlineInputBorder(),
    contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
  ),
)

注意事项 #

• 上述示例为基础实现，如需处理文本选择、光标自定义样式等复杂交互，需额外扩展逻辑；
• 需要在pubspec.yaml中添加intl包依赖：intl: ^0.18.1（版本可根据Flutter版本调整）；
• 若输入文本包含混合语言（同一行内既有RTL又有LTR），该逻辑仅根据行首判断整行对齐，如需更精细的字符级对齐，需结合TextSpan的textDirection属性拆分字符段。

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