如何实现Widget固定在页面底部，键盘弹出时置顶于键盘顶部？

嘿，这个需求我太熟悉了！之前也踩过bottomNavigationBar的坑——它确实是固定在页面底部的导航组件，不管键盘弹不弹出都会待在原地，完全不适合需要跟键盘“联动”的场景。不过别担心，Flutter里有好几种内置的实现方式，帮你轻松搞定这个效果：

方法1：用Scaffold的bottomSheet（最省心的内置方案） #

这是官方推荐的做法，bottomSheet天生就支持随键盘上移，只要保持Scaffold的resizeToAvoidBottomInset为true（默认就是这个值）就行。直接把你的Widget丢进去，键盘弹出时它会自动贴在键盘顶部：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: // 你的主页面内容，比如列表、文本之类的
    bottomSheet: Container(
      height: 60,
      width: double.infinity,
      padding: EdgeInsets.symmetric(horizontal: 16),
      color: Colors.white,
      child: TextField(
        decoration: InputDecoration(hintText: "输入内容..."),
      ),
    ),
  );
}

如果你的主页面内容不想被键盘挤上去，可以把resizeToAvoidBottomInset设为false，但这时候需要给bottomSheet加个底部padding，用MediaQuery获取键盘高度：

bottomSheet: Container(
  padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
  child: YourBottomWidget(),
)

方法2：用Stack + Positioned（自定义程度更高） #

如果你的页面结构比较复杂，不想用Scaffold的bottomSheet，可以用Stack来布局，结合MediaQuery获取键盘的高度，动态调整Widget的底部位置：

@override
Widget build(BuildContext context) {
  return Stack(
    children: [
      // 你的主页面内容，占满整个屏幕
      Positioned.fill(child: YourMainContent()),
      // 固定在底部的Widget，随键盘上移
      Positioned(
        left: 0,
        right: 0,
        bottom: MediaQuery.of(context).viewInsets.bottom,
        child: Container(
          height: 60,
          color: Colors.white,
          child: TextField(
            decoration: InputDecoration(hintText: "输入内容..."),
          ),
        ),
      ),
    ],
  );
}

为什么bottomNavigationBar不行？ #

简单说，bottomNavigationBar是设计成页面级的固定导航，它的位置是相对于屏幕底部的，不会响应键盘弹出时的视图偏移（viewInsets），所以键盘弹出后会直接把它盖住，完全达不到你要的效果。

试试上面的方法，第一种应该就能满足你的需求啦！

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