fix statusbar layout config

Signed-off-by: LiuZhenyu2021 <liuzhenyu.liuzhenyu@huawei.com>

features/clockcomponent/src/main/ets/default/timeModel.ets

@@ -81,7 +81,6 @@ export class TimeModel {
    * @param {Object} date - Object of Date.
    */
   private updateTime(date) {
-    Log.showInfo(TAG,`updateDay, date：${JSON.stringify(date)}`)
     let time = date.toTimeString().substring(0, 5);
     mTimeLink.set(time);
   }
@@ -92,7 +91,6 @@ export class TimeModel {
    * @param {Object} date - Object of Date.
    */
   private updateDay(date) {
-    Log.showInfo(TAG,`updateDay, date：${JSON.stringify(date)}`)
     let day = date.getDate();
     mDayLink.set(day);
   }
@@ -103,7 +101,6 @@ export class TimeModel {
    * @param {Object} date - Object of Date.
    */
   private updateWeekDay(date) {
-    Log.showInfo(TAG,`updateWeekDay, date：${JSON.stringify(date)}`)
     let weekDay = date.getDay();
     mWeekDayLink.set(weekDay);
   }
@@ -114,7 +111,6 @@ export class TimeModel {
    * @param {Object} date - Object of Date.
    */
   private updateMonth(date) {
-    Log.showInfo(TAG,`updateMonth, date：${JSON.stringify(date)}`)
     let month = (date.getMonth() + 1);
     mMonthLink.set(month);
   }

features/control/src/main/ets/com/ohos/control/pages/UpTitle.ets

@@ -31,6 +31,7 @@ struct UpTitle {
     mWindowManager = new WindowManager();
     mFeatureAbilityManager = new FeatureAbilityManager();
   }
+
   aboutToDisappear () {
     Log.showInfo(TAG,'aboutToDisappear')
   }

features/noticeitem/src/main/ets/com/ohos/noticeItem/item/longItem.ets

@@ -38,7 +38,7 @@ struct longItem {
   @Prop notificationIconDisplay: string
   private notificationWant: any
   @State isExpand: boolean = false
-  @State srcIconDisplay: any = $r('app.media.down')
+  @State srcIconDisplay: any = $r('app.media.ic_notification_down')
   @State needExpand: boolean = false
   @State iconDisplay: boolean = false;
   @State itemWidth: string = '100%'
@@ -65,6 +65,7 @@ struct longItem {
 
     Log.showInfo(TAG, `aboutToAppear showMaxLines: ${this.showMaxLines} ${typeof this.showMaxLines}`)
   }
+
   aboutToDisappear(){
     Log.showInfo(TAG, `aboutToDisAppear id: ${this.notificationId}`)
   }
@@ -96,6 +97,7 @@ struct longItem {
         }
         .width('100%')
         .margin({ top: $r('app.float.body_margin_top') })
+        .onClick(this.clickNotificationItem.bind(this))
       }
       .backgroundColor($r('app.color.notificationitem_background'))
       .opacity($r('app.float.item_opicaty'))
@@ -112,7 +114,7 @@ struct longItem {
       })
       .onTouch(this.touchNotificationItem.bind(this))
       .width(this.itemWidth)
-      .onClick(this.clickNotificationItem.bind(this))
+
 
       if (this.iconDisplay) {
         Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {

features/noticeitem/src/main/ets/com/ohos/noticeItem/item/multiItem.ets

@@ -38,7 +38,7 @@ struct multiItem {
   @Prop notificationIconDisplay: string
   private notificationWant: any
   @State isExpand: boolean = false
-  @State srcIconDisplay: any = $r('app.media.down')
+  @State srcIconDisplay: any = $r('app.media.ic_notification_down')
   @State needExpand: boolean = false
   @State iconDisplay: boolean = false;
   @State itemWidth: string = '100%'
@@ -96,7 +96,7 @@ struct multiItem {
         }
         .width('100%')
         .margin({ top: $r('app.float.body_margin_top') })
-
+        .onClick(this.clickNotificationItem.bind(this))
       }
       .backgroundColor($r('app.color.notificationitem_background'))
       .opacity($r('app.float.item_opicaty'))
@@ -113,7 +113,7 @@ struct multiItem {
       })
       .onTouch(this.touchNotificationItem.bind(this))
       .width(this.itemWidth)
-      .onClick(this.clickNotificationItem.bind(this))
+
 
       if (this.iconDisplay) {
         Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {

features/noticeitem/src/main/ets/com/ohos/noticeItem/item/notificationItem.ets

@@ -44,6 +44,7 @@ struct notificationItem {
         break;
     }
   }
+
   aboutToDisappear(){
     Log.showInfo(TAG, `aboutToDisAppear`)
   }

features/noticeitem/src/main/ets/com/ohos/noticeItem/item/titleItem.ets

@@ -30,9 +30,11 @@ struct titleItem {
   aboutToAppear() {
     Log.showInfo(TAG, `aboutToDisAppear Start`)
   }
+
   aboutToDisappear(){
     Log.showInfo(TAG, `aboutToDisAppear`)
   }
+
   build() {
     Row() {
       Row({ space: this.rowSpace }) {
@@ -53,21 +55,20 @@ struct titleItem {
             .objectFit(ImageFit.Contain)
             .width($r('app.float.displayicon_width'))
             .height($r('app.float.displayicon_height'))
-            .onClick(() => {
-            if (this.isExpand) {
-              this.isExpand = false
-              this.srcIconDisplay = $r('app.media.down')
-            } else {
-              this.isExpand = true
-              this.srcIconDisplay = $r('app.media.up')
-            }
-          })
         }
       }
       .width('20%')
     }
     .height($r('app.float.titleitem_height'))
     .width('100%')
-
+    .onClick(() => {
+      if (this.isExpand) {
+        this.isExpand = false
+        this.srcIconDisplay = $r('app.media.ic_notification_down')
+      } else {
+        this.isExpand = true
+        this.srcIconDisplay = $r('app.media.ic_notification_up')
+      }
+    })
   }
 }

features/signalcomponent/src/main/ets/default/pages/signalIcon.ets

@@ -52,6 +52,7 @@ struct SignalIcon {
           .objectFit(ImageFit.ScaleDown)
       }.flexShrink(1)
     }
+    .margin({ left: 5})
     .width($r('app.float.signalicon_width'))
     .height('50%')
   }

product/navigationBar/src/main/ets/default/pages/index.ets

@@ -14,9 +14,7 @@
  */
 
 import Three from './threeLayout.ets'
-import One from './oneLayout.ets'
 import Log from '../../../../../../../common/src/main/ets/default/Log.ets';
-import ConfigReader from '../common/utils/configReader.ets'
 import Constants from '../common/constants.ets'
 
 const STORAGE_NAVIGATION_TYPE = 'navigationType'
@@ -30,10 +28,6 @@ struct Index {
 
   aboutToAppear() {
     Log.showInfo(TAG, `aboutToAppear Start`)
-    if (mConfigReader == null || mConfigReader == undefined) {
-      mConfigReader = new ConfigReader()
-      mConfigReader.readLayoutConfig()
-    }
   }
   aboutToDisappear(){
     Log.showInfo(TAG, `aboutToDisAppear`)
@@ -41,11 +35,7 @@ struct Index {
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-      if (this.mConfig.type === Constants.THREE_ICON_LAYOUT) {
-        Three();
-      } else if (this.mConfig.type === Constants.ONE_ICON_LAYOUT) {
-        One();
-      }
+      Three();
     }
     .width('100%')
     .height('100%')

product/navigationBar/src/main/ets/default/pages/keyButton.ets

@@ -30,6 +30,7 @@ export default struct keyButton {
   aboutToAppear() {
     Log.showInfo(TAG, `aboutToAppear Start`)
   }
+
   aboutToDisappear(){
     Log.showInfo(TAG, `aboutToDisAppear`)
   }

product/navigationBar/src/main/ets/default/pages/oneLayout.ets

@@ -30,6 +30,7 @@ export default struct oneLayout {
   aboutToAppear() {
     Log.showInfo(TAG, `aboutToAppear Start`)
   }
+
   aboutToDisappear(){
     Log.showInfo(TAG, `aboutToDisAppear`)
   }

product/navigationBar/src/main/ets/default/pages/threeLayout.ets

@@ -39,6 +39,7 @@ struct threeLayout {
   aboutToAppear() {
     Log.showInfo(TAG, `aboutToAppear Start`)
   }
+
   aboutToDisappear(){
     Log.showInfo(TAG, `aboutToDisAppear`)
   }

product/statusbar/src/main/ets/default/common/constants.ets

@@ -1,22 +0,0 @@
-/*
- * Copyright (c) 2021 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.
- */
-
-export default
-class constants{
-  static WIFI  = 'wifi'
-  static SIGNAL = 'signal'
-  static CLOCK = 'clock'
-  static BATTERY = 'battery'
-}

product/statusbar/src/main/ets/default/common/util/configReader.ets

@@ -52,8 +52,7 @@ export default class ConfigReader {
   public readLayoutConfig() {
     Log.showInfo(TAG, "SystemUI ConfigReader readLayoutConfig start");
     var configObj = this.readFileToJson(DEFAULT_LAYOUT_INFO_FILE_PATH)
-    var mAppStorage = AppStorage.GetOrCreate();
-    var mLayoutConfig = mAppStorage.link("layoutConfig");
+    var mLayoutConfig = AppStorage.SetAndLink("layoutConfig", {});
     mLayoutConfig.set(configObj)
   }
 }

product/statusbar/src/main/ets/default/pages/ConfigurableLayout.ets

@@ -0,0 +1,101 @@
+/*
+ * Copyright (c) 2021 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 Constants from './common/constants.ets'
+import Log from '../../../../../../../common/src/main/ets/default/Log.ets'
+import BatteryIcon from '../../../../../../../features/batterycomponent/src/main/ets/default/pages/batteryIcon.ets'
+import ClockIcon from '../../../../../../../features/clockcomponent/src/main/ets/default/pages/clockIcon.ets'
+import WifiIcon from '../../../../../../../features/wificomponent/src/main/ets/default/pages/wifiIcon.ets'
+import SignalIcon from '../../../../../../../features/signalcomponent/src/main/ets/default/pages/signalIcon.ets'
+import ConfigReader from '../common/util/configReader.ets'
+
+const TAG = 'StatusBar-TwoGroupLayout'
+
+let mConfigReader;
+
+@Component
+export default
+struct Index {
+  @StorageLink('notificationList') notificationList: any = []
+  @StorageLink('layoutConfig') layoutConfig: any = {}
+  @StorageLink('wifiStatus') wifiStatus: boolean = false
+
+  aboutToAppear() {
+    if (mConfigReader == null || mConfigReader == undefined) {
+      mConfigReader = new ConfigReader()
+      mConfigReader.readLayoutConfig()
+    }
+    Log.showInfo(TAG, `aboutToAppear Start`)
+  }
+
+  aboutToDisappear() {
+    Log.showInfo(TAG, `aboutToDisAppear`)
+  }
+
+  build() {
+    Row() {
+      ForEach(this.layoutConfig.Groups, (item: any) => {
+        Row() {
+          ForEach(item.Components, (item: string) => {
+            if (item == Constants.WIFI) {
+              WifiIcon()
+            }
+            if (item == Constants.SIGNAL) {
+              SignalIcon()
+            }
+            if (item == Constants.CLOCK) {
+              ClockIcon()
+            }
+            if (item == Constants.BATTERY) {
+              BatteryIcon()
+            }
+            if (item == Constants.NOTIFICATION) {
+              Row() {
+                if (this.notificationList.length > 3) {
+                  ForEach(this.notificationList.slice(0, 3), (item: any) => {
+                    Image(item.icon)
+                      .objectFit(ImageFit.ScaleDown)
+                      .height('50%')
+                      .width(45)
+                  })
+                  Row() {
+                    Text('...')
+                      .fontSize(20)
+                  }
+                } else {
+                  ForEach(this.notificationList, (item: any) => {
+                    Image(item.icon)
+                      .objectFit(ImageFit.ScaleDown)
+                      .height('50%')
+                      .width(45)
+                  })
+                }
+              }
+              .width(this.notificationList.length > 3 ? 45 * 4 : 45 * this.notificationList.length)
+            }
+          })
+        }.constraintSize({ maxWidth: 200 })
+
+        if (item.id < this.layoutConfig.Groups.length) {
+          Text('')
+            .layoutWeight(1)
+        }
+      })
+    }
+    .width('100%')
+    .height('100%')
+    .backgroundColor($r("app.color.twogroup_layout_background"))
+  }
+}

product/statusbar/src/main/ets/default/pages/common/constants.ets

@@ -19,14 +19,25 @@ export default class Constants {
   static TOUCHTYPE_UP = 1;
   static TOUCHTYPE_MOVE = 2;
 
-  static WEEKDAY_MONDAY = 1;
-  static WEEKDAY_TUESDAY = 2;
-  static WEEKDAY_WEDNESDAY = 3;
-  static WEEKDAY_THURSDAY = 4;
-  static WEEKDAY_FRIDAY = 5;
-  static WEEKDAY_SATURDAY = 6;
-  static WEEKDAY_SUNDAY = 7;
+  static WEEKDAY_LIST = [
+    $r('app.string.monday'),
+    $r('app.string.tuesday'),
+    $r('app.string.wednesday'),
+    $r('app.string.thursday'),
+    $r('app.string.friday'),
+    $r('app.string.saturday'),
+    $r('app.string.sunday')
+  ]
 
   static DIGITS = 10;
   static DEFAULT_MIDDLE_PART_WIDTH = 70;
+
+  static MARK_MONTH = 0;
+  static MARK_DAY = 1;
+
+  static WIFI  = 'wifi'
+  static SIGNAL = 'signal'
+  static CLOCK = 'clock'
+  static BATTERY = 'battery'
+  static NOTIFICATION = 'notification'
 }

product/statusbar/src/main/ets/default/pages/defaultLayout.ets

@@ -1,71 +0,0 @@
-/*
- * Copyright (c) 2021 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 BatteryIcon from '../../../../../../../features/batterycomponent/src/main/ets/default/pages/batteryIcon.ets'
-import ClockIcon from '../../../../../../../features/clockcomponent/src/main/ets/default/pages/clockIcon.ets'
-import WifiIcon from '../../../../../../../features/wificomponent/src/main/ets/default/pages/wifiIcon.ets'
-import SignalIcon from '../../../../../../../features/signalcomponent/src/main/ets/default/pages/signalIcon.ets'
-import Log from '../../../../../../../common/src/main/ets/default/Log.ets'
-import Constants from './common/constants.ets'
-
-const TAG = 'StatusBar-DefaultLayout'
-@Component
-export default struct Index {
-  private notificationList : any
-  private ListLength : number
-  @StorageLink('wifiStatus') wifiStatus : boolean = false
-  aboutToAppear() {
-    Log.showInfo(TAG, `aboutToAppear Start`)
-  }
-  aboutToDisappear(){
-    Log.showInfo(TAG, `aboutToDisAppear`)
-  }
-  build() {
-    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
-      Column() {
-        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
-          SignalIcon()
-          WifiIcon()
-          Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
-            ForEach(this.notificationList, (item: any) => {
-              Column() {
-                Image(item.icon).objectFit(ImageFit.ScaleDown).height('50%')
-              }
-              .width(45)
-            })
-            if(this.ListLength > (this.wifiStatus ? 3 : 4)) {
-              Row() {
-                Text('...')
-                  .fontSize(20)
-              }
-            }
-          }
-          .width(this.wifiStatus ? 4*45+20-50 : 4*45+20)
-        }
-      }
-      .width('65%')
-
-      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.End }) {
-        BatteryIcon()
-        ClockIcon()
-      }
-      .width('35%')
-    }
-    .width('100%')
-    .height('100%')
-    .backgroundColor($r('app.color.default_background'))
-  }
-}

product/statusbar/src/main/ets/default/pages/index.ets

@@ -14,9 +14,10 @@
  */
 
 import Log from '../../../../../../../common/src/main/ets/default/Log.ets'
-import DefaultLayout from './defaultLayout.ets'
+import ConfigurableLayout from './ConfigurableLayout.ets'
 import Notification from './notification.ets'
 import WindowManager from '../../../../../../../common/src/main/ets/default/WindowManager.ets'
+import ConfigReader from '../common/util/configReader.ets'
 import mNotificationService from '../../../../../../../features/notificationService/src/main/ets/com/ohos/notificationservice/NotificationService.ets'
 import ControlCenterComponent from './control.ets'
 import Constants from './common/constants.ets'
@@ -24,24 +25,20 @@ import mBrightnessManager from '../../../../../../../features/control/src/main/e
 
 const TAG = 'StatusBar-Index'
 
-let mConfigReader;
-
 let mWindowManager;
 
 @Entry
 @Component
 struct Index {
-  @StorageLink('layoutConfig') layoutConfig: any = {}
   startX: number = 0
   startY: number = 0
   @State moveX: number = 0
   @State moveY: number = 0
   @State showStatusBar: boolean = true
-  @StorageLink('wifiStatus') wifiStatus : boolean = false
-  @StorageLink('notificationList') notificationList : any = []
 
   aboutToAppear() {
     Log.showInfo(TAG, `aboutToAppear, showStatusBar: ${this.showStatusBar}`)
+
     mWindowManager = new WindowManager();
     mNotificationService.initNotificationService();
     mBrightnessManager.registerBrightnessListener();
@@ -56,11 +53,7 @@ struct Index {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
       if (this.showStatusBar) {
         Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-            DefaultLayout({
-              ListLength : this.notificationList.length,
-              notificationList: this.notificationList.length > (this.wifiStatus ? 2 : 3) ?
-                this.notificationList.slice(0,(this.wifiStatus ? 3 : 4)) :
-                  this.notificationList })
+          ConfigurableLayout()
         }
         .width('100%')
         .height('100%')

product/statusbar/src/main/ets/default/pages/notification.ets

@@ -57,7 +57,6 @@ struct Index {
   }
 
   touchEvent(event: TouchEvent) {
-    //    Log.showInfo(TAG, 'touchEvent================' + event.touches)
     if (event.type == Constants.TOUCHTYPE_DOWN) {
       this.startX = event.touches[0].screenX
       this.startY = event.touches[0].screenY
@@ -111,44 +110,13 @@ struct quicklySetting {
   aboutToAppear() {
     Log.showInfo(TAG, `quicklySetting, aboutToAppear`)
     //show month
-    if (this.mMonth < Constants.DIGITS) {
-      this.showMonth = '0' + this.mMonth;
-    } else {
-      this.showMonth = '' + this.mMonth;
-    }
+    this.showMonth = this.alignmentNumber(this.mMonth);
     //show day
-    if (this.mDay < Constants.DIGITS) {
-      this.showDay = '0' + this.mDay;
-    } else {
-      this.showDay = '' + this.mDay;
-    }
+    this.showDay = this.alignmentNumber(this.mDay);
     //show weekDay
-    switch (this.mWeekDay) {
-      case Constants.WEEKDAY_MONDAY:
-        this.showWeekDay = $r('app.string.monday');
-        break;
-      case Constants.WEEKDAY_TUESDAY:
-        this.showWeekDay = $r('app.string.tuesday');
-        break;
-      case Constants.WEEKDAY_WEDNESDAY:
-        this.showWeekDay = $r('app.string.wednesday');
-        break;
-      case Constants.WEEKDAY_THURSDAY:
-        this.showWeekDay = $r('app.string.thursday');
-        break;
-      case Constants.WEEKDAY_FRIDAY:
-        this.showWeekDay = $r('app.string.friday');
-        break;
-      case Constants.WEEKDAY_SATURDAY:
-        this.showWeekDay = $r('app.string.saturday');
-        break;
-      case Constants.WEEKDAY_SUNDAY:
-        this.showWeekDay = $r('app.string.sunday');
-        break;
-      default:
-        break;
-    }
+    this.showWeekDay = Constants.WEEKDAY_LIST[this.mWeekDay-1];
   }
+
   aboutToDisappear() {
     Log.showInfo(TAG, `aboutToDisappear, showStatusBar: ${this.showStatusBar}`)
   }
@@ -160,18 +128,8 @@ struct quicklySetting {
           .fontColor($r('app.color.quicklysetting_time_fontcolor'))
           .fontSize($r('app.float.quicklysetting_time_fontsize'))
         Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center}){
-          Text(this.showMonth)
-            .fontColor($r('app.color.quicklysetting_date_fontcolor'))
-            .fontSize($r('app.float.quicklysetting_date_fontsize'))
-          Text($r('app.string.month'))
-            .fontColor($r('app.color.quicklysetting_date_fontcolor'))
-            .fontSize($r('app.float.quicklysetting_date_fontsize'))
-          Text(this.showDay)
-            .fontColor($r('app.color.quicklysetting_date_fontcolor'))
-            .fontSize($r('app.float.quicklysetting_date_fontsize'))
-          Text($r('app.string.day'))
-            .fontColor($r('app.color.quicklysetting_date_fontcolor'))
-            .fontSize($r('app.float.quicklysetting_date_fontsize'))
+          dateItem({number: this.showMonth, unit: Constants.MARK_MONTH})
+          dateItem({number: this.showDay, unit: Constants.MARK_DAY})
           Text(this.showWeekDay)
             .fontColor($r('app.color.quicklysetting_date_fontcolor'))
             .fontSize($r('app.float.quicklysetting_date_fontsize'))
@@ -208,7 +166,38 @@ struct quicklySetting {
         }
       });
     });
+  }
+  alignmentNumber(timeOrDate){
+    if(timeOrDate < Constants.DIGITS){
+      return '0' + timeOrDate
+    }else{
+      return '' + timeOrDate
+    }
+  }
+}
 
+@Component
+struct dateItem {
+
+  @Prop number: string
+  @Prop unit: number
+
+  build() {
+    Row() {
+      Text(this.number)
+        .fontColor($r('app.color.quicklysetting_date_fontcolor'))
+        .fontSize($r('app.float.quicklysetting_date_fontsize'))
+      if (this.unit == Constants.MARK_MONTH) {
+        Text($r('app.string.month'))
+          .fontColor($r('app.color.quicklysetting_date_fontcolor'))
+          .fontSize($r('app.float.quicklysetting_date_fontsize'))
+      }
+      if (this.unit == Constants.MARK_DAY) {
+        Text($r('app.string.day'))
+          .fontColor($r('app.color.quicklysetting_date_fontcolor'))
+          .fontSize($r('app.float.quicklysetting_date_fontsize'))
+      }
+    }
   }
 }
 

product/statusbar/src/main/ets/default/pages/twoGroupLayout.ets

@@ -1,79 +0,0 @@
-/*
- * Copyright (c) 2021 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 Constants from '../common/constants.ets'
-import Log from '../../../../../../../common/src/main/ets/default/Log.ets'
-import BatteryIcon from '../../../../../../../features/batterycomponent/src/main/ets/default/pages/batteryIcon.ets'
-import ClockIcon from '../../../../../../../features/clockcomponent/src/main/ets/default/pages/clockIcon.ets'
-import WifiIcon from '../../../../../../../features/wificomponent/src/main/ets/default/pages/wifiIcon.ets'
-import SignalIcon from '../../../../../../../features/signalcomponent/src/main/ets/default/pages/signalIcon.ets'
-const TAG = 'StatusBar-TwoGroupLayout'
-
-@Component
-export default struct Index {
-  private leftGroupOrder : any
-  private rightGroupOrder : any
-  private notificationList : any
-  aboutToAppear() {
-    Log.showInfo(TAG, `aboutToAppear Start`)
-  }
-  aboutToDisappear(){
-    Log.showInfo(TAG, `aboutToDisAppear`)
-  }
-  build() {
-    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
-        ForEach(this.leftGroupOrder, (item: string) => {
-          if (item == Constants.WIFI) {
-            WifiIcon()
-          }
-          if (item == Constants.SIGNAL) {
-            SignalIcon()
-          }
-          if (item == Constants.CLOCK) {
-            ClockIcon()
-          }
-          if (item == Constants.BATTERY) {
-            BatteryIcon()
-          }
-        })
-      }
-      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-        ForEach(this.notificationList, (item: any) => {
-          Image(item.icon).objectFit(ImageFit.ScaleDown).height('50%')
-        })
-      }
-      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.End }) {
-        ForEach(this.rightGroupOrder, (item: string) => {
-          if (item == Constants.WIFI) {
-            WifiIcon()
-          }
-          if (item == Constants.SIGNAL) {
-            SignalIcon()
-          }
-          if (item == Constants.CLOCK) {
-            ClockIcon()
-          }
-          if (item == Constants.BATTERY) {
-            BatteryIcon()
-          }
-        })
-      }
-    }
-    .width('100%')
-    .height('100%')
-    .backgroundColor($r("app.color.Colors.twogroup_layout_background"))
-  }
-}

product/statusbar/src/main/resources/rawfile/layoutConfig.json

@@ -1,7 +1,11 @@
 {
-  "groupNumber" : 2,
-  "twoGroups": {
-    "leftGroupOrder": ["signal","wifi"],
-    "rightGroupOrder": ["battery","clock"]
-  }
+  "Groups": [
+    { "id": 1,
+    "Components": ["signal", "wifi", "notification"]
+    },
+    {
+      "id": 2,
+      "Components": ["battery", "clock"]
+    }
+  ]
 }