使用Flutter ScreenUtil与PersistentNavBar时底部内容被键盘遮挡求助

使用的依赖包 #

• flutter_screenutil
• persistent_bottom_nav_bar

问题描述 #

页面存在底部内容时，弹出软键盘后底部内容被遮挡，效果如下：

已尝试的无效方案 #

• 添加底部内边距：Padding(padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom))
• 设置resizeToAvoidBottomInset: true

全局架构代码 #

ScreenUtilInit(
  designSize: const Size(screenWidth, screentHeight),
  minTextAdapt: true,
  splitScreenMode: true,
  useInheritedMediaQuery: true,
  builder: (_, child) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      
      home: MultiBlocProvider(providers: [
        BlocProvider(
          create: (context) => AuthBloc(),
        ),
        BlocProvider(
          create: (context) => AccountBloc(),
        ),
      ], child: const MyApp()),
    );
  },
)
return PersistentTabView(
  context,
  controller: controller,
  screens: buildScreens(),
  items: navBarsItems(),
  confineInSafeArea: true,
  backgroundColor: Colors.white,
  handleAndroidBackButtonPress: true,
  resizeToAvoidBottomInset: true,
  stateManagement: true,
  hideNavigationBarWhenKeyboardShows: true,
  decoration: NavBarDecoration(
    borderRadius: BorderRadius.circular(10.0),
    colorBehindNavBar: Colors.white,
  ),
  popAllScreensOnTapOfSelectedTab: true,
  popActionScreens: PopActionScreensType.all,
  itemAnimationProperties: const ItemAnimationProperties(
    duration: Duration(milliseconds: 200),
    curve: Curves.ease,
  ),
  screenTransitionAnimation: const ScreenTransitionAnimation(
    animateTabTransition: true,
    curve: Curves.ease,
    duration: Duration(milliseconds: 200),
  ),
  navBarStyle: NavBarStyle.style6,
);

解决方案 #

1. 校验ScreenUtil的MediaQuery传递
   因为启用了useInheritedMediaQuery: true，需确保子页面能正确继承MediaQuery信息。可尝试在具体页面的Scaffold外层包裹MediaQuery.removePadding，或直接确保页面布局根组件能响应viewInsets变化。

2. 调整PersistentTabView配置
   尽管已设置hideNavigationBarWhenKeyboardShows: true和resizeToAvoidBottomInset: true，仍建议将confineInSafeArea设为false，然后在每个子页面的Scaffold中手动处理SafeArea，避免组件间的安全区规则冲突。

3. 规范页面布局嵌套
   在包含底部输入框的页面，将内容放入SingleChildScrollView，并结合内边距适配键盘高度，同时确保Scaffold的resizeToAvoidBottomInset设为true：

Scaffold(
  resizeToAvoidBottomInset: true,
  body: SingleChildScrollView(
    child: Padding(
      padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
      child: // 页面内容
    ),
  ),
);

4. 验证ScreenUtil设计尺寸
   确认screenWidth和screentHeight与设计稿尺寸一致，错误的基准尺寸会导致布局计算异常，进而影响键盘适配逻辑。

5. 配置AndroidManifest参数
   在Android项目的AndroidManifest.xml中，将Activity的android:windowSoftInputMode设为adjustResize：

<activity
    android:name=".MainActivity"
    android:windowSoftInputMode="adjustResize">

内容的提问来源于stack exchange，提问作者Med Oussema Zaier