Flutter中使用Share包分享后Android页面偏移至状态栏问题求助

问题原因 #

该问题通常是因为页面内嵌套MaterialApp引发上下文冲突，以及Share弹窗关闭后Android系统UI布局状态未正确恢复，导致页面内容向上偏移至状态栏区域。

修复方案 #

1. 将MaterialApp移至应用根节点 #

每个页面单独定义MaterialApp会造成主题、导航栈及系统UI管理混乱，应将MaterialApp作为整个应用的根组件，当前页面作为路由页面使用。

2. 用SafeArea确保内容不被系统栏覆盖 #

在Scaffold的body外层包裹SafeArea，强制内容避开状态栏和导航栏区域，从根源避免布局偏移。

3. 优化Share调用后的UI刷新 #

通过WidgetsBinding在分享完成后触发UI重建，确保布局状态正确恢复。

修改后的代码示例 #

// 应用根组件，全局仅定义一次MaterialApp
void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Share Demo',
      home: const FeesPage(),
    );
  }
}

class FeesPage extends StatefulWidget {
  const FeesPage({super.key});

  @override
  State<FeesPage> createState() => _FeesPageState();
}

class _FeesPageState extends State<FeesPage> {
  Future<void> share() async {
    await Share.share("Example share", subject: "Test subject");
    // 分享完成后触发UI刷新，恢复布局状态
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (mounted) setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
      ),
      body: SafeArea(
        child: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                child: const Text('Share text and link'),
                onPressed: share,
              ),
              ElevatedButton(
                child: const Text('Share local file'),
                onPressed: share,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

额外说明 #

若需保持页面为StatelessWidget，可移除setState相关代码，仅依赖SafeArea和全局MaterialApp的调整。若问题仍存在，可尝试：

• 检查AndroidManifest.xml中是否设置了正确的android:fitsSystemWindows属性
• 使用SystemChrome在分享前后手动控制状态栏显示模式

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