Flutter中如何添加初始值且禁止修改初始值，仅允许追加内容？

这问题我之前帮开发者处理过，要让https://这个初始前缀不能被用户修改，只能在后面追加内容，用TextInputFormatter就能完美解决，既保证前缀的完整性，又不影响用户后续输入。

核心思路 #

自定义一个输入格式化器，拦截所有输入操作，强制文本始终以https://开头：

• 当用户尝试删除前缀的任何字符时，自动恢复前缀
• 当用户在前缀前输入内容时，自动把这些内容移到前缀后面
• 确保光标始终定位在前缀之后，引导用户正确输入

完整代码实现 #

首先定义自定义的输入格式化器：

class PrefixLockedFormatter extends TextInputFormatter {
  final String fixedPrefix;

  PrefixLockedFormatter(this.fixedPrefix);

  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    // 空文本时直接返回前缀
    if (newValue.text.isEmpty) {
      return TextEditingValue(text: fixedPrefix);
    }

    // 检查新文本是否以固定前缀开头
    if (!newValue.text.startsWith(fixedPrefix)) {
      // 保留前缀，将用户输入的有效内容追加到后面
      final correctedText = fixedPrefix + newValue.text.replaceAll(fixedPrefix, '');
      // 计算光标位置：如果光标在前缀范围内，自动移到前缀末尾
      final correctedCursorPosition = newValue.selection.end < fixedPrefix.length
          ? fixedPrefix.length
          : fixedPrefix.length + (newValue.selection.end - (newValue.text.contains(fixedPrefix) ? fixedPrefix.length : 0));

      return TextEditingValue(
        text: correctedText,
        selection: TextSelection.collapsed(offset: correctedCursorPosition),
      );
    }

    // 符合要求的输入直接返回
    return newValue;
  }
}

然后在你的Widget中使用这个格式化器：

class FixedPrefixUrlField extends StatefulWidget {
  @override
  _FixedPrefixUrlFieldState createState() => _FixedPrefixUrlFieldState();
}

class _FixedPrefixUrlFieldState extends State<FixedPrefixUrlField> {
  final TextEditingController _myController = TextEditingController(text: "https://");

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _myController,
      inputFormatters: [PrefixLockedFormatter("https://")],
      decoration: const InputDecoration(
        labelText: "输入网址",
        hintText: "例如：example.com",
      ),
      onChanged: (url) {
        // 这里可以获取完整的带前缀的URL，满足你print(url)的需求
        print(url); // 输出格式为 https://用户输入的内容
      },
    );
  }

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

效果说明 #

• 用户无法删除或修改https://的任何字符，哪怕选中前缀删除，格式化器也会自动恢复
• 用户在任意位置输入内容，最终都会被追加到https://后面
• 光标会自动定位到前缀末尾，引导用户从正确的位置开始输入

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