如何让Flutter的TextFormField首行自动添加项目符号？

修改后的完整代码 #

class _EditHealthEventDialogState extends State<EditHealthEventDialog> {
  TextEditingController notesController = TextEditingController();

  @override
  void initState() {
    super.initState();
    // 初始化时为空则直接添加首行项目符号
    if (notesController.text.isEmpty) {
      notesController.text = '\u2022 ';
      notesController.selection = TextSelection.fromPosition(
        TextPosition(offset: notesController.text.length),
      );
    }

    notesController.addListener(() {
      final text = notesController.text;
      // 处理用户清空文本后重新输入的情况
      if (text.isEmpty) {
        notesController.text = '\u2022 ';
        notesController.selection = TextSelection.fromPosition(
          TextPosition(offset: notesController.text.length),
        );
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      maxLines: 3,
      autovalidateMode: AutovalidateMode.always,
      controller: notesController,
      onChanged: (value) {
        final text = notesController.text;
        // 新行自动添加项目符号
        if (text.isNotEmpty && text.endsWith('\n')) {
          notesController.text = '$text\u2022 ';
          notesController.selection = TextSelection.fromPosition(
            TextPosition(offset: notesController.text.length),
          );
        }
        // 防止用户删除首行的项目符号
        else if (text.isNotEmpty && !text.startsWith('\u2022 ')) {
          notesController.text = '\u2022 $text';
          notesController.selection = TextSelection.fromPosition(
            TextPosition(offset: notesController.text.length),
          );
        }
      },
      decoration: const InputDecoration(labelText: 'Notes', hintText: ''),
    );
  }
}

关键修改说明 #

• 初始化补全首行符号：在initState阶段直接判断文本为空的情况，自动添加项目符号并将光标定位到符号后，确保打开输入框时首行就有符号。
• 移除延迟逻辑：去掉原代码中的Future.delayed，避免输入时的滞后感，同步处理文本变更逻辑。
• 保护首行符号：新增判断逻辑，若用户手动删除首行的项目符号，自动重新添加，维持格式统一。
• 优化新行处理：检测到换行符后立即添加项目符号和空格，保证每新起一行都自动带上符号。
• 简化状态管理：移除原有的newLine状态变量，直接通过文本内容判断处理逻辑，减少冗余状态。

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