Flutter中如何创建支持自动方向的多行文本输入框

嘿，我完全懂你想要的那种效果——一个能自动识别输入文本方向（比如从左到右/从右到左）的多行文本输入框对吧？刚好有个实用的实现方案，咱们一步步来搞定它：

核心思路 #

我们需要用TextField（或TextFormField）结合状态管理，监听输入文本的变化，自动判断文本的方向并实时更新输入框的文本方向，同时开启多行输入的支持。

完整实现代码 #

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

class AutoDirectionMultiLineTextField extends StatefulWidget {
  const AutoDirectionMultiLineTextField({super.key});

  @override
  State<AutoDirectionMultiLineTextField> createState() => _AutoDirectionMultiLineTextFieldState();
}

class _AutoDirectionMultiLineTextFieldState extends State<AutoDirectionMultiLineTextField> {
  final TextEditingController _textController = TextEditingController();
  TextDirection _currentTextDirection = TextDirection.ltr;

  @override
  void initState() {
    super.initState();
    // 监听文本变化，自动调整方向
    _textController.addListener(_updateTextDirection);
  }

  void _updateTextDirection() {
    final inputText = _textController.text;
    if (inputText.isEmpty) {
      // 文本为空时默认左到右，也可以改成跟随系统默认方向
      setState(() => _currentTextDirection = TextDirection.ltr);
      return;
    }

    // 取第一个非空白字符来判断方向
    final firstValidChar = inputText.trimLeft().isNotEmpty 
        ? inputText.trimLeft()[0] 
        : inputText[0];
    
    final charDirection = CharacterDirectionality.getDirectionality(firstValidChar);
    setState(() {
      _currentTextDirection = charDirection == CharacterDirectionality.RIGHT_TO_LEFT
          ? TextDirection.rtl
          : TextDirection.ltr;
    });
  }

  @override
  void dispose() {
    _textController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _textController,
      maxLines: null, // 开启多行输入
      textDirection: _currentTextDirection,
      decoration: const InputDecoration(
        border: OutlineInputBorder(),
        hintText: '输入文本试试（支持自动方向）',
        contentPadding: EdgeInsets.all(12),
      ),
    );
  }
}

关键细节说明 #

• 多行支持：通过设置maxLines: null，输入框会根据内容自动扩展行数，完全满足多行文本输入需求。
• 自动方向判断：利用CharacterDirectionality.getDirectionality()方法，能准确识别字符的书写方向（比如阿拉伯语、希伯来语字符会被判定为RTL，英文、中文等为LTR），每次文本变化时都会自动更新输入框的方向。
• 状态管理：用StatefulWidget维护文本方向的状态，确保输入框能实时响应文本方向的变化。

你可以直接把这个组件放到你的页面里使用，比如在Scaffold的body中添加AutoDirectionMultiLineTextField()就能看到效果啦～

备注：内容来源于stack exchange，提问作者shapoor molaee