Flutter中Stack+Positioned布局下TextField被键盘遮挡的解决方法

问题详情 #

页面采用Stack结合Positioned组件做绝对定位布局，点击TextField弹出键盘时，下方的输入框和按钮会被键盘遮挡。尝试过SingleChildScrollView和AnimatedContainer但未解决，需要实现键盘弹出时页面元素自动上移，避免被遮挡。

解决方案 #

核心问题是绝对定位的Positioned元素不会随键盘弹出自动调整位置，即使resizeToAvoidBottomInset设为true也无效。需要替换布局结构，改用可滚动的流式布局：

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:job_ifaserp/candidate_module/resouces/candidate_header.dart';
import 'package:job_ifaserp/commons/custom_wdgets.dart';
import 'models/candidate_master.dart';

class CandidateProfileScreen extends StatelessWidget {
  final String? emailID;
  final CandidateMaster? canMast;
  CandidateProfileScreen({Key? key, this.canMast, this.emailID})
      : super(key: key);
  
  TextEditingController txtCandidateName = TextEditingController();
  TextEditingController txtCandidateEmail = TextEditingController();
  TextEditingController txtCandidateContact = TextEditingController();
  TextEditingController txtCandidateSkill = TextEditingController();
  TextEditingController txtCandidateAbout = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      appBar: AppBar(title: const Text('Jobseeker Profile'),),
      body: SingleChildScrollView(
        // 自动留出键盘高度的底部内边距
        padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 保留顶部的CandidateHeader
            CandidateHeader(canMast: canMast, emailID: emailID),
            const SizedBox(height: 20),
            
            // 替换Positioned的标题
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: 40),
              child: Text(
                'Update Profile',
                style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
              ),
            ),
            const SizedBox(height: 20),
            
            // 姓名输入框
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 40),
              child: RoundedInput(
                icon: Icons.person,
                hint: canMast!.can_name.toString(),
                txtController: txtCandidateName,
                onChangeText: (_) {},
              ),
            ),
            const SizedBox(height: 16),
            
            // 邮箱输入框
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 40),
              child: RoundedInput(
                icon: Icons.email,
                hint: canMast!.can_email.toString(),
                txtController: txtCandidateEmail,
                onChangeText: (_) {},
              ),
            ),
            const SizedBox(height: 16),
            
            // 联系方式输入框
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 40),
              child: RoundedInput(
                icon: Icons.mobile_friendly,
                hint: canMast!.can_mobn.toString(),
                txtController: txtCandidateContact,
                onChangeText: (_) {},
              ),
            ),
            const SizedBox(height: 16),
            
            // 技能输入框
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 40),
              child: RoundedInput(
                icon: Icons.person_add,
                hint: 'Your skill',
                txtController: txtCandidateSkill,
                onChangeText: (_) {},
              ),
            ),
            const SizedBox(height: 16),
            
            // 自我介绍输入框
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 40),
              child: RoundedInput(
                icon: Icons.tag,
                hint: 'About me / Profile tag',
                txtController: txtCandidateAbout,
                onChangeText: (_) {},
              ),
            ),
            const SizedBox(height: 32),
            
            // 更新按钮
            Center(
              child: SizedBox(
                width: 250,
                height: 60,
                child: RoundedButton(
                  title: 'Update', 
                  onPressRoundButton: () {}
                ),
              ),
            ),
            const SizedBox(height: 16),
            
            // 返回按钮
            Center(
              child: SizedBox(
                width: 250,
                height: 60,
                child: RoundedButton(
                  title: 'Back', 
                  onPressRoundButton: () {
                    Navigator.pop(context);
                  }
                ),
              ),
            ),
            const SizedBox(height: 20),
          ],
        ),
      ),
    );
  }
}

关键修改点 #

1. 替换布局结构：移除Stack和Positioned，改用SingleChildScrollView包裹Column，实现页面滚动和自动适配键盘高度
2. 底部内边距适配：通过MediaQuery.of(context).viewInsets.bottom获取键盘高度，给SingleChildScrollView设置底部内边距，确保内容不被键盘完全遮挡
3. 流式布局替代绝对定位：用Padding和SizedBox控制元素间距和位置，替代固定的top/left值，让元素随页面滚动自然移动
4. 保留原有功能：所有输入框和按钮的逻辑完全保留，只是布局方式调整

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