HarmonyOS 鸿蒙Next FLUTTER_SPLASH_SCREEN 鸿蒙场景化代码

介绍

该Demo演示如何设在Flutter工程中设置闪屏页

demo详情链接

https://gitee.com/scenario-samples/sample-demo/blob/master/splashscreen/README.md

更多关于HarmonyOS 鸿蒙Next FLUTTER_SPLASH_SCREEN 鸿蒙场景化代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

htzhanglong 1楼•5 天前

更多关于HarmonyOS 鸿蒙Next FLUTTER_SPLASH_SCREEN 鸿蒙场景化代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

在HarmonyOS（鸿蒙）系统中，关于FLUTTER_SPLASH_SCREEN（Flutter启动屏）的鸿蒙场景化代码，通常涉及使用ArkUI（ArkUI包含eTS和JS扩展版）进行开发。以下是一个简化的示例代码，用于展示如何在鸿蒙应用中实现Flutter启动屏：

@Entry
@Component
struct SplashScreen {
  @State private isLoading: boolean = true;

  build() {
    if (this.isLoading) {
      // 显示启动屏
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Image($r('app.media.splash'))
          .width('100%')
          .height('100%')
      }
    } else {
      // 跳转到主页面
      navigator.push({ uri: 'pages/MainPage/MainPage' });
    }

    // 模拟加载过程，一段时间后跳转到主页面
    setTimeout(() => {
      this.isLoading = false;
    }, 3000); // 3秒后跳转
  }
}

上述代码创建了一个简单的启动屏，显示一张图片（app.media.splash），并在3秒后跳转到主页面（MainPage）。注意，实际应用中，加载逻辑可能更为复杂，比如基于数据加载状态进行跳转。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html