如何避免打开键盘时Positioned Stack组件被覆盖及上移

采用Positioned Stack布局时，打开TextField的键盘会导致所有组件被覆盖并向上移动，希望阻止该现象，让组件保持原有位置。曾尝试用SingleChildScrollView包裹Stack，但出现Padding等问题，寻求其他解决方法。

代码如下：

@override
Widget build(BuildContext context) {
  final double height = MediaQuery.of(context).size.height;
  return Scaffold(
    appBar: AppBar(
      title: const Text('Graphs'),
    ),
    body: SizedBox(
      height :  height,
      child: Stack(
        children: [
           Positioned(
             bottom: height / 2,
            left: 40,
            child: const Text(
              'test text',
              style: TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.w400,
                  color: Colors.lightBlue),
            ),
          ),
          Positioned(
            bottom: height / 2 - 80,
            child: Column(
                children : [EquationTextField(onChanged: (input) {
                  setState(() {
                    inEquation = input!;
                  });
                }, inputScreenContext: context,),
            MaterialButton(
              onPressed: () {
                setState(() {
                  toggled = !toggled;
                });
              },
            child: const Text('Enter'),)]),
          )
        ],
      ),
    ),
  );
}

有两种高效的解决方法，无需使用SingleChildScrollView：

方法1：修改Scaffold的resizeToAvoidBottomInset属性 #

直接在Scaffold中设置resizeToAvoidBottomInset: false，关闭body因键盘弹出自动调整大小的行为，组件位置会完全保持不变。

修改后的代码示例：

@override
Widget build(BuildContext context) {
  final double height = MediaQuery.of(context).size.height;
  return Scaffold(
    resizeToAvoidBottomInset: false, // 添加此行关闭自动调整
    appBar: AppBar(
      title: const Text('Graphs'),
    ),
    body: SizedBox(
      height: height,
      child: Stack(
        children: [
          Positioned(
            bottom: height / 2,
            left: 40,
            child: const Text(
              'test text',
              style: TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.w400,
                  color: Colors.lightBlue),
            ),
          ),
          Positioned(
            bottom: height / 2 - 80,
            child: Column(
              children: [
                EquationTextField(
                  onChanged: (input) {
                    setState(() {
                      inEquation = input!;
                    });
                  },
                  inputScreenContext: context,
                ),
                MaterialButton(
                  onPressed: () {
                    setState(() {
                      toggled = !toggled;
                    });
                  },
                  child: const Text('Enter'),
                )
              ],
            ),
          )
        ],
      ),
    ),
  );
}

方法2：动态获取键盘高度调整Positioned参数 #

如果需要更灵活的控制（比如部分组件需避开键盘），可以通过MediaQuery.of(context).viewInsets.bottom获取当前键盘高度，动态修改Positioned的bottom属性，抵消键盘带来的位移。

修改后的代码示例：

@override
Widget build(BuildContext context) {
  final double height = MediaQuery.of(context).size.height;
  final double keyboardHeight = MediaQuery.of(context).viewInsets.bottom; // 获取键盘高度
  return Scaffold(
    appBar: AppBar(
      title: const Text('Graphs'),
    ),
    body: SizedBox(
      height: height,
      child: Stack(
        children: [
          Positioned(
            bottom: height / 2 + keyboardHeight, // 增加键盘高度抵消位移
            left: 40,
            child: const Text(
              'test text',
              style: TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.w400,
                  color: Colors.lightBlue),
            ),
          ),
          Positioned(
            bottom: (height / 2 - 80) + keyboardHeight, // 同样增加键盘高度
            child: Column(
              children: [
                EquationTextField(
                  onChanged: (input) {
                    setState(() {
                      inEquation = input!;
                    });
                  },
                  inputScreenContext: context,
                ),
                MaterialButton(
                  onPressed: () {
                    setState(() {
                      toggled = !toggled;
                    });
                  },
                  child: const Text('Enter'),
                )
              ],
            ),
          )
        ],
      ),
    ),
  );
}

注意事项 #

• 方法1是最简洁的方案，适合不需要body滚动的场景；
• 方法2适合需要部分组件响应键盘，但整体布局位置保持不变的场景；
• 使用方法1时，需确保TextField不会被键盘完全遮挡，可提前调整其初始位置。

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