? ? 為了進(jìn)一步表明應(yīng)用的歸屬，需要對(duì)應(yīng)用的各種屬性進(jìn)行調(diào)整填渠，一般包括應(yīng)用的圖標(biāo)稠屠、應(yīng)用名稱(chēng)等蒂窒，并且會(huì)加入歡迎屏改善用戶(hù)打開(kāi)應(yīng)用時(shí)的使用體驗(yàn)。
1.修改應(yīng)用圖標(biāo)
? ? 鴻蒙應(yīng)用的圖標(biāo)文件為app_icon.png蹭睡，其存儲(chǔ)路徑為：ohos/AppScope/resources/base/media/appicon.png善炫，大小為114×114像素勒叠。將其替換為自己的圖標(biāo)文件即可欧漱。
2.修改應(yīng)用標(biāo)題為中文
? ? 修改文件ohos/entry/src/main/resources/zh_CN/element/string.json职抡，將其中名稱(chēng)為EntryAbility_label的值修改為應(yīng)用的中文標(biāo)題：演示1。
{
? ? ? "name": "EntryAbility_label",
? ? ? "value": "演示1"
? ? }
3.修改應(yīng)用切換時(shí)顯示的標(biāo)題
? ? 創(chuàng)建的Flutter應(yīng)用误甚，其默認(rèn)標(biāo)題為“Flutter Demo”缚甩。為了得到更好的一致性，在VS Code中打開(kāi)main.dart文件窑邦，將其中的title項(xiàng)修改為“演示1”蹄胰，在對(duì)應(yīng)用進(jìn)行多語(yǔ)言處理時(shí)，將會(huì)講到如何根據(jù)系統(tǒng)語(yǔ)言動(dòng)態(tài)調(diào)整標(biāo)題名稱(chēng)奕翔。
? ? 需要修改的代碼如下：
Widget build(BuildContext context) {
? ? return MaterialApp(
? ? ? title: '演示1', // 默認(rèn)為：Flutter Demo
? ? ? theme: ThemeData(
? ? ? ? // This is the theme of your application.
4.修改應(yīng)用啟動(dòng)時(shí)顯示圖標(biāo)
? ? 在應(yīng)用啟動(dòng)時(shí)，鴻蒙NEXT應(yīng)用默認(rèn)顯示應(yīng)用圖標(biāo)作為歡迎屏浩蓉，需要將其修改為自己的圖標(biāo)派继。文件路徑為：ohos/entry/src/main/resources/base/media/icon.png。
5.添加漸變歡迎屏
? ? 由于Flutter窗口加載需要一定的時(shí)間捻艳，步驟4顯示的圖標(biāo)歡迎屏消失之后驾窟，在Flutter主窗口出現(xiàn)之前，還有一個(gè)短暫的時(shí)間顯示為空白屏认轨，比較影響用戶(hù)體驗(yàn)绅络。故可以在Flutter主窗口顯示之前，加入一個(gè)漸進(jìn)漸出的處理嘁字，使得主窗口顯示不是那么突兀恩急。
  使用DevEco Studio打開(kāi)ohos目錄，找到ohos/entry/src/main/ets/pages/index.ets纪蜒，修改build函數(shù)代碼如下：
build() {
? ? ? Stack() {
? ? ? ? FlutterPage({ viewId: this.viewId })
? ? ? ? // 是否需要顯示歡迎屏
? ? ? ? if(this.showSplash)
? ? ? ? {
? ? ? ? ? // 白底
? ? ? ? ? Rect()
? ? ? ? ? ? .fill(Color.White)
? ? ? ? ? ? .width('100%')
? ? ? ? ? ? .height('100%')
? ? ? ? ? // 圖標(biāo)
? ? ? ? ? Image($r('app.media.icon'))
? ? ? ? ? ? .objectFit(ImageFit.None)
? ? ? ? ? ? .borderRadius(500)
? ? ? ? ? ? .rotate({ angle: this.rotateValue })
? ? ? ? ? ? .opacity(this.opacityValue)
? ? ? ? ? ? .offset({ y: `-${'15%'}` })
? ? ? ? ? ? .animation({curve: Curve.EaseOut })
? ? ? ? ? // 應(yīng)用名稱(chēng)
? ? ? ? ? Column() {
? ? ? ? ? ? Text($r('app.string.EntryAbility_label'))
? ? ? ? ? ? ? .fontColor(Color.Black)
? ? ? ? ? ? ? .fontSize('24fp')
? ? ? ? ? ? ? .fontWeight(FontWeight.Medium)
? ? ? ? ? ? // 公司名稱(chēng)
? ? ? ? ? ? Text($r('app.string.vendor_name'))
? ? ? ? ? ? ? .fontSize('16fp')
? ? ? ? ? ? ? .fontColor(Color.Black)
? ? ? ? ? ? ? .margin({ top: '15vp' })
? ? ? ? ? ? // 網(wǎng)址
? ? ? ? ? ? Text('www.cdrviewer.com')
? ? ? ? ? ? ? .fontSize('14fp')
? ? ? ? ? ? ? .fontColor(Color.Black)
? ? ? ? ? ? ? .margin({ top: '15vp' })
? ? ? ? ? }
? ? ? ? ? .rotate({ angle: this.rotateValue })
? ? ? ? ? // 控制透明度
? ? ? ? ? .opacity(this.opacityValue)
? ? ? ? ? .offset({ y: '25%' })
? ? ? ? ? // 控制動(dòng)畫(huà)曲線(xiàn)
? ? ? ? ? .animation({curve: Curve.EaseOut })
? ? ? ? }
? ? ? }
? }
? ? 其中this.showSplash用來(lái)控制是否顯示歡迎屏衷恭，this.opacityValue用來(lái)控制顯示的透明度。在aboutToAppear函數(shù)中啟動(dòng)定時(shí)器纯续，aboutToDisappear函數(shù)中關(guān)閉定時(shí)器随珠。這樣就可以在Flutter主窗口出現(xiàn)之前，有2秒鐘的漸進(jìn)漸出動(dòng)畫(huà)猬错，相對(duì)平滑的過(guò)渡到Flutter的主頁(yè)面窗看。主要代碼如下：
@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;
? ? }
? }
? ? 歡迎屏頁(yè)面如下所示：
? ? 通過(guò)前面的步驟，這樣一個(gè)個(gè)性化的鴻蒙NEXT應(yīng)用框架就做好了倦炒。其中歡迎屏中圖標(biāo)的大小显沈，以及文字大小位置等，可以根據(jù)自己的需要進(jìn)行調(diào)整析校。
