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

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

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

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

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

相关推荐

C++企业级开发规范指南(c++开发gui)

打造高质量、可维护的C++代码标准一、前言C++作为一门功能强大的系统级编程语言,被广泛应用于操作系统、游戏引擎、高性能服务器、数据库系统等领域。知名互联网公司(如Google、Microsoft、腾...

C++|整型的最值、上溢、下溢、截断、类型提升和转换

整数在计算机内以有限字长表示,当超出最值(有限字长)时,需要截断(溢出,求模)操作。不同字长的整型具有不同的值域,混合运算时,需要类型提升和转换。1整形最值在<limit.h>中有整型的...

C++|漫谈STL细节及内部原理(c++ std stl)

1988年,AlexanderStepanov开始进入惠普的PaloAlto实验室工作,在随后的4年中,他从事的是有关磁盘驱动器方面的工作。直到1992年,由于参加并主持了实验室主任BillWo...

C++11新特性总结 (二)(c++11新特性 pdf)

1.范围for语句C++11引入了一种更为简单的for语句,这种for语句可以很方便的遍历容器或其他序列的所有元素vector<int>vec={1,2,3,4,5,6};f...

C++ STL 漫谈(c++中的stl到底指的什么)

标准模板库(StandardTemplateLibrary,STL)是惠普实验室开发的一个函数库和类库。它是由AlexanderStepanov、MengLee和DavidRMusser在...

C++学习教程_C++语言随到随学_不耽误上班_0基础

C++学习教程0基础学C++也可以,空闲时间学习,不耽误上班.2019年C语言新课程已经上线,随到随学,互动性强,效果好!带你征服C++语言,让所有学过和没有学过C++语言的人,或是正准备学习C++语...

C++遍历vector元素的四种方式(c++ 遍历vector)

vector是相同类型对象的集合,集合中的每个对象有个对应的索引。vector常被称为容器(container)。C++中遍历vector的所有元素是相当常用的操作,这里介绍四种方式。1、通过下标访问...

一起学习c++11——c++11中的新增的容器

c++11新增的容器1:array当时的初衷是希望提供一个在栈上分配的,定长数组,而且可以使用stl中的模板算法。array的用法如下:#include<string>#includ...

C++编程实战基础篇:一维数组应用之投票统计

题目描述班上有N个同学,有五位候选人“A,B,C,D,E”,请所有的同学投票并选举出班长,现在请你编写程序来他们计算候选人的得票总数,每位同学投票将以数字的形式投票“12345”分别代表五位候选人,...

C++20 新特性(6):new表达式也支持数组大小推导

new表达式也支持数组大小推导在C++17标准中,在定义并初始化静态数组时,是可以忽略数组大小,然后通过初始化数据来推导数组的大小。但使用new来定义并初始化动态数组时,并不支持这种自动推导数组大...

C++ 结构体(struct)最全详解(c++结构体用法)

一、定义与声明1.先定义结构体类型再单独进行变量定义structStudent{intCode;charName[20];charSex;intA...

自学 C++ 第 6 课 二维数组找最值

键盘输入一个m×n的二维数组,通过C++编程找出元素中的最大值,并输出其所在的位置坐标。例如,输入一个4×5的二维数组,数组元素分别为{{556623749},{578964563},...

从缺陷中学习C/C++:聊聊 C++ 中常见的内存问题

在写C/C++程序时,一提到内存,大多数人会想到内存泄露。内存泄露是一个令人头疼的问题,尤其在开发大的软件系统时。一个经典的现象是,系统运行了10天、1个月都好好的,忽然有一天宕机了:OOM(Out...

C++开发者都应该使用的十个C++11特性(上)

在C++11新标准中,语言本身和标准库都增加了很多新内容,本文只涉及了一些皮毛。不过我相信这些新特性当中有一些,应该成为所有C++开发者的常规装备。你也许看到过许多类似介绍各种C++11特性的文章。下...

深度解读C/C++指针与数组(c++指针和数组的区别)

指针和数组是密切相关的。事实上,指针和数组在很多情况下是可以互换的。例如,一个指向数组开头的指针,可以通过使用指针的算术运算或数组索引来访问数组。今天我们就来聊一聊数组和指针千丝万缕的关系;一维数组与...