百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT技术 > 正文

鸿蒙NEXT+Flutter开发6-应用属性个性化

wptr33 2024-12-05 17:00 23 浏览

为了进一步表明应用的归属,需要对应用的各种属性进行调整,一般包括应用的图标、应用名称等,并且会加入欢迎屏改善用户打开应用时的使用体验。

1.修改应用图标

鸿蒙应用的图标文件为app_icon.png,其存储路径为:ohos/AppScope/resources/base/media/appicon.png,大小为114×114像素。将其替换为自己的图标文件即可。

2.修改应用标题为中文

修改文件ohos/entry/src/main/resources/zh_CN/element/string.json,将其中名称为EntryAbility_label的值修改为应用的中文标题:演示1。

{
      "name": "EntryAbility_label",
      "value": "演示1"
    }

3.修改应用切换时显示的标题

创建的Flutter应用,其默认标题为“Flutter Demo”。为了得到更好的一致性,在VS Code中打开main.dart文件,将其中的title项修改为“演示1”,在对应用进行多语言处理时,将会讲到如何根据系统语言动态调整标题名称。   需要修改的代码如下:

Widget build(BuildContext context) {
    return MaterialApp(
      title: '演示1', // 默认为:Flutter Demo
      theme: ThemeData(
        // This is the theme of your application.

4.修改应用启动时显示图标

在应用启动时,鸿蒙NEXT应用默认显示应用图标作为欢迎屏,需要将其修改为自己的图标。文件路径为:ohos/entry/src/main/resources/base/media/icon.png。

5.添加渐变欢迎屏

由于Flutter窗口加载需要一定的时间,步骤4显示的图标欢迎屏消失之后,在Flutter主窗口出现之前,还有一个短暂的时间显示为空白屏,比较影响用户体验。故可以在Flutter主窗口显示之前,加入一个渐进渐出的处理,使得主窗口显示不是那么突兀。   使用DevEco Studio打开ohos目录,找到ohos/entry/src/main/ets/pages/index.ets,修改build函数代码如下:

build() {
      Stack() {
        FlutterPage({ viewId: this.viewId })
        // 是否需要显示欢迎屏
        if(this.showSplash)
        {
          // 白底
          Rect()
            .fill(Color.White)
            .width('100%')
            .height('100%')
          // 图标
          Image($r('app.media.icon'))
            .objectFit(ImageFit.None)
            .borderRadius(500)
            .rotate({ angle: this.rotateValue })
            .opacity(this.opacityValue)
            .offset({ y: `-${'15%'}` })
            .animation({curve: Curve.EaseOut })
          // 应用名称
          Column() {
            Text($r('app.string.EntryAbility_label'))
              .fontColor(Color.Black)
              .fontSize('24fp')
              .fontWeight(FontWeight.Medium)
            // 公司名称
            Text($r('app.string.vendor_name'))
              .fontSize('16fp')
              .fontColor(Color.Black)
              .margin({ top: '15vp' })
            // 网址
            Text('www.cdrviewer.com')
              .fontSize('14fp')
              .fontColor(Color.Black)
              .margin({ top: '15vp' })
          }
          .rotate({ angle: this.rotateValue })
          // 控制透明度
          .opacity(this.opacityValue)
          .offset({ y: '25%' })
          // 控制动画曲线
          .animation({curve: Curve.EaseOut })
        }
      }
  }

其中this.showSplash用来控制是否显示欢迎屏,this.opacityValue用来控制显示的透明度。在aboutToAppear函数中启动定时器,aboutToDisappear函数中关闭定时器。这样就可以在Flutter主窗口出现之前,有2秒钟的渐进渐出动画,相对平滑的过渡到Flutter的主页面。主要代码如下:

@State countdown: number = 2;
  @State showSplash: boolean = true;
  private timer: number = -1;

  @State animate: boolean = false;
  private opacityValue: number = 0;
  @State rotateValue: number = 0; // Rotation angle of component 1.

  aboutToAppear(): void {
    this.startTiming();
  }

  aboutToDisappear() {
    this.clearTiming();
  }

  startTiming() {
    this.timer = setInterval(() => {
      this.countdown--;
      if (this.countdown === 0) {
        this.clearTiming();
        this.showSplash = false;
      }
      this.animate = !this.animate;
      this.opacityValue = this.animate ? 1 : 0.3;
      this.rotateValue = this.animate ? 0.1 : -0.1;
    }, 1000);
    setTimeout(()=>{
      this.animate = !this.animate;
      this.opacityValue = this.animate ? 1 : 0;
      this.rotateValue = this.animate ? 0.1 : -0.1;
      }, 0
    );
}

  clearTiming() {
    if (this.timer !== -1) {
      clearInterval(this.timer);
      this.timer = -1;
    }
  }

欢迎屏页面如下所示:

通过前面的步骤,这样一个个性化的鸿蒙NEXT应用框架就做好了。其中欢迎屏中图标的大小,以及文字大小位置等,可以根据自己的需要进行调整。

相关推荐

MySQL进阶五之自动读写分离mysql-proxy

自动读写分离目前,大量现网用户的业务场景中存在读多写少、业务负载无法预测等情况,在有大量读请求的应用场景下,单个实例可能无法承受读取压力,甚至会对业务产生影响。为了实现读取能力的弹性扩展,分担数据库压...

Postgres vs MySQL_vs2022连接mysql数据库

...

3分钟短文 | Laravel SQL筛选两个日期之间的记录,怎么写?

引言今天说一个细分的需求,在模型中,或者使用laravel提供的EloquentORM功能,构造查询语句时,返回位于两个指定的日期之间的条目。应该怎么写?本文通过几个例子,为大家梳理一下。学习时...

一文由浅入深带你完全掌握MySQL的锁机制原理与应用

本文将跟大家聊聊InnoDB的锁。本文比较长,包括一条SQL是如何加锁的,一些加锁规则、如何分析和解决死锁问题等内容,建议耐心读完,肯定对大家有帮助的。为什么需要加锁呢?...

验证Mysql中联合索引的最左匹配原则

后端面试中一定是必问mysql的,在以往的面试中好几个面试官都反馈我Mysql基础不行,今天来着重复习一下自己的弱点知识。在Mysql调优中索引优化又是非常重要的方法,不管公司的大小只要后端项目中用到...

MySQL索引解析(联合索引/最左前缀/覆盖索引/索引下推)

目录1.索引基础...

你会看 MySQL 的执行计划(EXPLAIN)吗?

SQL执行太慢怎么办?我们通常会使用EXPLAIN命令来查看SQL的执行计划,然后根据执行计划找出问题所在并进行优化。用法简介...

MySQL 从入门到精通(四)之索引结构

索引概述索引(index),是帮助MySQL高效获取数据的数据结构(有序),在数据之外,数据库系统还维护者满足特定查询算法的数据结构,这些数据结构以某种方式引用(指向)数据,这样就可以在这些数据结构...

mysql总结——面试中最常问到的知识点

mysql作为开源数据库中的榜一大哥,一直是面试官们考察的重中之重。今天,我们来总结一下mysql的知识点,供大家复习参照,看完这些知识点,再加上一些边角细节,基本上能够应付大多mysql相关面试了(...

mysql总结——面试中最常问到的知识点(2)

首先我们回顾一下上篇内容,主要复习了索引,事务,锁,以及SQL优化的工具。本篇文章接着写后面的内容。性能优化索引优化,SQL中索引的相关优化主要有以下几个方面:最好是全匹配。如果是联合索引的话,遵循最...

MySQL基础全知全解!超详细无废话!轻松上手~

本期内容提醒:全篇2300+字,篇幅较长,可搭配饭菜一同“食”用,全篇无废话(除了这句),干货满满,可收藏供后期反复观看。注:MySQL中语法不区分大小写,本篇中...

深入剖析 MySQL 中的锁机制原理_mysql 锁详解

在互联网软件开发领域,MySQL作为一款广泛应用的关系型数据库管理系统,其锁机制在保障数据一致性和实现并发控制方面扮演着举足轻重的角色。对于互联网软件开发人员而言,深入理解MySQL的锁机制原理...

Java 与 MySQL 性能优化:MySQL分区表设计与性能优化全解析

引言在数据库管理领域,随着数据量的不断增长,如何高效地管理和操作数据成为了一个关键问题。MySQL分区表作为一种有效的数据管理技术,能够将大型表划分为多个更小、更易管理的分区,从而提升数据库的性能和可...

MySQL基础篇:DQL数据查询操作_mysql 查

一、基础查询DQL基础查询语法SELECT字段列表FROM表名列表WHERE条件列表GROUPBY分组字段列表HAVING分组后条件列表ORDERBY排序字段列表LIMIT...

MySql:索引的基本使用_mysql索引的使用和原理

一、索引基础概念1.什么是索引?索引是数据库表的特殊数据结构(通常是B+树),用于...