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

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

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

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

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

相关推荐

ie8浏览器是什么意思(ie8浏览器是什么样子的)
ie8浏览器是什么意思(ie8浏览器是什么样子的)

IE8浏览器发布于2009年3月,携手Windows7,安全性得到非常大的增强,可以下载超过4G的文件,也是微软第一个64位版浏览器。微软的IE浏览器,版本是8——11原名叫MicrosoftInternetExplorer是微软...

2025-11-11 05:55 liuian

怎么登陆qq邮箱(163邮箱怎么登陆qq邮箱)
怎么登陆qq邮箱(163邮箱怎么登陆qq邮箱)

1.以苹果iPhone12、iOS15.3为例。选qq邮箱在苹果手机邮件应用页,点击“qq邮箱”选项。2.点下一步输入帐号密码,点击“下一步”。3.验证登录验证完成后,进行登录即可。...

2025-11-11 05:05 liuian

win7纯净旗舰版下载(win7 纯净版)

下载win7纯净版方法如下:在电脑上打开搜索软件,在搜索框里搜寻微软官方网址,打开官网后,第一条进入找到系统版本选择WIN7纯净版,点击立即下载将下载地址设置为本地C盘,下载进度100%后就下载成功...

大白菜重装系统详细步骤(大白菜重装系统步骤和详细教程)

u盘大白菜重装系统的步骤~~1、首先将u盘制作成大白菜u盘启动盘,重启电脑等待出现开机画面按下启动快捷键,选择u盘启动进入到大白菜主菜单,选取“【02】运行大白菜Win8PE装机维护版(新机器)”选项...

office plus官方网站(officeplus官方网站公众号)

1、选中你想要添加翻页的ppt页面,我们这里以这个ppt的第二个页面为例。;2、在页面上方的菜单栏找到“切换'这个选项,选择”切换“中的”页面卷曲“动画效果。;3、设置完毕后,如果你想要选择翻...

u盘制作启动盘后如何恢复原来的样子

可以通过U盘启动盘制作工具的恢复普通盘功能将制作了启动盘的U盘恢复为一个普通U盘,这类制作工具核心相同,都可以实现删除隐藏启动文件的功能,下面以电脑店启动盘制作工具为例:1、将U盘插入电脑,然后运行电...

xp系统安装版免费版华为版(windows xp 安装版)

1、点击主界面中的【设置】进入到设置界面,然后向下滑动即可找到【开发者选项】,点击进入。2、点击【开发者选项】右边的按钮打开此功能,然后在弹出的提示框中选择【确定】。值得注意的是,启用这个功能可能会导...

手机网页自动翻译插件(手机网页自动翻译插件免费版)

找到了吗你好;苹果自带浏览器添加书签按也是要占用手机内存的,自带浏览器的安装包太大,会影响手机运行的,你可以下载一个QQ浏览器。它的安装包很小,不影响手机运行,它使用的极速内核,有着神速一般的浏览体验...

0x0000007e(0X0000007E)

错误分析系统进程会生成错误,但是Windows错误处理器无法捕获它。蓝屏无法正常进入系统或无法正常运行,这通常是由软件或硬件故障引起的。原因有很多,原因很复杂,例如系统文件损坏,病毒感染,后台自启动程...

联想笔记本电脑键盘介绍图(联想笔记本电脑键盘功能基础知识解释图)

ESC键:另一个名称叫做逃逸键,在填用户名或者打错的时候使用ESC键,可以清理所有的框内内容,较为便利。Tab键:Tab键是Table(表格)的简写,所有也被人们称作表格键,在文本文档时,按这个键,光...

wifi万能钥匙正版下载(wifi万能钥匙下载最新版)

1、首先打开手机应用中心下载安装wifi万能钥匙。;;2、安装完成后,点击打开wifi万能钥匙即可使用。;具体使用...

好看电脑桌面壁纸高清(好看电脑桌面壁纸高清搞怪)

首先,在桌面点击右键,然后进入属性,然后进入显示,然后上面写着屏幕分辨率,再按照分辨率下载壁纸  以下为调整电脑桌面清晰度步骤:  1,启动电脑,来到桌面,在空白处,单击鼠标右键,去打开桌面右键菜单...

iso国际标准(ISO国际标准键盘)

6000iso流明相当于7500ansi流明。6000÷0.8等于7500ansi流明ANSI流明是美国的亮度标准,ISO流明是国际标准,目前普遍将ANSI流明和ISO流明按照1:0.8的比例换算,即...

win7家庭高级版和专业版(win7系统家庭高级版)

①如果你是自己用,不是在公司用,一般是用不出什么区别的,兼容性和性能上毫无区别,只是功能上有所取舍;②两者在高级安全性和商业部署上有所区别,专业版比家庭版多了Bitlocker(磁盘加密技术)、组策略...

win11怎么样(win11怎么样删除软件)

win11适合打游戏的。主要原因如下:1、win11的升级并不会丢失原本系统中的文件和软件,因此用户可以在升级后直接玩原本的游戏。2、win11虽然是一款新系统,但是在游戏性能的表现上已经有着非常好的...