实现自定义图标

entry/src/main/ets/pages/SettingPage.ets

@@ -18,11 +18,17 @@ import { hilog } from '@kit.PerformanceAnalysisKit'
 import { SelectItem } from './SelectItem'
 import { FastForwardSecondInterface } from './FastForwardSecondInterface'
 import { ButtonFancyModifier, ShadowModifier, SymbolGlyphFancyModifier } from '../common/util/AttributeModifierUtil'
+import { CustomizeICON, Icon } from '../view/CustomizeICON'
+import { appInfoManager } from '@kit.StoreKit'
 
 @Preview
 // @Entry
 @Component
 export struct SettingPage {
+  @State iconCurrentID: string = 'default';//图标的id
+  @State iconArray: Array<Icon> = []
+  @StorageProp('isLandscape')  isLandscape: boolean = false;
+  @State isCustomizeICONSheet: boolean = false //自定义背景界面
   @StorageProp('topSafeHeight') topSafeHeight: number = 0;
   @State isCopyFileToDownLoad: boolean = false
   static readonly IS_COPYFILE_TO_DOWNLOAD: string = 'isCopyFileToDownLoad';
@@ -272,8 +278,33 @@ export struct SettingPage {
     let themeColor = PreferencesUtil.getStringSync('THEME_COLOR', CommonConstants.DEFAULT_THEME_COLOR);
     AppStorage.setOrCreate('themeColor', themeColor);
     this.themeColor = themeColor;
+    this.initIcon()
   }
 
+  initIcon(){
+    this.iconCurrentID = PreferencesUtil.getStringSync('iconCurrentID', 'default')
+    const iconItem:Icon = {
+      iconUrl: 'default',
+      iconId: 'default',
+      enabled: false
+    }
+    this.iconArray.push(iconItem)
+    try {
+      appInfoManager.queryDynamicIcons()
+        .then((queryResult: appInfoManager.DynamicIconInfo[]) => {
+          hilog.info(0, 'TAG', "Succeeded in getting queryResult= " + JSON.stringify(queryResult));
+          const iconList = JSON.parse(JSON.stringify(queryResult)) as Array<Icon>;
+          this.iconArray = this.iconArray.concat(iconList)
+        }).catch((error: BusinessError) => {
+        hilog.error(0, 'TAG', "queryDynamicIcons failed, code: " + error.code + ", exception message: " + error.message);
+      });
+    } catch (error) {
+      hilog.error(0, 'TAG', "queryDynamicIcons exception code: " + error.code + ", exception message: " + error.message);
+    }
+
+  }
+
+
   // 监听颜色模式变化
   onColorModeChange(): void {
     this.isDarkMode = this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK;
@@ -730,6 +761,52 @@ export struct SettingPage {
 
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
 
+
+            Button({ type: ButtonType.Normal, stateEffect: true }) {
+              Row() {
+                SymbolGlyph($r('sys.symbol.satellite_map'))
+                  .fontSize(20)
+                  .fontColor([this.themeColor])
+                  .alignSelf(ItemAlign.Center)
+                  .margin({ left: 15 })
+                Text('自定义图标')
+                  .margin({ left: 8 })
+                  .fontSize(15)
+                  .fontColor(Color.Gray)
+                  .fontWeight(480)
+                  .layoutWeight(1)
+                  .bindSheet($$this.isCustomizeICONSheet, this.customizeICONSheet(), {
+                    height: this.isLandscape ? '95%' : '85%',
+                    dragBar: true,
+                    preferType: this.currentBreakpoint !== BreakpointTypeEnum.SM ? SheetType.CENTER : SheetType.BOTTOM,
+                    showClose: true,
+                    blurStyle: BlurStyle.Thin,
+                    backgroundColor: Color.Transparent,
+                    title: { title: '自定义图标' }
+                  })
+
+                Blank()
+                // 右侧箭头
+                Image($r('app.media.arrow_right'))
+                  .width(22)
+                  .height(22)
+                  .margin({ left: 20, right: 20 })
+                  .align(Alignment.Center)
+              }
+            }
+            .clickEffect({level:ClickEffectLevel.HEAVY})
+            .height(55)
+            .onClick(() => {
+              if (!Utility.isNoble()) {
+                this.showVipDialog();
+                return;
+              }
+              this.isCustomizeICONSheet = !this.isCustomizeICONSheet;
+            })
+            .backgroundColor(Color.Transparent)
+
+            Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
+
             // 滚动隐藏'
             // Row() {
             //   Text('滚动隐藏')
@@ -2101,6 +2178,26 @@ export struct SettingPage {
     .padding(0)
   }
 
+  @Builder
+  customizeICONSheet() {
+    Scroll() {
+      Column() {
+        CustomizeICON({
+          iconIndex:this.iconCurrentID,
+          iconArray:this.iconArray,
+          onIconChange:(iconId:string,iconUrl:string)=>{
+            this.iconCurrentID = iconId
+            PreferencesUtil.put('iconCurrentID', this.iconCurrentID)
+            PreferencesUtil.put('iconCurrentUrl', iconUrl)
+            this.sendChangeEvent()
+          }
+        })
+      }
+    }
+    .width('100%')
+    .height('100%')
+  }
+
   //发送广播通知更新UI
   sendChangeEvent() {
     const eventData: emitter.EventData = {};

entry/src/main/ets/pages/UserCenter.ets

@@ -161,6 +161,9 @@ export struct UserCenter {
       isVipOnly: true,
       hasCome: true
     },
+    { icon: $r('app.media.wusunyinzhi'),
+      title: '自定义图标', description: '专享5个自定义图标，会员尊享',
+      isVipOnly: true, hasCome: true },
     {
       icon: $r('app.media.search'),
       title: '批量标签内嵌',

entry/src/main/ets/view/CustomizeICON.ets

@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { CommonConstants } from "../common/constants/CommonConstants";
+import { appInfoManager } from "@kit.StoreKit";
+import { hilog } from "@kit.PerformanceAnalysisKit";
+import { BusinessError, emitter } from '@kit.BasicServicesKit'
+import { Utility } from "../common/util/Utility";
+import { ToastUtil } from "@pura/harmony-utils";
+
+export interface Icon{
+  iconUrl: string,
+  iconId: string,
+  enabled: boolean
+}
+@Component
+export struct CustomizeICON {
+  @Link iconIndex: string;
+  @Prop  iconArray: Array<Icon>;
+  @StorageProp('themeColor') themeColor: string = CommonConstants.DEFAULT_THEME_COLOR;
+
+  onIconChange = (iconId: string,iconUrl:string) => {
+  }
+  build() {
+    List({ space: 20 }) {
+      ForEach(this.iconArray, (item: Icon, index: number) => {
+        ListItem() {
+          Button({ type: ButtonType.Capsule, stateEffect: true }) {
+            Row() {
+              Image(item.iconUrl=='default'?$r('app.media.icon'):item.iconUrl)
+                .width(78)
+                .height(78)
+                .layoutWeight(1)
+                .borderRadius(20)
+                .objectFit(ImageFit.Contain)
+              Blank()
+              Toggle({ type: ToggleType.Checkbox, isOn: this.iconIndex == item.iconId })
+                .onChange((isOn: boolean) => {
+                })
+                .width(30)
+                .margin({ left:10,right: 25})
+                .selectedColor(this.themeColor)
+                .visibility(this.iconIndex == item.iconId?Visibility.Visible:Visibility.Hidden)
+            }
+
+          }
+          .height(80)
+          .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.8 })
+          .backgroundColor(Color.Transparent)
+          .transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }),
+            TransitionEffect.scale({ x: 0, y: 0 })  ))
+          .onClick(() => {
+            if (!Utility.isNoble()) {
+              ToastUtil.showToast('请先购买会员才能使用此功能')
+              return;
+            }
+            this.iconIndex = item.iconId;
+            this.changeAppIcon(item.iconId,item.iconUrl);
+          })
+        }
+      }, (item:Icon) => item.iconId)
+    }
+    .layoutWeight(1)
+    .margin({ left:35,right: 25})
+    .width('80%')
+  }
+
+
+
+  //动态切换图标
+  changeAppIcon(iconId:string,iconUrl:string){
+    console.log('changeAppIcon iconId: '+iconId)
+    if(iconId == 'default'){
+      try {
+        appInfoManager.disableDynamicIcon().then(() => {
+          this.onIconChange('default','default')
+          hilog.info(0, 'TAG', "Succeeded in disabling dynamic icon");
+        }).catch((error: BusinessError) => {
+          hilog.error(0, 'TAG', "disableDynamicIcon failed, code: " + error.code + ", exception message: " + error.message);
+        });
+      } catch (error) {
+        hilog.error(0, 'TAG', "disableDynamicIcon exception code: " + error.code + ", exception message: " + error.message);
+      }
+      return
+    }
+    try {
+      appInfoManager.selectDynamicIcon(iconId).then(() => {
+        this.onIconChange(iconId,iconUrl)
+        hilog.info(0, 'TAG', "Succeeded in selecting dynamic icon");
+      }).catch((error: BusinessError) => {
+        hilog.error(0, 'TAG', "selectDynamicIcon failed, code: " + error.code + ", exception message: " + error.message);
+      });
+    } catch (error) {
+      hilog.error(0, 'TAG', "selectDynamicIcon exception code: " + error.code + ", exception message: " + error.message);
+    }
+  }
+}