Flutter中AppBar设置centerTitle为true时作为标题的TextField无法居中怎么办

• centerTitle: true 仅控制AppBar的title组件本身在标题栏区域居中，而TextField默认会填充满AppBar分配给title的所有横向空间，相当于一个宽度100%的组件放在居中区域，自然不会出现居中效果
• InputDecoration 配置的icon参数会在输入框内部左侧固定占位，进一步挤压输入内容的位置，导致视觉上更偏左

方案1：限制TextField宽度+外层居中包裹 #

给TextField套上居中组件，同时限制最大宽度，让整个输入框在标题区域居中展示：

appBar: AppBar(
  centerTitle: true,
  title: Center(
    child: ConstrainedBox(
      // 可根据业务需求自定义合适的最大宽度
      constraints: const BoxConstraints(maxWidth: 220),
      child: TextField(
        decoration: InputDecoration(
          hintText: 'Title',
          icon: const Icon(Icons.edit),
          hintStyle: const TextStyle(
            color: Colors.black,
            fontSize: 18,
          ),
          // 可选：移除输入框默认内边距，让布局更紧凑
          contentPadding: EdgeInsets.zero,
        ),
        controller: titleAndNoteController[0],
      ),
    ),
  ),
  // 其余原有配置保持不变
  bottom: PreferredSize(
    child: Opacity(
      opacity: 0.25,
      child: const Divider(
        color: Colors.black,
        thickness: 1,
        endIndent: 150,
        indent: 150,
      ),
    ),
    preferredSize: const Size.fromHeight(4.0),
  ),
  iconTheme: const IconThemeData(color: Colors.black),
  backgroundColor: Colors.transparent,
  elevation: 0.0,
)

方案2：输入内容居中适配 #

如果你希望TextField填充满整个title区域，仅让输入内容居中，可以直接修改TextField的对齐属性：

TextField(
  // 设置输入文本居中对齐
  textAlign: TextAlign.center,
  decoration: InputDecoration(
    hintText: 'Title',
    // 原icon调整为prefixIcon，避免内容整体偏移，也可根据需求直接移除
    prefixIcon: const Icon(Icons.edit),
    hintStyle: const TextStyle(
      color: Colors.black,
      fontSize: 18,
    ),
    border: InputBorder.none,
    contentPadding: EdgeInsets.zero,
  ),
  controller: titleAndNoteController[0],
)

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