Flutter：如何在可调整大小页面固定Widget位置？

开发包含TextField、Slider等组件的页面时，需在底部固定一个跳转下一步的按钮。当前用Align组件实现按钮固定，页面resizeToAvoidBottomInset设为true，点击TextField后页面会自动调整以保证输入框可见，但按钮会随之移至页面中部。需求是保持页面自动调整的同时，让按钮始终固定在指定位置。

build方法 #

Widget build(BuildContext context) {
    return MaterialApp(
      home: GestureDetector(
        onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
        child: Scaffold(
          extendBodyBehindAppBar: true,
          resizeToAvoidBottomInset: true,
          body: Stack(
            children: [
              const Background(),
              getTopbar(),
              getBody(),
              getProceedButton()
            ],
          ),
        ),
      ),
    );
  }

getBody函数（简化版） #

return Padding(
    padding: const EdgeInsets.only(top: topbarHeigthSmall),
    child: Container(
        height: MediaQuery.of(context).size.height - topbarHeigthSmall,
        child: Padding(
            padding: const EdgeInsets.only(right: 30, left: 30),
            child: SingleChildScrollView(
                child: Column(
                    children: [
                        // 页面组件如TextField等
                    ],
                ),
            ),
        ),
    ),
);

按钮代码 #

Widget getProceedButton() {
    return Align(
      alignment: const Alignment(0.0, 0.8),
      child: Container(...),
    );
}

• 点击TextField前：按钮固定在页面底部区域
• 点击TextField后：按钮上移至页面中部

方案一：使用Scaffold的bottomNavigationBar属性 #

这是最简洁的方案，bottomNavigationBar会自动固定在页面底部，不受resizeToAvoidBottomInset的影响，同时页面仍会自动调整以避免被键盘遮挡。

修改build方法，将按钮从Stack中移出，放到Scaffold的bottomNavigationBar：

Widget build(BuildContext context) {
    return MaterialApp(
      home: GestureDetector(
        onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
        child: Scaffold(
          extendBodyBehindAppBar: true,
          resizeToAvoidBottomInset: true,
          body: Stack(
            children: [
              const Background(),
              getTopbar(),
              getBody(),
            ],
          ),
          // 将按钮移到此处
          bottomNavigationBar: getProceedButton(),
        ),
      ),
    );
  }

调整按钮代码，去掉Align，改用Padding控制边距：

Widget getProceedButton() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 20),
      child: Container(...), // 原按钮容器内容
    );
}

方案二：基于键盘高度动态定位按钮（保留Stack布局） #

如果必须使用Stack布局，可通过MediaQuery.of(context).viewInsets.bottom获取键盘弹出的高度，动态调整按钮的底部位置，确保按钮始终在键盘上方或原固定位置。

修改按钮代码为Positioned组件：

Widget getProceedButton() {
    return Positioned(
      left: 30,
      right: 30,
      // 底部距离 = 键盘高度 + 固定边距，键盘收起时viewInsets.bottom为0
      bottom: MediaQuery.of(context).viewInsets.bottom + 20,
      child: Container(...), // 原按钮容器内容
    );
}

原方案中Align的Alignment(0.0, 0.8)是基于Stack的当前高度计算相对位置。当resizeToAvoidBottomInset: true时，键盘弹出后Scaffold的body高度会减去键盘高度，Stack的高度随之缩小，导致按钮的相对位置上移，最终出现在页面中部。

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