主题色设置

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

@@ -10,6 +10,7 @@ import { fileIo, fileUri } from '@kit.CoreFileKit'
 import { BusinessError, emitter } from '@kit.BasicServicesKit'
 import { BreakpointTypeEnum } from '../common/util/BreakpointSystem'
 import { resourceManager } from '@kit.LocalizationKit'
+import { IBestButton, IBestColorPicker, IBestField, IBestPopup } from '@ibestservices/ibest-ui'
 
 @Preview
 @Entry
@@ -75,6 +76,9 @@ export struct SettingPage {
   @State verName: string = ''
   @StorageProp('themeColor') themeColor: string = PreferencesUtil.getStringSync('THEME_COLOR', '#FF4081');
 
+  @State showColorPicker: boolean = false
+  @State customColor: string = PreferencesUtil.getStringSync('THEME_COLOR', '#FF4081');
+
   apiDialogController: CustomDialogController = new CustomDialogController({
     builder: CustomContentDialog({
       primaryTitle: this.apiDialogType === 'lyric' ? '修改歌词API地址' : '修改封面API地址',
@@ -197,7 +201,32 @@ export struct SettingPage {
 
     return false
   }
-
+  @Builder pickerBuilder(){
+    Column({space: 20}){
+      IBestColorPicker({
+        value: this.customColor
+      })
+      Row({space: 20}){
+        IBestButton({
+          text: "取消",
+          onBtnClick: () => {
+            this.showColorPicker = false
+          }
+        })
+        IBestButton({
+          type: "primary",
+          text: "确定",
+          onBtnClick: () => {
+            this.themeColor = this.customColor
+            PreferencesUtil.putSync(SettingPage.THEME_COLOR_KEY, this.customColor)
+            AppStorage.setOrCreate('themeColor', this.customColor)
+            this.sendChangeEvent()
+            this.showColorPicker = false
+          }
+        })
+      }
+    }.padding(20)
+  }
   build() {
     Column() {
       Column(){
@@ -285,29 +314,55 @@ export struct SettingPage {
                 .fontColor(Color.Gray)
                 .fontWeight(480)
                 .layoutWeight(1)
-              Row() {
-                ForEach(SettingPage.THEME_COLOR_LIST, (color: string, index: number) => {
-                  Blank()
-                    .width(32)
-                    .height(32)
-                    .backgroundColor(color)
-                    .borderRadius(16)
-                    .border({ width: this.themeColor === color ? 3 : 1, color: this.themeColor === color ? Color.Black : Color.Gray })
-                    .margin({ right: 8 })
-                    .onClick(() => {
-                      this.themeColor = color
-                      PreferencesUtil.putSync(SettingPage.THEME_COLOR_KEY, color)
-                      AppStorage.setOrCreate('themeColor', color)
-                      this.sendChangeEvent()
-                    })
-                })
+              Scroll() {
+                Row() {
+                  ForEach(SettingPage.THEME_COLOR_LIST, (color: string, index: number) => {
+                    Blank()
+                      .width(32)
+                      .height(32)
+                      .backgroundColor(color)
+                      .borderRadius(16)
+                      .border({
+                        width: this.themeColor === color ? 3 : 1,
+                        color: this.themeColor === color ? Color.Black : Color.Gray
+                      })
+                      .margin({ right: 8 })
+                      .onClick(() => {
+                        this.themeColor = color
+                        PreferencesUtil.putSync(SettingPage.THEME_COLOR_KEY, color)
+                        AppStorage.setOrCreate('themeColor', color)
+                        this.sendChangeEvent()
+                      })
+                  })
+                }
               }
-              .margin({ right: 18 })
+              .margin({right:18})
+
+              .scrollable(ScrollDirection.Horizontal)
+              .scrollBar(BarState.Off)
             }
             .height(55)
 
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
-
+            IBestField({
+              label: '选择颜色',
+              value: this.customColor,
+              placeholder: "请选择颜色",
+              isLink: true,
+              hasBorder: false,
+              rightIcon:"location",
+              rightIconColor:this.customColor,
+              onFieldClick: () => {
+                this.showColorPicker = true
+              }
+            })
+            // 弹出层
+            IBestPopup({
+              visible: this.showColorPicker,
+              popupWidth: 320,
+              contentBuilder: (): void => this.pickerBuilder()
+            })
+            Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             Row() {
               Text('自定义背景')
                 .margin({ left: 18 })
@@ -873,11 +928,16 @@ export struct SettingPage {
 
   public static THEME_COLOR_KEY: string = 'THEME_COLOR';
   public static THEME_COLOR_LIST: Array<string> = [
-    '#FF4081', // 默认
+    '#FF4081', // 粉
     '#0A59F7', // 蓝
     '#64BB5C', // 绿
     '#ED6F21', // 橙
-    '#5BA854'  // 青
+    '#5BA854', // 青
+    '#9C27B0', // 紫
+    '#F44336', // 红
+    '#00BCD4', // 蓝绿
+    '#FFC107', // 黄
+    '#607D8B'  // 灰蓝
   ];
 
 }