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

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

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

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

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应用框架就做好了。其中欢迎屏中图标的大小,以及文字大小位置等,可以根据自己的需要进行调整。

相关推荐

搭建Oracle数据库服务器(oracle数据库服务器安装教程)

【十一】搭建Oracle数据库服务器...

Oracle 删除大量表记录操作总结(oracle删除表记录数据)

删除表数据操作清空所有表记录TRUNCATETABLEyour_table_name;...

专访搜狗DBA负责人王林平:为何从Oracle转向MySQL?

王林平CSDN:首先,请做个自我介绍,目前所负责的领域以及所在公司。王林平:大家好,我是王林平,目前在搜狗商业平台研发部工作。主要负责商业广告数据库的维护、优化、架构设计、流程体系建设、自动化运维平台...

Oracle数据库知识 day01 Oracle介绍和增删改查

一、oracle介绍ORACLE数据库系统是美国ORACLE公司(甲骨文)提供的以分布式数据库为核心的一组软件产品,是目前最流行的客户/服务器(CLIENT/SERVER)或B/S体系结构...

深入探索Oracle 回表原理、影响与优化技巧

什么是回表当对一个列创建索引之后,索引会包含该列的键值以及键值对应行所在的rowid。通过索引中记录的rowid访问表中的数据就叫回表。执行计划中的TABLEACCESSBYINDEXROW...

那些年我们踩过的语句创建oracle 12c cdb实例的坑

现在大多数客户使用oracle还是11g版本的,很多小伙伴可能还没接触过12c,所以今天小编要为大家科普下12c版本的oracle的安装过程中会出现的错误。前面步骤其实都是一样的,我们就直接从建好1...

Oracle高级数据库特性揭秘:存储过程、触发器与权限管理

当谈论Oracle高级数据库特性时,存储过程和函数、触发器、权限管理和安全性以及数据库连接和远程访问是关键概念。下面我将为每个主题提供详细的解释,并附上高质量示例。...

ORACLE内核解密之表空间管理(oracle表空间大小是由什么决定)

一、ORACLE表空间管理1、本地表空间管理tablespace(LMT)...

Oracle 创建磁盘组报错ORA-15137的问题分析与解决思路

ASM扩容本来是件很简单的事,当ASM磁盘准备好之后,直接一条命令就会添加上。但是也会有异常情况,最近就碰到Oracle19c在扩容时报错的故障,供大家参考。...

DBA日记之Oracle数据库索引一(oracle数据库索引有哪几种)

什么是索引在oracle数据库中,索引是数据库中一种可选的数据结构,通常与表或簇相关。用户可以在表的一列或数列上建立索引,以提高在此表上执行SQL语句的性能。就像本文档的索引可以帮助读者快速定位所...

利用Oracle触发器实现不同数据库之间的数据同步

首先在两个数据库之间创建链接(DBLink),然后对要同步地表做一个同义(synonym),最后建一个触发器实现同步。实现步骤如下:1)为保证连接到另一台远程服务器的数据库,需要建立一个DBLin...

oracle已有表的分表分区优化操作步骤(单表过大)

第一章、步骤总览0、获取创建表空间DDL、创建表空间(该步骤在将分区放入不同的表空间时采用)...

Oracle 表分区在线重定义(oracle表分区后查询语句改变吗)

表分区有以下优点:a、改善查询性能:对分区对象的查询可以仅搜索自己关心的分区,提高检索速度。b、增强可用性:如果表的某个分区出现故障,表在其他分区的数据仍然可用;c、维护方便:如果表的某个分区出现故障...

ORACLE 体系 - 14(oracle 11g的体系结构有几种)

【十四】数据移动...

Oracle-架构、原理、进程(oracle进程结构)

详解:首先看张图:对于一个数据库系统来说,假设这个系统没有运行,我们所能看到的和这个数据库相关的无非就是几个基于操作系统的物理文件,这是从静态的角度来看,如果从动态的角度来看呢,也就是说这个数据库系统...