如何在TextField中实现文本溢出时显示省略号(ellipsis)

TextField不像Text组件那样直接支持TextOverflow.ellipsis属性，但可以通过以下两种方案实现输入文本超出控件宽度时显示省略号的效果：

方案一：Stack叠加文本层（快速实现） #

通过Stack将一个带省略号效果的静态Text组件叠在TextField上方，让TextField仅保留输入交互，文本显示交给静态Text处理：

// 先定义控制器
final TextEditingController _inputController = TextEditingController();

// 构建UI
Stack(
  alignment: Alignment.centerLeft,
  children: [
    // 负责显示带省略号的文本
    Text(
      _inputController.text,
      overflow: TextOverflow.ellipsis,
      maxLines: 1,
      style: const TextStyle(
        color: Colors.black,
        fontSize: 16,
      ),
    ),
    // 透明文本的TextField，仅处理输入逻辑
    TextField(
      controller: _inputController,
      style: const TextStyle(color: Colors.transparent),
      decoration: const InputDecoration(
        border: OutlineInputBorder(),
        contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      ),
      maxLines: 1,
      onChanged: (_) => setState(() {}), // 触发文本层更新
    ),
  ],
)

注意：要保证Text和TextField的字体、内边距完全一致，避免显示错位。

方案二：TextPainter动态计算（精准控制） #

通过TextPainter实时计算文本宽度，当超出控件可用宽度时手动截断并添加省略号，同时保留完整输入内容在控制器中：

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

  @override
  State<EllipsisTextField> createState() => _EllipsisTextFieldState();
}

class _EllipsisTextFieldState extends State<EllipsisTextField> {
  final TextEditingController _controller = TextEditingController();
  String _displayText = '';
  late final TextPainter _textPainter;

  @override
  void initState() {
    super.initState();
    _textPainter = TextPainter(
      textDirection: TextDirection.ltr,
      maxLines: 1,
    );
    _controller.addListener(_updateDisplayText);
  }

  void _updateDisplayText() {
    setState(() {
      const textStyle = TextStyle(fontSize: 16);
      _textPainter.text = TextSpan(text: _controller.text, style: textStyle);
      // 计算控件可用宽度（根据实际布局调整边距值）
      final availableWidth = MediaQuery.of(context).size.width - 48;
      _textPainter.layout(maxWidth: availableWidth);

      if (_textPainter.didExceedMaxLines) {
        // 获取可显示的文本截止位置，添加省略号
        final cutOffPos = _textPainter.getPositionForOffset(Offset(availableWidth - 20, 0));
        _displayText = '${_controller.text.substring(0, cutOffPos.offset)}...';
      } else {
        _displayText = _controller.text;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      decoration: InputDecoration(
        border: const OutlineInputBorder(),
        hintText: '请输入内容',
        contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
        // 用截断后的文本作为显示内容
        prefix: Text(
          _displayText,
          style: const TextStyle(fontSize: 16, color: Colors.black),
        ),
        // 隐藏原始输入文本
        counterText: '',
      ),
      style: const TextStyle(color: Colors.transparent),
      maxLines: 1,
    );
  }

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

这种方案适合需要更精准控制截断逻辑的场景，比如自定义省略号位置、调整截断阈值等。

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