❝以上问题只针对Android,因为iOS没这问题。。。默认就是沉浸式,只能说,Google的设计师,真是不懂行情。 ❞
我们来看下iOS的效果。
没什么好适配的,干就完了了。
状态栏沉浸式
再来看看Android。
这个状态栏,为什么国内的设计师都想干掉它的颜色呢。
首先,我们来修改状态栏的颜色,Flutter提供了SystemChrome.setSystemUIOverlayStyle来修改状态栏和底部导航栏的样式修改,借助它,我们可以很方便的干掉状态栏的默认颜色。
代码语言:javascript复制SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarBrightness: Brightness.light,
),
);
很简单,设置状态栏为透明即可,不过有一点需要注意,那就是statusBarBrightness,如果你后面有用AppBar组件,那么statusBarBrightness需要在AppBar中设置,否则这里的设置会被覆盖而不生效。
既然可以设置成透明,那么当然还可以设置成其它任何你想要的颜色,这里就不演示了。
AppBar沉浸式
下面再来看看AppBar的沉浸式设置,它给我们提供了backgroundColor的设置,我们只需要把默认的elevation干掉即可。
代码语言:javascript复制return Scaffold(
appBar: AppBar(
title: Text(widget.title),
backgroundColor: Colors.transparent,
elevation: 0,
),
但是,效果居然是这样?
没错,因为你还缺少了关键的一步,那就是设置Scaffold的extendBodyBehindAppBar属性。
代码语言:javascript复制return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
title: Text(widget.title),
backgroundColor: Colors.transparent,
elevation: 0,
),
这样就可以实现AppBar的沉浸式了。
ListView的沉浸式
我们把AppBar也干掉,因为有时候我们需要自己来实现AppBar,所以,来看下ListView的沉浸式。
代码语言:javascript复制return Scaffold(
body: Container(
color: Colors.yellow,
child: ListView(
children: List.generate(
100,
(index) => TextButton(
onPressed: () {},
child: Text('$index'),
),
),
),
),
效果差不多,但是为什么顶部有坑?
这是因为ListView在这种场景下,很「智能」的给自己顶部加了默认的padding。我们去掉这个padding就可以了。
代码语言:javascript复制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开小灶,我们还得给它加上设备的判断。
代码语言:javascript复制if (Platform.isAndroid) {
}
除了通过SystemChrome.setSystemUIOverlayStyle设置以外,Flutter也提供了AnnotatedRegion来设置,效果是一样的。
代码语言:javascript复制return AnnotatedRegion<SystemUiOverlayStyle>(
value: const SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarBrightness: Brightness.light,
),
child: Scaffold(