主题色设置

entry/src/main/ets/pages/AboutPage.ets

@@ -3,9 +3,12 @@ import { router } from '@kit.ArkUI'
 import { CommonConstants } from '../common/constants/CommonConstants'
 import { AppUtil, DeviceUtil, DisplayUtil, ToastUtil } from '@pura/harmony-utils'
 import { Utility } from '../common/util/Utility'
-import { ConfigurationConstant } from '@kit.AbilityKit'
+import { common, ConfigurationConstant } from '@kit.AbilityKit'
 import { BreakpointTypeEnum } from '../common/util/BreakpointSystem'
 import { resourceManager } from '@kit.LocalizationKit'
+import { PreferencesUtil } from '@pura/harmony-utils'
+import { hilog } from '@kit.PerformanceAnalysisKit'
+import { BusinessError } from '@kit.BasicServicesKit'
 
 @Preview
 @Entry
@@ -18,25 +21,12 @@ export struct AboutPage{
   /** 当前断点类型（如大屏/小屏） */
   @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointTypeEnum.MD;
 
+  @StorageProp('themeColor') themeColor: string = '#FF4081';
+
   onColorModeChange() {
     this.isDarkMode = this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK
-    this.titleBarModel
-      .setTitleBarBackground($r('app.color.title_bar_bg'))
-      .setLeftTitleBackground($r('app.color.title_bar_bg'))
   }
 
-  @State titleBarModel: TitleBar.Model = new TitleBar.Model()
-    .setTitleTextStyle(FontStyle.Normal)
-    .setTitleBarStyle(TitleBar.BarStyle.TRANSPARENT)
-    .setLeftIcon($r('app.media.left_back_white'))
-    .setTitleName('关于我们')
-    .setTitleFontColor(Color.White)
-    .setTitleBarBackground($r('app.color.title_bar_bg'))
-    .setLeftTitleBackground($r('app.color.title_bar_bg'))
-    .setTitleBarBottomLineColor($r('app.color.title_bar_bg'))
-    .setOnLeftClickListener(() => {
-      router.back()
-    })
   @State verName:string = ''
   @State appName:string = ''
 
@@ -47,6 +37,9 @@ export struct AboutPage{
     Utility.getAppName(getContext(this)).then((appName:string)=>{
       this.appName = appName
     })
+    let themeColor = PreferencesUtil.getStringSync('THEME_COLOR', '#FF4081');
+    AppStorage.setOrCreate('themeColor', themeColor);
+    this.themeColor = themeColor;
     this.onColorModeChange()
     console.info('LifeCycleComponent aboutToAppear');
   }
@@ -68,15 +61,86 @@ export struct AboutPage{
     return false
   }
 
+  // 工具函数：hex转hsl、hsl转hex、生成渐变色
+   hexToHsl(hex: string): [number, number, number] {
+    hex = hex.replace('#', '');
+    let r = parseInt(hex.substring(0,2), 16) / 255;
+    let g = parseInt(hex.substring(2,4), 16) / 255;
+    let b = parseInt(hex.substring(4,6), 16) / 255;
+    let max = Math.max(r, g, b), min = Math.min(r, g, b);
+    let h = 0, s = 0, l = (max + min) / 2;
+    if(max !== min){
+      let d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch(max){
+        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+        case g: h = (b - r) / d + 2; break;
+        case b: h = (r - g) / d + 4; break;
+      }
+      h = h * 60;
+    }
+    return [h, s, l];
+  }
+   hslToHex(h: number, s: number, l: number): string {
+    let c = (1 - Math.abs(2 * l - 1)) * s;
+    let x = c * (1 - Math.abs((h / 60) % 2 - 1));
+    let m = l - c/2;
+    let r=0, g=0, b=0;
+    if (0 <= h && h < 60) { r = c; g = x; b = 0; }
+    else if (60 <= h && h < 120) { r = x; g = c; b = 0; }
+    else if (120 <= h && h < 180) { r = 0; g = c; b = x; }
+    else if (180 <= h && h < 240) { r = 0; g = x; b = c; }
+    else if (240 <= h && h < 300) { r = x; g = 0; b = c; }
+    else if (300 <= h && h < 360) { r = c; g = 0; b = x; }
+    let toHex = (v: number) => Math.round((v + m) * 255).toString(16).padStart(2, '0');
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+  }
+   getGradientColor(themeColor: string, offset: number = 40): string {
+     let hsl = this.hexToHsl(themeColor);
+     let h = hsl[0];
+     let s = hsl[1];
+     let l = hsl[2];
+     h = (h + offset) % 360;
+    return this.hslToHex(h, s, l);
+  }
+
   build() {
     Column(){
-      Column(){
-        Line().width('100%').height('100%')
+
+      // 顶部安全区和自定义标题栏
+      Column() {
+        // 顶部安全区
+        Blank()
+          .height(this.isPhoneLan() ? 0 : px2vp(AppUtil.getStatusBarHeight()))
+          .backgroundColor(this.themeColor)
+          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
+        // 自定义标题栏（Stack实现绝对居中）
+        Stack() {
+          // 居中标题
+          Text('关于我们')
+            .fontSize(18)
+            .fontColor(Color.White)
+            .align(Alignment.Center)
+          // 左右按钮
+          Row() {
+            Image($r('app.media.left_back_white'))
+              .width(24)
+              .height(24)
+              .margin({ left: 12, right: 8 })
+              .onClick(() => {
+                router.back();
+              })
+            Blank().flexGrow(1)
+            Blank().width(32)
+          }
+          .height(48)
+          .width('100%')
+          .alignItems(VerticalAlign.Center)
+        }
+        .height(48)
+        .width('100%')
+        .backgroundColor(this.themeColor)
       }
-      .height(this.isPhoneLan()?0:px2vp(AppUtil.getStatusBarHeight()))
-      .backgroundColor($r('app.color.title_bar_bg'))
-      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
-      TitleBar({model:$titleBarModel})
       Scroll(){
 
         Column(){
@@ -100,9 +164,13 @@ export struct AboutPage{
             .fontSize(18)
             .margin({top:20,bottom:20})
             .onClick(()=>{
-              router.pushUrl({url:'pages/WebIndex',
-                params:{ titleName:'ICP备案',webUrl:CommonConstants.ICP_URL}
-              });
+              // let want = {
+              //   action: "ohos.want.action.viewData",
+              //   uri: CommonConstants.ICP_URL
+              // };
+
+                let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
+                context.openLink(CommonConstants.ICP_URL, {})
             })
 
           Button('加入Q群：685109858', { type: ButtonType.Capsule, stateEffect: false })
@@ -111,7 +179,7 @@ export struct AboutPage{
             .margin({top:50,bottom:20})
               // .visibility(Visibility.None)
             .stateEffect(true)
-            .backgroundColor(this.isDarkMode ? '#1E90FF' : '#FF4081')
+            .backgroundColor(this.themeColor)
             .stateStyles({
               pressed: { opacity: 0.6 }
             })
@@ -125,7 +193,7 @@ export struct AboutPage{
             .height(55)
             .stateEffect(true)
             .margin({bottom:20})
-            .backgroundColor(this.isDarkMode ? '#1E90FF' : '#FF4081')
+            .backgroundColor(this.themeColor)
             .stateStyles({
               pressed: { opacity: 0.6 }
             })
@@ -153,8 +221,8 @@ export struct AboutPage{
 
       }
       .height(px2vp(DisplayUtil.getHeight()-AppUtil.getStatusBarHeight()-AppUtil.getNavigationIndicatorHeight()))
-      .backgroundColor(this.isDarkMode ? '#1A1A1A' : undefined)
-      .linearGradient(!this.isDarkMode ? {colors:[['#FF4081', 0.0], ['#FF8C00', 0.6]]} : undefined)
+      .backgroundColor(this.themeColor)
+      .linearGradient(!this.isDarkMode ? {colors:[[this.themeColor, 0.0], [this.getGradientColor(this.themeColor, 40), 0.6]]} : undefined)
     }
   }
 }    

entry/src/main/ets/pages/MainIndex.ets

@@ -19,7 +19,7 @@ struct  MainIndex{
 
   @State rootPath:string = getContext(this).filesDir
 
-  @StorageProp('themeColor') themeColor: string = PreferencesUtil.getStringSync('THEME_COLOR', '#FF4081');
+  @StorageProp('themeColor') themeColor: string = '#FF4081';
 
   @Builder TabBarBuilder(index:number,selIcon:ResourceStr,normalIcon:ResourceStr,text:string){
     Column(){
@@ -55,7 +55,6 @@ struct  MainIndex{
     IjkMediaPlayer.getInstance().stop();
     IjkMediaPlayer.getInstance().release();
     let themeColor = PreferencesUtil.getStringSync('THEME_COLOR', '#FF4081');
-    hilog.info(0x0000, 'Heanup', '当前 themeColor：'+themeColor);
     AppStorage.setOrCreate('themeColor', themeColor);
     this.themeColor = themeColor;
   }

entry/src/main/ets/pages/ScanFilePage.ets

@@ -34,7 +34,7 @@ export struct ScanFilePage{
   private animateItem: AnimationItem | null = null;
   /** 当前断点类型（如大屏/小屏） */
   @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointTypeEnum.MD;
-
+  @StorageProp('themeColor') themeColor: string = '#FF4081';
   initLottie(lpath:string,isLoop:boolean){
     lottie.destroy(); //加载动画前先销毁之前加载的动画
     this.animateItem = lottie.loadAnimation({
@@ -58,6 +58,9 @@ export struct ScanFilePage{
     Utility.getAppName(getContext(this)).then((appName:string)=>{
       this.appName = appName
     })
+    let themeColor = PreferencesUtil.getStringSync('THEME_COLOR', '#FF4081');
+    AppStorage.setOrCreate('themeColor', themeColor);
+    this.themeColor = themeColor;
     const documentViewPicker = new picker.DocumentViewPicker()
     let documentSaveResult = await documentViewPicker.save({ pickerMode: picker.DocumentPickerMode.DOWNLOAD })
     this.rootPath = new fileUri.FileUri(documentSaveResult[0]).path
@@ -90,19 +93,19 @@ export struct ScanFilePage{
   }
 
 
-  @State titleBarModel: TitleBar.Model = new TitleBar.Model()
-    .setTitleTextStyle(FontStyle.Normal)
-    .setTitleBarStyle(TitleBar.BarStyle.TRANSPARENT)
-    .setLeftIcon($r('app.media.left_back_white'))
-    .setTitleName("文件扫描")
-    .setTitleFontColor(Color.White)
-    .setTitleBarBackground($r('app.color.title_bar_bg'))
-    .setLeftTitleBackground($r('app.color.title_bar_bg'))
-    .setTitleBarBottomLineColor($r('app.color.title_bar_bg'))
-    .setOnLeftClickListener(() => {
-      router.back()
-
-    })
+  // @State titleBarModel: TitleBar.Model = new TitleBar.Model()
+  //   .setTitleTextStyle(FontStyle.Normal)
+  //   .setTitleBarStyle(TitleBar.BarStyle.TRANSPARENT)
+  //   .setLeftIcon($r('app.media.left_back_white'))
+  //   .setTitleName("文件扫描")
+  //   .setTitleFontColor(Color.White)
+  //   .setTitleBarBackground(this.themeColor)
+  //   .setLeftTitleBackground(this.themeColor)
+  //   .setTitleBarBottomLineColor(this.themeColor)
+  //   .setOnLeftClickListener(() => {
+  //     router.back()
+  //
+  //   })
   initState(){
 
     this.initLottie(this.path,true)
@@ -140,13 +143,47 @@ export struct ScanFilePage{
 
   build() {
     Column() {
-      Column(){
-        Line().width('100%').height('100%')
+      // 顶部安全区和自定义标题栏
+      Column() {
+        // 顶部安全区
+        Blank()
+          .height(this.isPhoneLan() ? 0 : px2vp(AppUtil.getStatusBarHeight()))
+          .backgroundColor(this.themeColor)
+          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
+        // 自定义标题栏（Stack实现绝对居中）
+        Stack() {
+          // 居中标题
+          Text('文件扫描')
+            .fontSize(20)
+            .fontColor(Color.White)
+            .align(Alignment.Center)
+          // 左右按钮
+          Row() {
+            Image($r('app.media.left_back_white'))
+              .width(32)
+              .height(32)
+              .margin({ left: 12, right: 8 })
+              .onClick(() => {
+                router.back();
+              })
+            Blank().flexGrow(1)
+            Blank().width(32)
+          }
+          .height(48)
+          .width('100%')
+          .alignItems(VerticalAlign.Center)
+        }
+        .height(48)
+        .width('100%')
+        .backgroundColor(this.themeColor)
       }
-      .height(this.isPhoneLan()?0:px2vp(AppUtil.getStatusBarHeight()))
-      .backgroundColor($r('app.color.title_bar_bg'))
-      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
-      TitleBar({ model: $titleBarModel })
+      // Column(){
+      //   Line().width('100%').height('100%')
+      // }
+      // .height(this.isPhoneLan()?0:px2vp(AppUtil.getStatusBarHeight()))
+      // .backgroundColor(this.themeColor)
+      // .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
+      // TitleBar({ model: $titleBarModel })
       Scroll(){
         Column() {
 
@@ -154,7 +191,7 @@ export struct ScanFilePage{
             Image($r('app.media.file_search'))
               .width(80)
               .height(80)
-              .fillColor($r('app.color.img_color'))
+              .fillColor(this.themeColor)
               .alignSelf(ItemAlign.Center)
             //lottie动画
             Canvas(this.mainCanvasRenderingContext)

entry/src/main/ets/pages/VipPage.ets

@@ -39,19 +39,19 @@ const context = getContext(this) as common.UIAbilityContext;
 @Entry
 export  struct  VipPage{
   @State bundleName:string =''
-  @State titleBarModel: TitleBar.Model = new TitleBar.Model()
-    .setTitleTextStyle(FontStyle.Normal)
-    .setTitleBarStyle(TitleBar.BarStyle.TRANSPARENT)
-    .setLeftIcon($r('app.media.left_back_white'))
-    .setTitleName('赞助中心')
-    .setTitleFontColor(Color.White)
-    .setTitleBarBackground($r('app.color.title_bar_bg'))
-    .setLeftTitleBackground($r('app.color.title_bar_bg'))
-    .setTitleBarBottomLineColor($r('app.color.title_bar_bg'))
-    .setOnLeftClickListener(() => {
-      router.back()
-
-    })
+  // @State titleBarModel: TitleBar.Model = new TitleBar.Model()
+  //   .setTitleTextStyle(FontStyle.Normal)
+  //   .setTitleBarStyle(TitleBar.BarStyle.TRANSPARENT)
+  //   .setLeftIcon($r('app.media.left_back_white'))
+  //   .setTitleName('赞助中心')
+  //   .setTitleFontColor(Color.White)
+  //   .setTitleBarBackground($r('app.color.title_bar_bg'))
+  //   .setLeftTitleBackground($r('app.color.title_bar_bg'))
+  //   .setTitleBarBottomLineColor($r('app.color.title_bar_bg'))
+  //   .setOnLeftClickListener(() => {
+  //     router.back()
+  //
+  //   })
 
 
   @State isShowDutySheetView: boolean = false;
@@ -81,6 +81,7 @@ export  struct  VipPage{
 
   static readonly WX_NOTIFY_URL: string = 'https://webhook.ss5.xyz/wechat_notify.php'
 
+  @StorageProp('themeColor') themeColor: string = '#FF4081';
 
   // 组件生命周期
   async aboutToAppear() {
@@ -88,6 +89,9 @@ export  struct  VipPage{
     Utility.getAppName(getContext(this)).then((appName:string)=>{
       this.appName = appName
     })
+    let themeColor = PreferencesUtil.getStringSync('THEME_COLOR', '#FF4081');
+    AppStorage.setOrCreate('themeColor', themeColor);
+    this.themeColor = themeColor;
     const documentViewPicker = new picker.DocumentViewPicker()
     let documentSaveResult = await documentViewPicker.save({ pickerMode: picker.DocumentPickerMode.DOWNLOAD })
     let download_path = new fileUri.FileUri(documentSaveResult[0]).path + '/'
@@ -136,13 +140,40 @@ export  struct  VipPage{
 
 
     Column() {
-      Column(){
-        Line().width('100%').height('100%')
+      // 顶部安全区和自定义标题栏
+      Column() {
+        // 顶部安全区
+        Blank()
+          .height(this.isPhoneLan() ? 0 : px2vp(AppUtil.getStatusBarHeight()))
+          .backgroundColor(this.themeColor)
+          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
+        // 自定义标题栏（Stack实现绝对居中）
+        Stack() {
+          // 居中标题
+          Text('赞助中心')
+            .fontSize(18)
+            .fontColor(Color.White)
+            .align(Alignment.Center)
+          // 左右按钮
+          Row() {
+            Image($r('app.media.left_back_white'))
+              .width(24)
+              .height(24)
+              .margin({ left: 12, right: 8 })
+              .onClick(() => {
+                router.back();
+              })
+            Blank().flexGrow(1)
+            Blank().width(32)
+          }
+          .height(48)
+          .width('100%')
+          .alignItems(VerticalAlign.Center)
+        }
+        .height(48)
+        .width('100%')
+        .backgroundColor(this.themeColor)
       }
-      .height(this.isPhoneLan()?0:px2vp(AppUtil.getStatusBarHeight()))
-      .backgroundColor($r('app.color.title_bar_bg'))
-      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
-      TitleBar({ model: $titleBarModel })
       Scroll() {
       Column() {
         Column() {
@@ -469,7 +500,7 @@ export  struct  VipPage{
             dragBar: true,
             showClose: true,
             preferType: this.currentBreakpoint!==BreakpointTypeEnum.SM?SheetType.CENTER:SheetType.BOTTOM,
-            backgroundColor:Color.White,
+            backgroundColor: this.themeColor,
             title: { title: $r('app.string.persion_duty') }
           })
           .onClick(() => {
@@ -487,7 +518,7 @@ export  struct  VipPage{
             .fontColor(Color.White)
             .layoutWeight(1)
             .height(50)
-            .backgroundColor($r('app.color.title_bar_bg'))
+            .backgroundColor(this.themeColor)
             .stateEffect(true)
             .margin({left:10,right:25})
             .onClick(()=>{
@@ -766,6 +797,7 @@ export  struct  VipPage{
           })
         Button('同意')
           .fontColor(Color.White)
+            //.linearGradient( { direction: GradientDirection.Right, colors:[['#ff37a0fc',0.0],['#67e667',0.5],['#f5856e',1.0]]})
           .layoutWeight(1)
           .height(50)
           .backgroundColor($r('app.color.title_bar_bg'))

entry/src/main/ets/pages/WebIndex.ets

@@ -7,6 +7,7 @@ import { Utility } from '../common/util/Utility';
 import { BreakpointTypeEnum } from '../common/util/BreakpointSystem';
 import { CommonConstants } from '../common/constants/CommonConstants';
 import { resourceManager } from '@kit.LocalizationKit';
+import { PreferencesUtil } from '@pura/harmony-utils';
 
 
 @Entry
@@ -27,31 +28,14 @@ struct  WebIndex{
     ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
   /** 当前断点类型（如大屏/小屏） */
   @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointTypeEnum.MD;
+  @StorageProp('themeColor') themeColor: string = '#FF4081';
+
   onColorModeChange() {
     this.isDarkMode = this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK
-    this.titleBarModel.setTitleFontColor($r('app.color.title_text'))
-      .setTitleBarBackground($r('app.color.title_bar_bg'))
-      .setLeftTitleBackground($r('app.color.title_bar_bg'))
-    if (this.currentMode == ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
-
-    } else {
-
-    }
   }
 
   @State params: object = router.getParams()
 
-  @State titleBarModel: TitleBar.Model = new TitleBar.Model()
-    .setTitleTextStyle(FontStyle.Normal)
-    .setTitleBarStyle(TitleBar.BarStyle.TRANSPARENT)
-    .setLeftIcon($r('app.media.left_back_white'))
-    .setTitleName(this.params?.['titleName'])
-    .setTitleFontColor(Color.White)
-    .setTitleBarBackground($r('app.color.title_bar_bg'))
-    .setLeftTitleBackground($r('app.color.title_bar_bg'))
-    .setOnLeftClickListener(() => {
-      router.back()
-    })
 
   // 组件生命周期
   aboutToAppear() {
@@ -59,6 +43,9 @@ struct  WebIndex{
     if(!NetworkUtil.hasDefaultNetSync()){
       ToastUtil.showToast('没有网络，请检查网络连接！')
     }
+    let themeColor = PreferencesUtil.getStringSync('THEME_COLOR', '#FF4081');
+    AppStorage.setOrCreate('themeColor', themeColor);
+    this.themeColor = themeColor;
     // 初始化时调用一次主题设置
     this.onColorModeChange()
   }
@@ -77,21 +64,40 @@ struct  WebIndex{
 
   build() {
     Column(){
-      Column(){
-        Line().width('100%').height('100%')
+      // 顶部安全区和自定义标题栏
+      Column() {
+        // 顶部安全区
+        Blank()
+          .height(this.isPhoneLan() ? 0 : px2vp(AppUtil.getStatusBarHeight()))
+          .backgroundColor(this.themeColor)
+          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
+        // 自定义标题栏（Stack实现绝对居中）
+        Stack() {
+          // 居中标题
+          Text(this.params?.['titleName'])
+            .fontSize(18)
+            .fontColor(Color.White)
+            .align(Alignment.Center)
+          // 左右按钮
+          Row() {
+            Image($r('app.media.left_back_white'))
+              .width(24)
+              .height(24)
+              .margin({ left: 12, right: 8 })
+              .onClick(() => {
+                router.back();
+              })
+            Blank().flexGrow(1)
+            Blank().width(32)
+          }
+          .height(48)
+          .width('100%')
+          .alignItems(VerticalAlign.Center)
+        }
+        .height(48)
+        .width('100%')
+        .backgroundColor(this.themeColor)
       }
-      .height(this.isPhoneLan()?0:px2vp(AppUtil.getStatusBarHeight()))
-      .backgroundColor($r('app.color.title_bar_bg'))
-      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
-      TitleBar({model:$titleBarModel})
-      Progress({ value: 0, total: 100, type: ProgressType.Linear })
-        .backgroundColor(this.isDarkMode ? 0x333333 : 0xFFFFFF)
-        // .color(this.isDarkMode ? 0x6666FF : 0x414AFF)
-        .value(this.progressValue)
-        .width('%100')
-        .height(2)
-        .visibility(this.progressValue!=100 ? Visibility.Visible : Visibility.None)
-
       Web({
         src: this.params?.['webUrl'],
         controller: this.webController