Flutter中如何实现输入'ab'时自动显示'applebanana'单字？

可以通过TextEditingController监听输入文本变化，实现输入'ab'时自动替换为'applebanana'的功能，具体实现代码如下：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('自动替换输入示例')),
        body: const Padding(
          padding: EdgeInsets.all(16.0),
          child: AutoReplaceTextField(),
        ),
      ),
    );
  }
}

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

  @override
  State<AutoReplaceTextField> createState() => _AutoReplaceTextFieldState();
}

class _AutoReplaceTextFieldState extends State<AutoReplaceTextField> {
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
    _controller.addListener(_onTextChanged);
  }

  void _onTextChanged() {
    final currentText = _controller.text;
    // 检测输入末尾是否为'ab'，触发替换
    if (currentText.endsWith('ab')) {
      final newText = currentText.replaceRange(
        currentText.length - 2,
        currentText.length,
        'applebanana',
      );
      // 更新文本并将光标定位到末尾
      _controller.value = _controller.value.copyWith(
        text: newText,
        selection: TextSelection.collapsed(offset: newText.length),
      );
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      decoration: const InputDecoration(
        hintText: '输入ab试试',
        border: OutlineInputBorder(),
      ),
    );
  }
}

关键说明： #

• 借助TextEditingController.addListener实时监听输入内容变化
• 匹配到目标输入'ab'后，通过字符串替换操作完成内容替换
• 使用controller.value.copyWith同步更新文本与光标位置，避免光标异常跳转
• 若需要支持更复杂的匹配规则（比如文本中间出现'ab'也替换），可以将判断逻辑改为正则表达式全局匹配替换

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