Flutter打开键盘时Positioned in Stack错误的解决方法咨询

问题根源 #

你遇到的问题是因为Stack里的Positioned用了固定top值（130.0），键盘弹出后屏幕可用高度缩小，但这个固定值不会随布局变化调整，导致头像容器位置异常；另外你之前用SingleChildScrollView无效，是因为外层Container设置了height: double.infinity，让ScrollView无法正确识别可滚动的区域边界。

两种可行解决方案 #

方案一：改用Column+Transform实现相对定位（推荐）

把整个布局改成Column结构，用Transform.translate把头像向上偏移到登录框上方，这样键盘弹出时，SingleChildScrollView会带着整个内容上移，完全适配键盘高度。

修改后的代码：

class LoginScreen extends Stateful Widget {
  const LoginScreen({super.key});

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 确保键盘弹出时自动调整布局，默认就是true，可显式声明
      resizeToAvoidBottomInset: true,
      body: SingleChildScrollView(
        // 让ScrollView始终保持可滚动特性
        physics: const AlwaysScrollableScrollPhysics(),
        child: Container(
          width: double.infinity,
          // 用MediaQuery获取屏幕总高度，替代固定double.infinity
          minHeight: MediaQuery.of(context).size.height,
          decoration: const BoxDecoration(color: Colors.red),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 用Transform把头像向上偏移，覆盖到下方登录框上
              Transform.translate(
                offset: const Offset(0, -55), // 偏移量等于头像高度的一半
                child: Container(
                  height: 110,
                  width: 110,
                  decoration: BoxDecoration(
                    border: Border.all(width: 9, color: Colors.red),
                    color: AppColors.whiteLogin,
                    borderRadius: const BorderRadius.all(
                        Radius.circular(Dimension.borderRadiusAll)),
                  ),
                  child: Icon(
                    Remix.user_3_line,
                    size: 45,
                    color: Colors.red,
                  ),
                ),
              ),
              // 登录框容器，给头像留出顶部空间
              Container(
                width: MediaQuery.of(context).size.width - Dimension.paddingXL,
                height: MediaQuery.of(context).size.height / 3 * 1.7,
                decoration: const BoxDecoration(
                  color: AppColors.whiteLogin,
                  borderRadius: BorderRadius.all(
                      Radius.circular(Dimension.borderRadiusLogin)),
                ),
                child: Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(top: Dimension.paddingXL + 55),
                      child: TextField(),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

方案二：保留Stack，动态调整Positioned位置

如果想保留Stack结构，需要根据键盘高度动态修改Positioned的top值，同时确保SingleChildScrollView能正常工作：

class LoginScreen extends Stateful Widget {
  const LoginScreen({super.key});

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  @override
  Widget build(BuildContext context) {
    // 获取键盘高度
    final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
    // 计算头像的top值，键盘弹出时减少top值，让头像上移
    final avatarTop = 130.0 - keyboardHeight * 0.3;

    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: SingleChildScrollView(
        physics: const AlwaysScrollableScrollPhysics(),
        child: Container(
          width: double.infinity,
          minHeight: MediaQuery.of(context).size.height,
          decoration: const BoxDecoration(color: Colors.red),
          child: Stack(
            alignment: Alignment.center,
            children: [
              Container(
                width: MediaQuery.of(context).size.width - Dimension.paddingXL,
                height: MediaQuery.of(context).size.height / 3 * 1.7,
                decoration: const BoxDecoration(
                  color: AppColors.whiteLogin,
                  borderRadius: BorderRadius.all(
                      Radius.circular(Dimension.borderRadiusLogin)),
                ),
                child: Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(top: Dimension.paddingXL),
                      child: TextField(),
                    )
                  ],
                ),
              ),
              Positioned(
                top: avatarTop,
                child: Container(
                  height: 110,
                  width: 110,
                  decoration: BoxDecoration(
                    border: Border.all(width: 9, color: Colors.red),
                    color: AppColors.whiteLogin,
                    borderRadius: const BorderRadius.all(
                        Radius.circular(Dimension.borderRadiusAll)),
                  ),
                  child: Icon(
                    Remix.user_3_line,
                    size: 45,
                    color: Colors.red,
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

关键改动说明 #

• 移除了外层Container的height: double.infinity，改用minHeight: MediaQuery.of(context).size.height，让SingleChildScrollView能正确计算滚动区域。
• 方案一用Transform实现头像的覆盖效果，布局更稳定，适配性更好；方案二保留Stack结构，通过动态计算top值适配键盘。
• 确保resizeToAvoidBottomInset: true（Scaffold默认属性），让布局自动响应键盘弹出。

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