Flutter求助：底部导航栏TextField无法随键盘上移问题

嘿，我懂你现在的头疼事儿——把TextField放在底部导航栏里，键盘弹出来的时候它却钉在原地不动，试了各种办法都没效果是吧？别慌，咱们一步步把这个问题搞定！

问题根源 #

你代码里有个关键设置：resizeToAvoidBottomInset: false。这个属性的作用就是强制Scaffold不因为键盘弹出而调整自身大小，所以底部的TextField自然不会跟着键盘上移，这就是问题的核心所在。

解决方案一：移除/修改resizeToAvoidBottomInset属性 #

这是最直接的解决办法，因为Flutter默认就会让Scaffold自动调整大小避开键盘，你只需要把这个属性删掉，或者改成true（默认值就是true，删掉就行）。

修改后的代码示例：

return Scaffold(
  // 删掉这行：resizeToAvoidBottomInset: false,
  backgroundColor: Palette.primary,
  appBar: MyAppBar(),
  body: MyBody(),
  bottomNavigationBar: TextField(
    maxLength: 255,
    decoration: InputDecoration(
      hintText: " write here",
      focusedBorder: InputBorder.none,
      enabledBorder: InputBorder.none,
      errorBorder: InputBorder.none,
      disabledBorder: InputBorder.none,
      border: null,
      hintStyle: GoogleFonts.getFont('Tajawal', color: Colors.white, fontWeight: FontWeight.w500),
      counterText: "",
    ),
    style: GoogleFonts.getFont('Tajawal', fontSize: 17, fontWeight: FontWeight.w500),
  ),
);

小提醒：如果你的MyBody()里的内容是不可滚动的，键盘弹出可能会挡住页面上方的内容。这种情况下，建议把MyBody()用SingleChildScrollView包裹起来，确保内容可以滚动查看。

解决方案二：保留resizeToAvoidBottomInset: false时的手动调整 #

如果因为业务需求必须保留resizeToAvoidBottomInset: false，那可以通过监听键盘高度，手动调整TextField的位置。我们用MediaQuery获取键盘高度，动态设置底部内边距：

return Scaffold(
  resizeToAvoidBottomInset: false,
  backgroundColor: Palette.primary,
  appBar: MyAppBar(),
  body: MyBody(),
  bottomNavigationBar: AnimatedPadding(
    padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
    duration: Duration(milliseconds: 100),
    child: TextField(
      maxLength: 255,
      decoration: InputDecoration(
        hintText: " write here",
        focusedBorder: InputBorder.none,
        enabledBorder: InputBorder.none,
        errorBorder: InputBorder.none,
        disabledBorder: InputBorder.none,
        border: null,
        hintStyle: GoogleFonts.getFont('Tajawal', color: Colors.white, fontWeight: FontWeight.w500),
        counterText: "",
      ),
      style: GoogleFonts.getFont('Tajawal', fontSize: 17, fontWeight: FontWeight.w500),
    ),
  ),
);

这里用AnimatedPadding是为了让TextField的移动更平滑，避免突兀跳转。MediaQuery.of(context).viewInsets.bottom会返回当前键盘的高度，键盘弹出时这个值变大，收起时变回0，从而带动TextField自动上移/下移。

测试建议 #

修改完代码后，重新运行项目，点击TextField弹出键盘，看看是否能正常上移。如果用的是解决方案一，记得同时检查页面上方的内容是否能正常滚动查看。

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