HarmonyOS 鸿蒙Next Flutter如何将图片设置为启动图

发布于 1周前 作者 caililin 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Flutter如何将图片设置为启动图 Flutter鸿蒙如何将图片设置为启动图？

Harmonyos Next教程
2 回复

在module.json5配置文件中有startWindowIcon和startWindowBackground设置，UIAbility组件启动页面图标和背景颜色设置，但是不是真正意义上的启动页。需要伙伴自己手动创建splash页面

参考demo

@Entry
@Component
struct Index {
  private timeOutId: number = 0

  aboutToAppear() {

    this.timeOutId = setTimeout(() => {

      // router.replaceUrl({ url: "pages/MainViewPage" })
      // .catch((err: Error) => {
      //
      // })
    }, 3000);
  }

  aboutToDisappear() {
    clearTimeout(this.timeOutId);
  }

  build() {
    Row() {
      Column() {
        Stack() {
          Column() {
            Image($r("app.media.ic_title"))
              .backgroundColor(Color.Red)
              .width(456 / 5)
              .margin({
                bottom: 5
              })
            Text("Hello World")
              .fontSize(12)
          }
          .justifyContent(FlexAlign.End)
          .height("80%")
        }
      }
      .width("100%")
    }
    .height("100%")
  }
}

更多关于HarmonyOS 鸿蒙Next Flutter如何将图片设置为启动图的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在HarmonyOS（鸿蒙）系统中，使用Flutter框架将图片设置为应用的启动图（Splash Screen），通常涉及到Flutter项目的配置和资源的引用。以下是实现这一功能的基本步骤：

  1. 准备图片资源： 确保你的图片资源（如splash.png）已放置在Flutter项目的assets文件夹中，并在pubspec.yaml文件中正确声明：

    flutter:
  assets:
    - assets/splash.png

  2. 创建启动图逻辑： 在lib/main.dart文件中，你可以使用Image.asset来显示启动图，并结合Future.delayed或其他异步逻辑在一段时间后切换到主应用界面。例如：

    import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SplashScreen(),
    );
  }
}

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 3), () {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image.asset('assets/splash.png'),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(child: Text('Welcome to Home Screen!')),
    );
  }
}

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

回到顶部