Flutter中如何让设备键盘显示在Collapsible Banner上方？

方案一：监听键盘高度动态调整广告位置 #

通过WidgetsBindingObserver监听键盘弹出/收起事件，实时获取键盘高度，将Banner固定在键盘上方。

步骤实现：

• 在State类混入WidgetsBindingObserver
• 初始化时注册监听，销毁时取消
• 在didChangeMetrics回调中计算键盘高度
• 动态更新Banner的底部偏移量

代码示例：

class _AdBannerState extends State<AdBanner> with WidgetsBindingObserver {
  double _keyboardHeight = 0;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    final viewInsets = WidgetsBinding.instance.window.viewInsets;
    final keyboardHeight = viewInsets.bottom;
    setState(() {
      _keyboardHeight = keyboardHeight;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Positioned(
      bottom: _keyboardHeight,
      left: 0,
      right: 0,
      child: CollapsibleBanner(
        // 你的广告配置参数
      ),
    );
  }
}

方案二：用MediaQuery直接获取键盘高度 #

通过MediaQuery实时获取视图内边距（包含键盘高度），在布局时给Banner设置底部margin，让它自动避开键盘。

代码示例：

Widget build(BuildContext context) {
  final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
  return Scaffold(
    // 确保resizeToAvoidBottomInset为true（默认值），否则viewInsets不会更新
    resizeToAvoidBottomInset: true,
    body: Column(
      children: [
        Expanded(child: YourMainContentWidget()),
        Container(
          margin: EdgeInsets.only(bottom: keyboardHeight),
          child: CollapsibleBanner(/* 广告配置参数 */),
        ),
      ],
    ),
  );
}

方案三：调整广告层级让键盘覆盖Banner #

如果业务允许键盘临时覆盖Banner，可以降低广告组件的层级，让键盘能显示在上方。

代码示例：

Stack(
  children: [
    YourMainContentWidget(),
    Positioned(
      bottom: 0,
      left: 0,
      right: 0,
      child: Material(
        elevation: 0, // 降低层级，使键盘可覆盖
        child: CollapsibleBanner(/* 广告配置参数 */),
      ),
    ),
  ],
)

额外注意事项 #

• 禁止将Scaffold的resizeToAvoidBottomInset设为false，否则系统不会自动调整布局避开键盘
• 多机型测试不同屏幕尺寸、横竖屏状态，确保键盘高度计算准确
• 若使用第三方封装的Collapsible Banner组件，优先检查是否有内置的键盘避让配置参数

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