Flutter中如何在TextField内同时显示固定文本与输入内容（附示例图）

方法一：利用InputDecoration的前缀/后缀文本 #

适合固定文本在输入框开头或结尾的场景，固定文本属于装饰区域，无法被用户编辑选中。

TextField(
  decoration: InputDecoration(
    prefixText: '¥', // 开头固定文本
    suffixText: '.00', // 结尾固定文本
    border: const OutlineInputBorder(),
  ),
)

方法二：自定义TextEditingController #

如果需要固定文本与用户输入完全融合，且用户无法修改固定内容，可通过自定义控制器实现。

class FixedTextController extends TextEditingController {
  final String fixedPrefix;
  final String fixedSuffix;

  FixedTextController({required this.fixedPrefix, required this.fixedSuffix}) {
    text = fixedPrefix + fixedSuffix;
  }

  @override
  set text(String newText) {
    // 保留固定前缀和后缀，仅处理中间用户输入部分
    final cleanText = newText.replaceAll(fixedPrefix, '').replaceAll(fixedSuffix, '');
    super.text = fixedPrefix + cleanText + fixedSuffix;
    // 将光标定位到固定前缀之后的可编辑区域
    selection = TextSelection.collapsed(offset: fixedPrefix.length + cleanText.length);
  }

  @override
  void updateEditingValue(TextEditingValue value) {
    final cleanText = value.text.replaceAll(fixedPrefix, '').replaceAll(fixedSuffix, '');
    final updatedText = fixedPrefix + cleanText + fixedSuffix;
    super.updateEditingValue(TextEditingValue(
      text: updatedText,
      selection: TextSelection.collapsed(offset: fixedPrefix.length + cleanText.length),
    ));
  }
}

// 使用示例
TextField(
  controller: FixedTextController(fixedPrefix: 'https://', fixedSuffix: '.com'),
)

方法三：Stack嵌套TextField与Text组件 #

适用于固定文本需要放在输入框内任意位置的场景，通过调整内边距避免输入内容遮挡固定文本。

Stack(
  alignment: Alignment.centerLeft,
  children: [
    TextField(
      decoration: InputDecoration(
        border: const OutlineInputBorder(),
        contentPadding: const EdgeInsets.only(left: 45), // 为固定文本预留空间
      ),
    ),
    const Padding(
      padding: EdgeInsets.only(left: 15),
      child: Text('ID：'),
    ),
  ],
)

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