Flutter如何实现不可编辑且支持文本拖拽的TextFormField

问题的核心原因是enabled: false会让TextFormField进入完全不可交互状态，内部文本的拖拽滚动能力会被直接屏蔽。不需要禁用组件，使用只读模式即可同时满足所有需求：

• 禁止用户直接输入修改文本
• 保留长文本的横向拖拽滚动能力
• 正常响应点击跳转逻辑

具体修改步骤 #

• 移除外层包裹的GestureDetector，避免手势识别冲突，直接将跳转逻辑写在TextFormField自带的onTap回调中
• 删除enabled: false配置，替换为readOnly: true：该模式下输入框不会唤起软键盘、不接受用户输入修改，但会保留全部基础交互能力
• 可选配置：如果不需要用户长按弹出文本复制/选择菜单，可添加enableInteractiveSelection: false，该配置不会影响文本滚动效果
• 修正原代码中Padding组件缺失padding参数的语法问题

修改后完整代码 #

TextFormField(
  controller: controller,
  // 核心：开启只读模式
  readOnly: true,
  // 可选：关闭长按照文本选菜单
  enableInteractiveSelection: false,
  // 直接在组件上绑定点击跳转逻辑
  onTap: () => Navigator.pushNamed(context, NamedRoutes.breedScreenRoute),
  decoration: InputDecoration(
    suffixIcon: Padding(
      padding: const EdgeInsets.all(8.0),
      child: SvgPicture.asset(
        "assets/images/forwardArrow.svg",
        fit: BoxFit.scaleDown,
      ),
    ),
    contentPadding:
        const EdgeInsets.symmetric(horizontal: 14.0, vertical: 15.0),
    focusedBorder: const UnderlineInputBorder(
      borderSide: BorderSide(color: Color(0xFFD9E2EC)),
    ),
    enabledBorder: const UnderlineInputBorder(
      borderSide: BorderSide(
        color: Color(0xFFD9E2EC),
      ),
    ),
    labelText: "Tell us more about the breed",
    labelStyle: TextStyle(
      fontSize: 14.0,
      color: Color(0xFF6E7191),
      fontWeight: FontWeight.w400,
    ),
  ),
);

原理说明 #

两种状态的差异：

• enabled: false：组件完全失活，所有手势响应、内部滚动、焦点效果全部失效，外观自动切换为灰度禁用样式
• readOnly: true：组件保持激活状态，仅屏蔽文本输入逻辑，内部文本滚动、点击响应、边框样式全部正常工作，完全适配选择回填类输入框的场景

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