Flutter TextField文本溢出父容器且无法垂直居中问题求助

问题根源 #

你的代码里有几个关键问题导致文本溢出容器且无法垂直居中：

• ConstrainedBox 使用 BoxConstraints.expand() 强制TextField占满父容器，结合TextField默认行高和内边距，容易让文本超出边界。
• textAlignVertical: TextAlignVertical.bottom 直接把文本固定在底部，完全违背垂直居中的需求。
• InputDecoration 的 contentPadding 只设置了水平方向，垂直方向的默认间距会干扰居中效果。

修改步骤 #

1. 移除冗余的ConstrainedBox：父Container已经指定了width:130和height:40，不需要再强制TextField扩展。
2. 设置垂直居中对齐：将textAlignVertical改为TextAlignVertical.center。
3. 统一输入框内边距：给contentPadding添加垂直方向的0值，消除默认垂直间距。
4. 处理文本溢出：添加overflow: TextOverflow.ellipsis，避免文本过长时直接跳出容器。

修改后的代码片段 #

Container(
  width: 130,
  height: 40,
  alignment: Alignment.center,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8),
    border: Border.all(color: Colors.grey),
  ),
  child: TextField(
    controller: _controller.textController,
    maxLines: 1,
    textDirection: TextDirection.rtl,
    textAlignVertical: TextAlignVertical.center, // 改为垂直居中
    focusNode: _controller.focusNode,
    autofocus: isSelected,
    keyboardType: const TextInputType.numberWithOptions(decimal: true),
    style: const TextStyle(fontSize: 18),
    decoration: const InputDecoration(
      contentPadding: EdgeInsets.symmetric(horizontal: 5, vertical: 0), // 统一垂直内边距
      hintTextDirection: TextDirection.rtl,
      border: InputBorder.none,
    ),
    overflow: TextOverflow.ellipsis, // 文本过长时显示省略号
  ),
)

额外优化建议 #

如果需要限制输入长度，可以添加以下属性进一步避免溢出：

maxLength: 10, // 按需设置最大输入长度
maxLengthEnforcement: MaxLengthEnforcement.enforced,

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