Flutter中移除状态栏后无法全屏,出现黑条的问题求助
解决移除状态栏后出现黑条的问题
你当前使用的SystemChrome.setEnabledSystemUIMode(SystemUiMode.leanBack);仅会隐藏状态栏和导航栏,但不会让应用布局填充这些系统UI原本占用的空间,因此会出现黑条。要实现真正的全屏铺满效果,可通过以下方案处理:
方案一:沉浸式粘性模式+布局延伸配置
import 'package:flutter/services.dart'; void enableFullScreen() { SystemChrome.setEnabledSystemUIMode( SystemUiMode.immersiveSticky, overlays: [], ); // 让应用内容延伸至系统UI原区域 SystemChrome.setSystemUIOverlayStyle( const SystemUiOverlayStyle( statusBarColor: Colors.transparent, systemNavigationBarColor: Colors.transparent, ), ); }
方案二:Edge-to-Edge模式(Flutter 3.7+)
若你的Flutter版本在3.7及以上,可使用更简洁的原生全屏模式:
import 'package:flutter/services.dart'; void enableFullScreen() { SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge); SystemChrome.setSystemUIOverlayStyle( const SystemUiOverlayStyle( statusBarColor: Colors.transparent, systemNavigationBarColor: Colors.transparent, ), ); }
额外优化:移除默认布局内边距
确保根布局没有被默认padding限制,可通过MediaQuery.removePadding清除状态栏/导航栏的默认留白:
@override Widget build(BuildContext context) { return MediaQuery.removePadding( context: context, removeTop: true, removeBottom: true, child: Scaffold( body: // 你的页面内容布局 ), ); }
内容的提问来源于stack exchange,提问作者Mahdi
相关产品推荐
相关产品推荐

