【Flutter】Flutter 启动白屏问题 ( 问题描述 | 在 launch_background.xml 中设置启动过渡 UI )

简介: 【Flutter】Flutter 启动白屏问题 ( 问题描述 | 在 launch_background.xml 中设置启动过渡 UI )

文章目录

一、Flutter 启动白屏问题

二、在 launch_background.xml 中设置启动过渡 UI






一、Flutter 启动白屏问题


启动 Flutter 应用 , 在 Launcher 主界面中 , 点击 Flutter 应用图标 , 之后出现白屏 1 ~ 5 秒 , 才能显示 Flutter 界面 ;


手机性能越高 , 白屏时间越短 ;


image.png


上述启动白屏问题 , 是 Flutter 框架自身的问题 , 不论是 Android 还是 iOS , 都会有上述问题 ;



Flutter 应用启动时 , 会先初始化 Flutter SDK , 然后将 Flutter 代码和资源加载到内存中 , 在内存中进行图像渲染 ;


从 Flutter 启动 , 到 渲染完毕 , 这个过程之间 , 没有任何内容显示 , 因此会出现白屏 ;



解决上述问题 , 与 Android 启动优化类似 , 给其加载一个默认背景界面 , 让 Flutter 应用在白屏的这几秒 , 显示一个图片 ;



直接参考 Android 启动优化方案 【Android 性能优化】应用启动优化 ( 主题背景图片设置 | 设置透明主题背景 | 设置应用启动主题背景、启动后恢复主题 ) ;






二、在 launch_background.xml 中设置启动过渡 UI


目前 Flutter 解决上述问题 , 已经比较完善 , 不需要做过多的设置 ;


打开 Flutter 工程下的 Android 工程的 , 可以看到如下注释 :


     

<!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
              />
            <!-- Displays an Android View that continues showing the launch screen
                 Drawable until Flutter paints its first frame, then this splash
                 screen fades out. A splash screen is useful to avoid any visual
                 gap between the end of Android's launch screen and the painting of
                 Flutter's first frame. -->
            <meta-data
              android:name="io.flutter.embedding.android.SplashScreenDrawable"
              android:resource="@drawable/launch_background"
              />


配置的 io.flutter.embedding.android.SplashScreenDrawable 参数 , 就是在 Android 启动过后到 Flutter 渲染之前 , 显示的 Android 视图 , 该视图会慢慢淡出 ;


将 launch_background.xml 设置为如下配置 , 打开 第二个 item 注释 , 然后配置一个图片 ;


<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />
    <!-- You can insert your own image assets here -->
     <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_launcher" />
    </item>
</layer-list>


注意 , 有 2 22 个 launch_background.xml 配置文件 , 都需要修改 , 不要漏掉 ;

image.png



Flutter 的启动变成下面的样式 : 在 Flutter 渲染完成之前 , 显示一张图像 ; 这里也可以显示动画 ;



image.png





目录
相关文章
|
6月前
|
XML 前端开发 数据格式
请描述如何使用`BeautifulSoup`或其他类似的库来解析 HTML 或 XML 数据。
【2月更文挑战第22天】【2月更文挑战第67篇】请描述如何使用`BeautifulSoup`或其他类似的库来解析 HTML 或 XML 数据。
75 2
|
6月前
|
算法 前端开发 C++
【Qt UI相关】Qt设置窗体或控件的背景色透明
【Qt UI相关】Qt设置窗体或控件的背景色透明
710 0
|
1月前
|
API 容器
Flutter UI组件库(JUI)
Flutter UI组件库(JUI)
118 17
|
5月前
|
存储 开发框架 JavaScript
深入探讨Flutter中动态UI构建的原理、方法以及数据驱动视图的实现技巧
【6月更文挑战第11天】Flutter是高效的跨平台移动开发框架,以其热重载、高性能渲染和丰富组件库著称。本文探讨了Flutter中动态UI构建原理与数据驱动视图的实现。动态UI基于Widget树模型,状态变化触发UI更新。状态管理是关键,Flutter提供StatefulWidget、Provider、Redux等方式。使用ListView等可滚动组件和StreamBuilder等流式组件实现数据驱动视图的自动更新。响应式布局确保UI在不同设备上的适应性。Flutter为开发者构建动态、用户友好的界面提供了强大支持。
101 2
|
1月前
|
Android开发 开发者 容器
flutter:&UI布局 (六)
本文档介绍了Flutter中的UI布局方式,包括线性布局(如Column和Row)、非线性布局(如Stack、Flex、Positioned)以及Wrap布局等。通过具体示例代码展示了如何使用这些布局组件来构建灵活多变的用户界面,例如使用Column垂直排列文本、使用Stack叠加组件、以及利用Wrap实现自动换行的按钮布局等。
|
4月前
|
设计模式 编解码 API
Flutter UI设计模式与实现:深入探索与实践
【7月更文挑战第20天】Flutter以其独特的声明式UI模式和丰富的UI组件库,为移动应用开发提供了强大的支持。通过深入理解Flutter的UI设计模式和实现技巧,开发者可以构建出高性能、可维护性强的UI界面。同时,随着Flutter生态的不断完善和发展,相信未来Flutter将在移动应用开发领域发挥更加重要的作用。
|
3月前
Flutter 状态管理新境界:多Provider并行驱动UI
Flutter 状态管理新境界:多Provider并行驱动UI
71 0
|
4月前
|
XML 开发工具 数据格式
自定义 DSL 流程图(含XML 描述邮件,XML 描述流程图)
自定义 DSL 流程图(含XML 描述邮件,XML 描述流程图)
39 0
自定义 DSL 流程图(含XML 描述邮件,XML 描述流程图)
|
5月前
|
Android开发 开发者
Android UI设计中,Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等,定义在`styles.xml`。
【6月更文挑战第26天】Android UI设计中,Theme定义了Activity的视觉风格,包括颜色、字体、窗口样式等,定义在`styles.xml`。要更改主题,首先在该文件中创建新主题,如`MyAppTheme`,覆盖所需属性。然后,在`AndroidManifest.xml`中应用主题至应用或特定Activity。运行时切换主题可通过重新设置并重启Activity实现,或使用`setTheme`和`recreate()`方法。这允许开发者定制界面并与品牌指南匹配,或提供多主题选项。
85 6
|
4月前
|
JavaScript API
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
625 0