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

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

liuian 2025-01-23 18:43 38 浏览

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

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

相关推荐

电脑完全黑屏了但是能开机(电脑黑屏但还是开机状态咋办)

1.目前造成计算机黑屏的原因主要有两个,一是硬件的故障,二是软件的冲突,而二者的区别主要在于发生黑屏的位置,即是在开机时发生黑屏,还是在正常启动机器后,在使用的过程中出现黑屏。    2.在开机后突然...

ghost xp系统镜像(xp系统镜像文件在哪里)

一、所需工具1、大白菜U盘:大白菜u盘制作教程2、操作系统:ghostxpsp3纯净版3、启动设置:怎么设置开机从U盘启动4、分区教程:大白菜u盘装系统分区教程二、ghostxp系统镜像文件u...

重装机兵下载手机版(重装机兵官方下载)

如果你想下载重装机兵iOS版,你可以按照以下步骤进行:1.打开AppStore应用,确保你已经登录了你的AppleID账号。2.在AppStore的搜索栏中,输入“重装机兵”进行搜索。3....

windows10自动关机设置(win10设置自动关机最简单方法)

打开「运行」窗口(快捷键:Win+R);输入「shutdown-s-t{时间}」,其中「{时间}」是具体的关机时间,单位为秒;点击「确定」,设置完成;你也可以通过任务计划器来设置自动关...

磊科路由器修改wifi密码(磊科路由器怎么重设密码)

您好,您可以按照以下步骤重置磊科路由器密码:1.找到您的磊科路由器,并将其连接到电脑或手机上。2.打开浏览器,输入路由器的IP地址(通常为192.168.1.1或192.168.0.1)...

笔记本电脑驱动精灵下载(笔记本电脑驱动精灵下载什么软件)

当然可以下载,可以使用各种手机浏览器进行下载。例如百度浏览器,QQ浏览器,手机百度等,你可以先在手机上查找一下对应浏览器的下载路径。然后直接在百度搜索。驱动精灵,选择下载即可。下载时重命名文件,以免在...

路由器dhcp服务异常(路由器dhcp服务异常什么意思)

将路由器dhcp服务关闭再重启。具体步骤如下:1、首先,翻看路由器底部的铭牌或使用说明书,找到路由器IP、默认帐号及密码。2、打开浏览器,输入查询到的IP地址并按下回车,如192.168.1.1如输入...

电脑怎么连接无线网络怎么设置

电脑连接WiFi的步骤如下:1.打开电脑的网络设置界面,在可用的网络中选择要连接的WiFi网络;2.输入正确的WiFi密码,点击连接;3.等待电脑连接到WiFi网络,一般会提示连接成功;4.如...

金士顿u盘属于什么档次(金士顿u盘正品价格)

金士顿作为全球知名的存储品牌,其U盘产品在市场上具有较高的口碑。金士顿U盘凭借其优良的性能、稳定的传输速度、精致的外观以及实用的容量,受到了许多消费者的喜爱。一般来说,金士顿U盘在质量、速度和耐用性...

qq设置了隐私密码忘了(如果qq隐私密码忘记了怎么办)

一、可以选择通过“验证密保找回密码”方式。1.点击按钮进入验证界面。2.进行密保问题验证。3.输入新密码和其它内容,完成修改。二、如果忘记了密保问题,那么可以通过已经绑定的手机号,通过短信验证来找回密...

怎么开机一键ghost还原系统(电脑开机的一键ghost)

首先要确认电脑硬盘中是否有预先制作好的GHOST镜像文件,如果有,打开电脑,在开机时按下相应的快捷键进入电脑的BIOS设置界面,将启动方式设置为从外部设备启动,然后将已经制作好的GHOST镜像文件装载...

手机ip地址是实时位置吗(手机ip地址是指手机还是手机号码)

这个不一定,在不用代理的情况下,如果你用的是WIFI,那么是的,如果你用的是移动数据,有可能你在省界附近会接受到对面省份的基站的信号,那么你的ip属地就会是对面省份,如果你用代理,那就看你用的ip属地...

协同办公平台系统(协同办公平台系统oa里我的钱包怎么提现)

社会发展日新月异,当前社会已是网络社会,是信息化的社会。传统的手工办公模式耗时、耗力、繁杂、重复,而且离开办公室将很难处理,这些已经远远不能满足新形势下大型企业发展的需要。在信息化技术、高速发展的今天...

密钥下载软件(密钥下载软件安全吗)

是的,只要密钥正确就能激活,但现在大部分激活码都因为使用次数过多而失效,建议使用激活工具。1、电脑登陆并下载我上传的附件。2、下载完成后点击激活工具,按提示操作即可。无法获取密钥可能是因为多种原因...

bluescreen异常关机(bluescreenview怎么修复蓝屏)

这个问题我遇到过,极有可能是某次系统更新没有完成就关机引起的(当然很多人会说内存不良)看看卸载掉最近的windows系统更新,然后让系统重新自动更新一下试试吧。