Flutter中如何实现输入时始终显示TextField的hintText？

要实现输入时提示文本不消失、电话掩码短横线始终保留的TextField，可按以下步骤操作：

一、让提示文本始终显示 #

Flutter默认的hintText会在输入后消失，要实现固定提示，可通过Stack将TextField和静态提示文本叠加，让提示始终显示在输入框背景层（不遮挡输入内容）：

Stack(
  alignment: Alignment.centerLeft,
  children: [
    // 静态提示文本
    Padding(
      padding: const EdgeInsets.only(left: 16.0),
      child: Text(
        "+7 (XXX) XXX-XX-XX",
        style: TextStyle(color: Colors.grey[400]),
      ),
    ),
    // 输入框，隐藏默认hint
    TextField(
      decoration: InputDecoration(
        border: OutlineInputBorder(),
        contentPadding: EdgeInsets.only(left: 16.0),
        hintText: "", // 清空默认hint避免冲突
      ),
      inputFormatters: [
        MaskTextInputFormatter(
          mask: "+7 (###) ###-##-##",
          filter: {"#": RegExp(r'[0-9]')},
          type: MaskAutoCompletionType.lazy,
        ),
      ],
      keyboardType: TextInputType.phone,
    ),
  ],
)

二、保留电话掩码的短横线 #

使用flutter_masked_text包的MaskTextInputFormatter（需先添加依赖），通过掩码规则自动插入并保留分隔符：

1. 在pubspec.yaml添加依赖：

dependencies:
  flutter_masked_text: ^0.1.2

2. 代码中导入并使用：

import 'package:flutter_masked_text/flutter_masked_text.dart';

MaskTextInputFormatter会自动在指定位置插入(、)、-等分隔符，输入过程中这些符号不会被删除，仅替换#对应的数字位置。

效果说明 #

输入时，静态提示文本始终显示在背景层，输入的数字会覆盖提示文本对应位置，同时掩码分隔符自动保留，完全匹配需求。

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