Flutter拖拽调整容器大小时文本无法居中问题排查

初始状态下容器内的TextField文本可居中显示，但拖拽调整容器宽高后，文本偏移至容器顶部，以下是相关代码及问题说明：

变量定义 #

double width = 110.0;
double height = 40.0;
double fontSize = 14;
bool _isSelected = true;

容器及TextField实现 #

child: Container(
    height: height,
    width: width,

    decoration: _isSelected ? BoxDecoration(
      color: Colors.transparent,
      border: Border.all(
        width: 2,
        color: Colors.black,
      ),
    ) : null,
  
    child: Center(
      child: TextField(
        key: textFieldKey,
        controller: textController,
        style: TextStyle(color: Colors.black, fontSize: fontSize),
        decoration: InputDecoration(
          fillColor: Colors.black,
            hintText: "Enter Your Text",
            helperStyle: TextStyle(color: Colors.black),
            border: InputBorder.none
        ),
        textAlign: TextAlign.center,
        onSubmitted: (text){
          setState(() {
            _isSelected = false;
          });
        },
    ),
  ),
),

拖拽调整尺寸代码 #

if(_isSelected)
  Positioned(
    top: top - ballDiameter / 2,
    left: left - ballDiameter / 2,
    child: ManipulatingBall(
      onDrag: (dx, dy) {
        var newWidth = width - (2*dx);
        var newHeight = height - (2*dx/aspectRatio);
        setState(() {
          fontSize = height / 3.57*1.5;
          print("height = $height");
          print("width = $width");
          print("fontsize = $fontSize");

          if(newHeight > 10 && newWidth > 10)
          {
            height = newHeight;
            width = newWidth;
            top = top + (dx/aspectRatio);
            left = left + dx;
          }

        });
      },
      handlerWidget: HandlerWidget.VERTICAL,
    ),
  ),

问题截图 #

问题排查与解决 #

核心问题 #

1. 字体大小计算时机错误：当前在更新容器高度前计算fontSize，使用的是旧的height值，导致字体大小未同步到新容器高度，TextField自身高度与容器不匹配，引发偏移。
2. TextField默认布局特性：TextField自带默认内边距，且未明确垂直居中配置，容器高度变化时无法自适应居中。

修复方案 #

1. 修正字体大小计算时机

将fontSize的计算移到容器高度更新之后，确保使用最新的height值：

if(newHeight > 10 && newWidth > 10)
{
  height = newHeight;
  width = newWidth;
  top = top + (dx/aspectRatio);
  left = left + dx;
  // 用更新后的高度计算字体大小
  fontSize = height / 3.57 * 1.5;
}

2. 优化TextField布局配置

给TextField添加垂直居中属性并清除默认内边距，确保文本在容器内完全居中：

TextField(
  key: textFieldKey,
  controller: textController,
  style: TextStyle(color: Colors.black, fontSize: fontSize),
  decoration: InputDecoration(
    fillColor: Colors.black,
    hintText: "Enter Your Text",
    helperStyle: TextStyle(color: Colors.black),
    border: InputBorder.none,
    // 清除默认内边距
    contentPadding: EdgeInsets.zero,
  ),
  textAlign: TextAlign.center,
  // 强制垂直居中
  textAlignVertical: TextAlignVertical.center,
  // 限制单行，避免高度自适应混乱
  maxLines: 1,
  onSubmitted: (text){
    setState(() {
      _isSelected = false;
    });
  },
)

3. 可选：约束TextField高度

可以将TextField用SizedBox包裹，强制其高度与容器一致，进一步避免布局偏差：

Center(
  child: SizedBox(
    height: height,
    width: width,
    child: TextField(
      // ...上述配置
    ),
  ),
)

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