? ? 為了進一步表明應用的歸屬,需要對應用的各種屬性進行調整,一般包括應用的圖標、應用名稱等,并且會加入歡迎屏改善用戶打開應用時的使用體驗。
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應用框架就做好了。其中歡迎屏中圖標的大小,以及文字大小位置等,可以根據自己的需要進行調整。