对酒当歌,人生几何。——曹操
随着Flutter的兴起,移动端开发又简洁很多啦。不管怎么变,我们还是可以实现我们想要的效果
开发中常见的就是欢迎页启动要全屏,首页需要显示为沉浸式状态栏。效果大致如下:
有原生开发基础的同时,我们需要UI设计给我们设计低、中、高、超高、超超高分辨率的图片放置在创建工程文件的不同目录下;分别对应(drawable、drawable-hdpi、drawable-xhdpi、drawable-xxhdpi、drawable-xxxhdpi)
1、设置启动页样式,防止启动页黑屏:
<activity
android:name=".SplashActivity"
android:hardwareAccelerated="true"
android:launchMode="singleTop"
android:theme="@style/LaunchTheme"
android:windowSoftInputMode="adjustResize">
<meta-data
android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
android:value="true" />
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
2、设置MainActivity页样式,防止导航到该页面黑屏:
<activity
android:name=".MainActivity"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:launchMode="singleTop"
android:theme="@style/LaunchThemeMain"
android:windowSoftInputMode="adjustResize">
<meta-data
android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
android:value="true" />
</activity>
3、样式:
适配安卓5.0以下样式放置在values文件夹下
适配安卓5.0-9.0的样式放置在values-v21文件夹下
适配安卓9.0以上的样式放置在values-v28文件夹下
values文件夹下styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--SplashActivity样式-->
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
<!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame -->
<item name="android:windowBackground">@drawable/launch_background</item>
<item name="android:windowFullscreen">true</item>//全屏即无通知栏
</style>
<!--MainActivity样式-->
<style name="LaunchThemeMain" parent="@android:style/Theme.Black.NoTitleBar">
<!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame -->
<item name="android:windowBackground">@drawable/launch_background</item>
<item name="android:windowFullscreen">false</item>//全屏即无通知栏
</style>
</resources>
values-v21文件夹styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--SplashActivity样式-->
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
<!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame -->
<item name="android:windowBackground">@drawable/launch_background</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
<item name="android:windowFullscreen">true</item>//全屏即无通知栏
</style>
<!--MainActivity样式-->
<style name="LaunchThemeMain" parent="@android:style/Theme.Black.NoTitleBar">
<!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame -->
<item name="android:windowBackground">@drawable/launch_background</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
<item name="android:windowFullscreen">false</item>//全屏即无通知栏
</style>
</resources>
values-v28文件夹下styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--SplashActivity样式-->
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
<!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame -->
<item name="android:windowBackground">@drawable/launch_background</item>
<!--<item name="android:windowFullscreen">true</item>-->
<!--不让windowBackground延申到navigation bar区域-->
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
<!--适配Android P刘海屏-->
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
<item name="android:windowFullscreen">true</item>//全屏即无通知栏
</style>
<!--MainActivity样式-->
<style name="LaunchThemeMain" parent="@android:style/Theme.Black.NoTitleBar">
<!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame -->
<item name="android:windowBackground">@drawable/launch_background</item>
<!--<item name="android:windowFullscreen">true</item>-->
<!--不让windowBackground延申到navigation bar区域-->
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
<!--适配Android P刘海屏-->
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
<item name="android:windowFullscreen">false</item>//全屏即无通知栏
</style>
</resources>
4、导航到Flutter MyApp后希望能看到沉浸式状态栏, MyApp继承自StatelessWidget(是不可变的,所有的值是最终的)。
所以选择沉浸式属性的初始化在StatelessWidget中build 函数下。
if (Platform.isAndroid) {
SystemUiOverlayStyle systemUiOverlayStyle =
SystemUiOverlayStyle(statusBarColor: Colors.transparent);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
参考:
支持不同像素密度:https://developer.android.google.cn/training/multiscreen/screendensities#java
SystemChrome:https://www.jianshu.com/p/540dccbd5a51