半模态配置主题

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

@@ -14,6 +14,7 @@ import {
   IBestButton,
   IBestColorPicker,
   IBestField,
+  IBestIcon,
   IBestPopup,
   IBestRadio,
   IBestRadioGroup
@@ -262,40 +263,43 @@ export struct SettingPage {
     Column() {
       // 颜色模式分组卡片
       Column() {
-        Row({ space: 36 }) {
-          Text('颜色模式')
-            .fontSize(15)
-            .fontWeight(500)
-            .margin({ left: 12 })
-          Column() {
-            Row() {
-              IBestRadioGroup({ group: this.colorGroup, active: $themeMode, placeDirection: Axis.Horizontal }) {
-                ForEach(['自动', '明亮', '黑暗'], (item: string, idx: number) => {
-                  Column() {
-                    IBestRadio({
-                      group: this.colorGroup,
-                      checkedColor: '#ee0a24',
-                      label: '', // 不在Radio里显示label
-                      name: idx
-                    })
-                    Text(item)
-                      .fontSize(15)
-                      .fontColor($r('app.color.text_color'))
-                      .margin({ top: 6 })
-                  }
-                  .onClick(() => {
-                    this.themeMode = idx
-                    this.applyThemeMode(idx)
-                    this.sendChangeEvent()
+        Row() {
+          Row(){
+            IBestIcon({ name: 'brush-o', color: this.themeColor })
+              .margin({ right: 8 })
+            Text('颜色模式')
+              .fontSize(15)
+              .fontWeight(500)
+          }
+          .margin({ top: 12 })
+
+          Row(){
+            IBestRadioGroup({ group: this.colorGroup, active: $themeMode, placeDirection: Axis.Horizontal }) {
+              ForEach(['自动', '明亮', '黑暗'], (item: string, idx: number) => {
+                Column() {
+                  IBestRadio({
+                    group: this.colorGroup,
+                    checkedColor: this.themeColor,
+                    label: '',
+                    name: idx
                   })
-                  .alignItems(HorizontalAlign.Center)
+                  Text(item)
+                    .fontSize(15)
+                    .fontColor($r('app.color.text_color'))
+                    .margin({ top: 6 })
+                }
+                .onClick(() => {
+                  this.themeMode = idx
+                  this.applyThemeMode(idx)
+                  this.sendChangeEvent()
                 })
-              }
+                .alignItems(HorizontalAlign.Center)
+              })
             }
-            .margin({ right: 12 })
           }
+          .margin({left:24,right:12})
         }
-        .justifyContent(FlexAlign.Center)
+        .margin({ top: 12 })
       }
       .backgroundColor($r('app.color.settings_background_main'))
       .borderRadius(18)
@@ -307,64 +311,80 @@ export struct SettingPage {
         offsetY: 2
       })
       .margin({
-        left: 18,
-        right: 18,
+        left: 0,
+        right: 0,
         top: 10,
         bottom: 18
       })
-      .padding({ top: 18, bottom: 18 })
+      .padding({ top: 18, bottom: 18, left: 0, right: 0 })
       .width('90%')
 
       // 主题色分组卡片
       Column() {
-        Text('主题色')
-          .fontSize(15)
-          .fontWeight(500)
-          .margin({ left: 12 })
-        Column() {
-          ForEach(this.colorRows, (row: Array<ThemeColorItem>, rowIdx: number) => {
-            Row() {
-              ForEach(row, (item: ThemeColorItem, colIdx: number) => {
-                Button() {
-                  Row() {
-                    Blank()
-                      .width(22)
-                      .height(22)
-                      .backgroundColor(item.name === '自定义' && this.isCustomThemeColor() ? this.themeColor : item.color)
-                      .border({ width: 2, color:$r('app.color.text_color')})
-                      .borderRadius(11)
-                    Text(item.name)
-                      .fontSize(15)
-                      .fontColor($r('app.color.text_color'))
-                      .margin({ left: 10 })
-                  }
-                  .alignItems(VerticalAlign.Top)
-                  .justifyContent(FlexAlign.Start)
-                }
-                .width(120)
-                .height(40)
-                .backgroundColor(
-                  (item.name === '自定义' && this.isCustomThemeColor()) || this.themeColor === item.color
-                    ? this.themeColor
-                    : $r('app.color.settings_background_main')
-                )
-                .borderRadius(20)
-                .onClick(() => {
-                  if (item.name === '自定义') {
-                    this.showColorPicker = true
-                  } else {
-                    this.themeColor = item.color
-                    PreferencesUtil.putSync(SettingPage.THEME_COLOR_KEY, item.color)
-                    AppStorage.setOrCreate('themeColor', item.color)
-                    this.sendChangeEvent()
+        Row() {
+
+            Image($r('app.media.theme'))
+              .width(20)
+              .height(20)
+              .fillColor(this.themeColor)
+            // .margin({ right: 8 })
+            Text('主题色')
+              .fontSize(15)
+              .fontWeight(500)
+
+        }
+        .margin({left:36, top: 12 })
+        .width("90%")
+
+        Row(){
+          Column() {
+            ForEach(this.colorRows, (row: Array<ThemeColorItem>, rowIdx: number) => {
+              Row() {
+                ForEach(row, (item: ThemeColorItem, colIdx: number) => {
+                  Button() {
+                    Row() {
+                      Blank()
+                        .width(22)
+                        .height(22)
+                        .backgroundColor(item.name === '自定义' && this.isCustomThemeColor() ? this.themeColor : item.color)
+                        .border({ width: 2, color:$r('app.color.text_color')})
+                        .borderRadius(11)
+                      Text(item.name)
+                        .fontSize(15)
+                        .fontColor($r('app.color.text_color'))
+                        .margin({ left: 10 })
+                    }
+                    .alignItems(VerticalAlign.Center)
+                    .justifyContent(FlexAlign.Start)
                   }
+                  .width('42%')
+                  .height(40)
+                  .backgroundColor(
+                    (item.name === '自定义' && this.isCustomThemeColor()) || this.themeColor === item.color
+                      ? this.themeColor
+                      : $r('app.color.settings_background_main')
+                  )
+                  .borderRadius(20)
+                  .onClick(() => {
+                    if (item.name === '自定义') {
+                      this.showColorPicker = true
+                    } else {
+                      this.themeColor = item.color
+                      PreferencesUtil.putSync(SettingPage.THEME_COLOR_KEY, item.color)
+                      AppStorage.setOrCreate('themeColor', item.color)
+                      this.sendChangeEvent()
+                    }
+                  })
+                  .margin({ right: colIdx === 0 ? '4%' : 0, bottom: 10, left: 0 })
                 })
-                .margin({ right: colIdx === 0 ? 24 : 0, bottom: 10 })
-              })
-            }
-            .justifyContent(FlexAlign.Start)
-          })
+              }
+              .justifyContent(FlexAlign.Start)
+              .margin({ left: 12, right: 12 })
+            })
+          }
+          .margin({ left: 12, right: 12, top: 12 })
         }
+
       }
       .width('90%')
       .backgroundColor($r('app.color.settings_background_main'))
@@ -377,12 +397,12 @@ export struct SettingPage {
         offsetY: 2
       })
       .margin({
-        left: 18,
-        right: 18,
-        top: 0,
+        left: 0,
+        right: 0,
+        top: 10,
         bottom: 18
       })
-      .padding({ top: 18, bottom: 18 })
+      .padding({ top: 18, bottom: 18, left: 0, right: 0 })
 
       // 主题色自定义弹窗
       IBestPopup({
@@ -391,8 +411,8 @@ export struct SettingPage {
         contentBuilder: (): void => this.pickerBuilder()
       })
     }
-    .padding({ top: 8, bottom: 8 })
-    .width('90%')
+    .padding({ top: 8, bottom: 8, left: 18, right: 18 })
+    .width('100%')
     .backgroundColor(Color.Transparent)
     .borderRadius(24)
   }
@@ -477,7 +497,7 @@ export struct SettingPage {
               showClose: true,
               blurStyle: BlurStyle.Thin,
               backgroundColor: Color.Transparent,
-              title: { title: '主题' },
+              title: { title: '主题设置' },
               shouldDismiss:(SheetDismiss:SheetDismiss)=>{
                 SheetDismiss.dismiss();
                 this.showColorPicker = false;