FlutterComponent最佳实践之沉浸式
点击上方蓝字关注我，知识会给你力量
沉浸式状态栏，在Android开发中是一个比较麻烦的地方，因为不同的机型和版本兼容问题太多了，API变化也快，但是到了Flutter，一切问题都解决了，因为整个区域都是Skia绘制的，要什么都行，随便来。
❝
以上问题只针对Android，因为iOS没这问题。。。默认就是沉浸式，只能说，Google的设计师，真是不懂行情。
❞
我们来看下iOS的效果。
没什么好适配的，干就完了了。
状态栏沉浸式
再来看看Android。
这个状态栏，为什么国内的设计师都想干掉它的颜色呢。
首先，我们来修改状态栏的颜色，Flutter提供了SystemChrome.setSystemUIOverlayStyle来修改状态栏和底部导航栏的样式修改，借助它，我们可以很方便的干掉状态栏的默认颜色。
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(statusBarColor: Colors.transparent,statusBarBrightness: Brightness.light,),
);很简单，设置状态栏为透明即可，不过有一点需要注意，那就是statusBarBrightness，如果你后面有用AppBar组件，那么statusBarBrightness需要在AppBar中设置，否则这里的设置会被覆盖而不生效。
既然可以设置成透明，那么当然还可以设置成其它任何你想要的颜色，这里就不演示了。
AppBar沉浸式
下面再来看看AppBar的沉浸式设置，它给我们提供了backgroundColor的设置，我们只需要把默认的elevation干掉即可。
return Scaffold(appBar: AppBar(title: Text(widget.title),backgroundColor: Colors.transparent,elevation: 0,),但是，效果居然是这样？
没错，因为你还缺少了关键的一步，那就是设置Scaffold的extendBodyBehindAppBar属性。
return Scaffold(extendBodyBehindAppBar: true,appBar: AppBar(title: Text(widget.title),backgroundColor: Colors.transparent,elevation: 0,),这样就可以实现AppBar的沉浸式了。
ListView的沉浸式
我们把AppBar也干掉，因为有时候我们需要自己来实现AppBar，所以，来看下ListView的沉浸式。
return Scaffold(body: Container(color: Colors.yellow,child: ListView(children: List.generate(100,(index) => TextButton(onPressed: () {},child: Text('$index'),),),),),效果差不多，但是为什么顶部有坑？
这是因为ListView在这种场景下，很「智能」的给自己顶部加了默认的padding。我们去掉这个padding就可以了。
return Scaffold(body: Container(color: Colors.yellow,child: ListView(padding: const EdgeInsets.only(top: 0),children: List.generate(100,(index) => TextButton(onPressed: () {},child: Text('$index'),),),),),这样就完美了。
其它
为了给Android开小灶，我们还得给它加上设备的判断。
if (Platform.isAndroid) {}除了通过SystemChrome.setSystemUIOverlayStyle设置以外，Flutter也提供了AnnotatedRegion来设置，效果是一样的。
return AnnotatedRegion<SystemUiOverlayStyle>(value: const SystemUiOverlayStyle(statusBarColor: Colors.transparent,statusBarBrightness: Brightness.light,),child: Scaffold(向大家推荐下我的网站 https://xuyisheng.top/ 点击原文一键直达
专注 Android-Kotlin-Flutter 欢迎大家访问
往期推荐
FlutterComponent最佳实践之取色我来实现
FlutterComponent最佳实践之TabbarIndicator
Flutter混编工程之Font桥接
Flutter布局指南之Box套盒子
本文原创公众号：群英传，授权转载请联系微信(Tomcat_xu)，授权后，请在原创发表24小时后转载。
< END >
作者：徐宜生
更文不易，点个“三连”支持一下
点击上方蓝字关注我,知识会给你力量 什么是动画,从数学上来说,动画指的是一个属性的变换过程,实际上,就是一个函数,将一个属性值变成另一个属性值的过程. 从现实上来说,动画实际上就是将一系列静态的图片, ... 点击上方蓝字关注我,知识会给你力量 TabBar是UI中非常常用的一个组件,Flutter提供的TabBar几乎可以满足我们大部分的业务需求,而且实现非常简单,我们可以仅用几行代码,就完成一个Tab滑 ... 流量计实际标定的重要性 所有流量计都不能想当然的进行标定.流量计可以配置最具有工业可靠性的传感器技术,生产为最高安全等级.性能最优.功能丰富的设备.但是如果流量计标定不准确,或者是因为等效标定.模拟标 ... 在activity中设置透明状态栏 的思路: 1.让activity的布局全屏 此时布局会和状态栏重叠 2.让布局最上方预留出和状态栏高度一样的高度,将状态栏的背景色设置为透明 效果如下: 一般是在s ... 2022是"体育超级大年",冬奥会.亚运会.大运会.世界杯等各类大型体育赛事贯穿全年.由于受到疫情管控和物理空间的限制,赛事直播至关重要,观众体验需求也在不断升级. 于此,企业对直 ... 标签 PostgreSQL , 物联网 , 传感器 , lambda , 调度 , 实时 , 流式更新 , UPSERT , insert on conflict do update 背景 越来越多的 ... 云原生浪潮下,Serverless 正在全面落地.继「云原生 Serverless 技术实践营」广州站火热收官,2022 年,阿里云 Serverless 团队开年巨献,把 "沉浸式 ... 阿里云云原生 Serverless 团队重磅推出"沉浸式"技术实践营,面向企业技术人员,分享 Serverless 的落地实践,多视角碰撞技术观点,实时互动答疑,共同探索 Serv ... Android沉浸式状态栏(透明状态栏)最佳实现 在Android4.4之前,我们的应用没法改变手机的状态栏颜色,当我们打开应用时,会出现上图中左侧的画面,在屏幕的顶部有一条黑色的状态栏,和应用的风格 ... 本文是Netty系列第7篇 上一篇文章我们深入学习了Netty逻辑架构中的核心组件EventLoop和EventLoopGroup,掌握了Netty的线程模型,并且介绍了Netty4线程模型中的无锁串 ...FlutterComponent最佳实践之沉浸式相关推荐
最新文章
热门文章