Flutter TextField选择高亮控件显示位置过高异常排查

TextField文本选择高亮、选择拖拽控制控件显示位置异常偏移，控件出现在输入框上方区域，未对齐输入文本位置。

var textField = TextField(
  selectionHeightStyle: BoxHeightStyle.max,
  scrollPadding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom + 20 * 4),
  textInputAction: TextInputAction.done,
  keyboardType: TextInputType.numberWithOptions(signed: true, decimal: true),
  decoration: InputDecoration(
    border: InputBorder.none,
  ),
  controller: textEditingController,
  onTap: () {
    Future.delayed(const Duration(milliseconds: 800), () {
      textEditingController.selectAll();
    });
  },
  onSubmitted: (newText) {
    if (newText.length == 0) {
      callback(0, true);
    } else {
      callback(int.parse(newText), true);
    }
  },
  textAlign: TextAlign.center,
  style: Theme.of(context).textTheme.headline4!.copyWith(
        fontWeight: FontWeight.w700,
        fontSize: 16.0,
        color: WWColors.pinkBrandColor(),
      ),
);

return Padding(
  padding: padding,
  child: Container(alignment: Alignment.center, child: textField),
);

异常由两个配置问题共同触发：

• 核心原因是selectionHeightStyle配置为BoxHeightStyle.max：该配置会让文本选中高亮区域的高度取当前行所有字形的最高上沿到最低下沿，当TextField设置了InputBorder.none无默认边距、外层容器仅用Alignment.center做自适应对齐时，Flutter计算选中控件锚点时会错误扩大行高计算范围，导致锚点上移。
• 次要放大因素是onTap中延迟800ms触发全选的逻辑：点击输入框后键盘弹出动画期间，MediaQuery.viewInsets.bottom会持续变化，scrollPadding也会同步动态计算，页面处于持续布局重绘状态，此时延迟触发选中文本会拿到布局重算中间态的错误坐标，进一步放大位置偏移问题。

• 优先调整selectionHeightStyle配置：将BoxHeightStyle.max替换为默认值BoxHeightStyle.tight，让选中高亮区域严格贴合实际文本高度，从根源避免高度计算溢出。如果需要保留选中区域的行间距，可以按需选择BoxHeightStyle.includeLineSpacingMiddle、BoxHeightStyle.includeLineSpacingTop或BoxHeightStyle.includeLineSpacingBottom，不要使用max模式。

  selectionHeightStyle: BoxHeightStyle.tight,
  

• 修正延迟全选逻辑：去掉800ms的不合理延迟，避免在键盘弹出动画的布局重算期触发选中操作。可以点击后同步执行全选，或等待键盘动画完全结束（通常300ms左右）再触发：

  onTap: () {
    // 同步触发全选
    textEditingController.selection = TextSelection(
      baseOffset: 0,
      extentOffset: textEditingController.text.length
    );
  },
  

• 给输入框容器添加明确高度约束：不要让TextField靠center对齐自适应撑开高度，给外层Container设置固定高度，给Flutter提供明确的布局边界参考，避免锚点计算错误：

  Container(
    alignment: Alignment.center,
    height: 48, // 按业务需求设置输入框高度
    child: textField
  )
  

内容的提问来源于stack exchange，提问作者David van Dugteren