Flutter实现全局遮罩(隐私模糊)

282 阅读1分钟

搜索了一下,并没有现成的方案,捣鼓了一下,发现有如下方案可以实现:

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

    @override  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> with WidgetsBindingObserver {
  int _currentIndex = 0;
  final PageController _pageController = PageController();
  final OverlayEntry _oe = OverlayEntry(
    builder: (context) => BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
      child: const SizedBox(
        width: double.infinity,
        height: double.infinity,
      ),
    ),
  );
  @override  void initState() {
    super.initState();
    // 注册 WidgetsBinding 观察器以监听生命周期事件
    WidgetsBinding.instance.addObserver(this);
  }
  @override  void dispose() {
    // 移除 WidgetsBinding 观察器
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }
  @override  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    //状态有更新时
    switch (state) {
      case AppLifecycleState.inactive:
        //实现遮罩
        Overlay.of(context).insert(_oe);
        break;
      case AppLifecycleState.resumed:
        _oe.remove();
        break;
      default:
        break;
    }
  }
  //这里写build代码
}

现在有个问题就是,发现无法在其他生命周期里实现遮罩,比如实现当APP切换到后台后才实现遮罩。

大家如果有什么更好的解决方案和想法欢迎提出~