desc：设置页面适配折叠屏

yangchenggong1_wd
Commit 61643d9951619057d8d24f400c5bfceedeb2514d 61643d99 1 parent af2c4c24
Showing 3 changed files with 120 additions and 62 deletions
sight_harmony/features/wdComponent/src/main/ets/components/page/PrivacySettingPage.ets
sight_harmony/features/wdComponent/src/main/ets/components/page/SettingPage.ets
sight_harmony/features/wdComponent/src/main/ets/components/setting/MineSettingComponent.ets
--- a/sight_harmony/features/wdComponent/src/main/ets/components/page/PrivacySettingPage.ets
View file @61643d9
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/page/PrivacySettingPage.ets
View file @61643d9
-import { DateTimeUtils, PermissionUtil } from 'wdKit'
+import { BreakpointSystem, DateTimeUtils, PermissionUtil } from 'wdKit'
 import { PrivacySettingModel } from '../../model/PrivacySettingModel'
 import { Params } from 'wdBean';
 import { WDRouterPage, WDRouterRule } from 'wdRouter';
 import { HttpUtils } from 'wdNetwork/Index';
 import { TrackingPageBrowse, TrackConstants, TrackingButton } from 'wdTracking/Index';
+import { TitleBackComponent } from '../setting/TitleBackComponent';
 const TAG = 'PrivacySettingPage';
 const DiyString = '开启个性化推荐'
@@ -18,6 +19,17 @@ export struct PrivacySettingPage {
   tipsEnd = '中相应权限使用规则'
   pageShowTime:number = 0;
   pageHideTime:number = 0;
+  @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
+  private breakpointSystem = new BreakpointSystem();
+  @State percent:number = 1
+
+  currentChanged(){
+    if(this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"){
+      this.percent = 0.7
+    }else {
+      this.percent = 1
+    }
+  }
   onPageShow(): void {
     this.getPermissionStatus();
@@ -32,6 +44,8 @@ export struct PrivacySettingPage {
   }
   aboutToAppear() {
+    this.breakpointSystem.register();
+    this.currentChanged()
     if (!HttpUtils.getUserId()) {
       this.listData.splice(0, 1);
     }
@@ -43,6 +57,10 @@ export struct PrivacySettingPage {
   }
+  aboutToDisappear(): void {
+    this.breakpointSystem.unregister();
+  }
+
   async getPermissionStatus() {
     const permissionUtil = new PermissionUtil();
     for (const element of this.listData) {
@@ -57,25 +75,27 @@ export struct PrivacySettingPage {
   }
   build() {
-    Navigation() {
+    Column(){
+      TitleBackComponent({title:"隐私设置"})
+
       //滑动区域
       this.PrivacySettingComponentsUI()
+    }.backgroundColor('#F8F8F8')
+    .width("100%")
+    .height("100%")
-    }.titleMode(NavigationTitleMode.Mini)
-    .title('隐私设置')
-    .backgroundColor('#F8F8F8')
   }
   @Builder PrivacySettingComponentsUI() {
     Column() {
-      List({ space: '23lpx' }) {
+      List({ space: `${this.calcHeight(23)}lpx` }) {
         ForEach(this.listData, (item: PrivacySettingModel, index:number) => {
           ListItem() {
             if (item.privacyName == DiyString) {
-              getTuiJianCell({ item:item, index:index });
+              getTuiJianCell({ item:item, index:index ,percent:$percent});
             } else {
-              getArrowCell({ item:item, index:index });
+              getArrowCell({ item:item, index:index ,percent:$percent});
             }
           }.onClick(() => {
             if (item.privacyName == DiyString) {
@@ -103,32 +123,33 @@ export struct PrivacySettingPage {
             }
           })
         })
-      }
-      .padding({ left: '29lpx', right: '29lpx' })
-      .margin({ top: '38lpx' })
+      }.width('100%')
+      .padding({ left: `${this.calcHeight(29)}lpx`, right: `${this.calcHeight(29)}lpx` })
+      .margin({ top: `${this.calcHeight(38)}lpx` })
+      
       Row() {
         Text(this.tips)
-          .fontSize('25lpx')
+          .fontSize(`${this.calcHeight(25)}lpx`)
           .textAlign(TextAlign.Start)
           .fontColor($r("app.color.color_666666"))
-          .margin({ left: '29lpx', top: '46lpx' })
+          .margin({ left: `${this.calcHeight(29)}lpx`, top: `${this.calcHeight(46)}lpx` })
         // .backgroundColor(Color.Orange)
         Text(this.privacyTips)
-          .fontSize('25lpx')
+          .fontSize(`${this.calcHeight(25)}lpx`)
           .textAlign(TextAlign.Start)
           .fontColor('#ED2800')
-          .margin({ top: '46lpx' })
+          .margin({ top: `${this.calcHeight(46)}lpx` })
           .onClick(() => {
             //跳转隐私政策
             let bean={contentID:"2",pageID:""} as Params
             WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage,bean)
           })
         Text(this.tipsEnd)
-          .fontSize('25lpx')
+          .fontSize(`${this.calcHeight(25)}lpx`)
           .textAlign(TextAlign.Start)
           .fontColor($r("app.color.color_666666"))
-          .margin({ top: '46lpx' })
+          .margin({ top: `${this.calcHeight(46)}lpx` })
       }
     }
@@ -137,6 +158,10 @@ export struct PrivacySettingPage {
     .backgroundColor('#F8F8F8')
     .alignItems(HorizontalAlign.Start)
   }
+
+  calcHeight(value:number): number{
+    return value * this.percent
+  }
 }
@@ -144,6 +169,7 @@ export struct PrivacySettingPage {
 struct getArrowCell {
   @ObjectLink item: PrivacySettingModel;
   index:number = 0;
+  @Link percent:number
   // 右文字+箭头cell
   // @Builder getArrowCell(item:PrivacySettingModel, index) {
   build() {
@@ -151,28 +177,32 @@ struct getArrowCell {
       // 左侧标题
       Text(this.item.privacyName)
         .fontColor('#666666')
-        .fontSize('31lpx')
+        .fontSize(`${this.calcHeight(31)}lpx`)
       Row() {
         Text(this.item.permission ? '已开启' : '去设置')
           .fontColor(this.item.permission ? '#666666' : '#CCCCCC')
-          .fontSize('31lpx')
-          .margin({ right: '8lpx' })
+          .fontSize(`${this.calcHeight(31)}lpx`)
+          .margin({ right: `${this.calcHeight(8)}lpx` })
         Image($r('app.media.mine_user_arrow'))
-          .width('27lpx')
-          .height('27lpx')
+          .width(`${this.calcHeight(27)}lpx`)
+          .height(`${this.calcHeight(27)}lpx`)
           .objectFit(ImageFit.Auto)
       }
     }
     .alignItems(VerticalAlign.Center)
     .justifyContent(FlexAlign.SpaceBetween)
-    .height('97lpx')
+    .height(`${this.calcHeight(97)}lpx`)
     .width('100%')
-    .padding({ left: '29lpx', right: '29lpx' })
+    .padding({ left: `${this.calcHeight(29)}lpx`, right: `${this.calcHeight(29)}lpx` })
     .backgroundColor('#FFFFFF')
-    .borderRadius('8lpx')
+    .borderRadius(`${this.calcHeight(8)}lpx`)
+  }
+
+  calcHeight(value:number): number{
+    return value * this.percent
   }
 }
@@ -180,6 +210,7 @@ struct getArrowCell {
 struct getTuiJianCell {
   @ObjectLink item: PrivacySettingModel;
   index:number = 0;
+  @Link percent:number
   build() {
     Column() {
@@ -187,12 +218,12 @@ struct getTuiJianCell {
         // 左侧标题
         Text(this.item.privacyName)
           .fontColor('#666666')
-          .fontSize('31lpx')
+          .fontSize(`${this.calcHeight(31)}lpx`)
         Row() {
           Toggle({ type: ToggleType.Switch, isOn: this.item.permission })
-            .height('58lpx')
-            .width('96lpx')
+            .height(`${this.calcHeight(58)}lpx`)
+            .width(`${this.calcHeight(96)}lpx`)
               .selectedColor('#ED2700')
             .onChange((isOn: boolean) => {
               // this.privacySwitch = isOn;
@@ -203,25 +234,29 @@ struct getTuiJianCell {
       }
       .alignItems(VerticalAlign.Center)
       .justifyContent(FlexAlign.SpaceBetween)
-      .height('97lpx')
+      .height(`${this.calcHeight(97)}lpx`)
       .width('100%')
       Blank()
         .backgroundColor('#EDEDED')
-        .height('1lpx')
+        .height(`${this.calcHeight(1)}lpx`)
       Text(DiyCloseTipsString)
         .fontColor('#999999')
-        .fontSize('23lpx')
-        .margin({ right: '8lpx' })
-        .height('69lpx')
+        .fontSize(`${this.calcHeight(23)}lpx`)
+        .margin({ right: `${this.calcHeight(8)}lpx` })
+        .height(`${this.calcHeight(69)}lpx`)
-    }
+    }.width('100%')
     .alignItems(HorizontalAlign.Start)
     .backgroundColor('#FFFFFF')
-    .borderRadius('8lpx')
-    .padding({ left: '29lpx', right: '29lpx' })
+    .borderRadius(`${this.calcHeight(8)}lpx`)
+    .padding({ left: `${this.calcHeight(29)}lpx`, right: `${this.calcHeight(29)}lpx` })
+  }
+
+  calcHeight(value:number): number{
+    return value * this.percent
   }
 }
--- a/sight_harmony/features/wdComponent/src/main/ets/components/page/SettingPage.ets
View file @61643d9
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/page/SettingPage.ets
View file @61643d9
@@ -2,7 +2,7 @@ import { MineSettingComponent } from '../setting/MineSettingComponent';
 import { AccountAndSecurityLayout } from '../setting/AccountAndSecurityLayout';
 import router from '@ohos.router';
 import { Params } from 'wdBean';
-import { DateTimeUtils } from 'wdKit/Index';
+import { BreakpointSystem, DateTimeUtils } from 'wdKit/Index';
 import { TrackingPageBrowse, TrackConstants } from 'wdTracking/Index';
 @Entry
@@ -51,6 +51,7 @@ struct SettingPage {
         AccountAndSecurityLayout({enterActivityTime:this.enterActivityTime})
       }
     }.setFullWidth()
+    .backgroundColor($r("app.color.white"))
   }
   // 私有方法
--- a/sight_harmony/features/wdComponent/src/main/ets/components/setting/MineSettingComponent.ets
View file @61643d9
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/setting/MineSettingComponent.ets
View file @61643d9
 import { BottomNavi, CommonConstants, SpConstants } from 'wdConstant';
-import { Logger, SPHelper, StringUtils } from 'wdKit';
+import { BreakpointSystem, Logger, SPHelper, StringUtils } from 'wdKit';
 import PageViewModel from '../../viewmodel/PageViewModel';
 import storageStatistics from "@ohos.file.storageStatistics";
 import { BusinessError } from '@ohos.base';
@@ -25,6 +25,17 @@ export struct MineSettingComponent {
   @State cacheSize: number = 0
   @State accountState:boolean=false
   preferences: dataPreferences.Preferences | null = null;
+  @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
+  private breakpointSystem = new BreakpointSystem();
+  @State percent:number = 1
+
+  currentChanged(){
+    if(this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"){
+      this.percent = 0.7
+    }else {
+      this.percent = 1
+    }
+  }
   dialogController: CustomDialogController = new CustomDialogController({
     builder: MyCustomDialog({
@@ -43,6 +54,8 @@ export struct MineSettingComponent {
     customStyle: true
   })
   aboutToAppear() {
+    this.breakpointSystem.register();
+    this.currentChanged()
     // 获取设置页面数据
     this.getSettingPageData()
@@ -54,6 +67,10 @@ export struct MineSettingComponent {
   }
+  aboutToDisappear(): void {
+    this.breakpointSystem.unregister();
+  }
+
   async getAccountState(){
     let userId=await SPHelper.default.get(SpConstants.USER_ID,'') as string
     if(userId==''){
@@ -91,13 +108,13 @@ export struct MineSettingComponent {
             if (item.type == 0) {
               Column() {
                 this.getArrowCell(item,index)
-              }.padding({ left: '27lpx' }).height('117lpx').justifyContent(FlexAlign.Center)
+              }.padding({ left: `${this.calcHeight(27)}lpx` }).height(`${this.calcHeight(117)}lpx`).justifyContent(FlexAlign.Center)
             } else if (item.type == 1) {
               Column() {
                 this.getSwitchCell(item,index)
-              }.padding({ left: '27lpx' }).height('117lpx').justifyContent(FlexAlign.Center)
+              }.padding({ left: `${this.calcHeight(27)}lpx` }).height(`${this.calcHeight(117)}lpx`).justifyContent(FlexAlign.Center)
             } else {
-              Column().width('100%').height('15lpx').backgroundColor(0xf0f0f0)
+              Column().width('100%').height(`${this.calcHeight(15)}lpx`).backgroundColor(0xf0f0f0)
             }
           }
         })
@@ -112,7 +129,7 @@ export struct MineSettingComponent {
   @Builder itemHead(text: string) {
     // 列表分组的头部组件，对应联系人分组A、B等位置的组件
     if (text.length > 0) {
-      Row().width('100%').height('20lpx').backgroundColor(0xf0f0f0)
+      Row().width('100%').height(`${this.calcHeight(20)}lpx`).backgroundColor(0xf0f0f0)
     }
   }
@@ -125,28 +142,29 @@ export struct MineSettingComponent {
           // 判断有没有图片
           if (0) {
             Image('https://pic.rmb.bdstatic.com/e182cf67c341d1128d2a6cc05886bf62.jpeg@s_0,h_2000')
-              .height('38lpx')
-              .margin({ right: '5lpx' })
+              .height(`${this.calcHeight(38)}lpx`)
+              .margin({ right: `${this.calcHeight(5)}lpx` })
             Text(`${item.title}`)
-              .margin({ top: '8lpx' })
-              .height('38lpx')
+              .margin({ top: `${this.calcHeight(8)}lpx` })
+              .height(`${this.calcHeight(38)}lpx`)
               .fontColor('#333333')
-              .fontSize('29lpx')
+              .fontSize(`${this.calcHeight(29)}lpx`)
           } else {
             Text(`${item.title}`)
-              .margin({ top: '8lpx' })
-              .height('38lpx')
+              .margin({ top: `${this.calcHeight(8)}lpx` })
+              .height(`${this.calcHeight(38)}lpx`)
               .fontColor('#333333')
-              .fontSize('29lpx')
+              .fontSize(`${this.calcHeight(29)}lpx`)
           }
         }.width('60%')
         // 右侧文案和右箭头
         Row() {
           Toggle({ type: ToggleType.Switch, isOn: item.switchState })
-            .height('50lpx')
-            .margin({ left: '81lpx', right: '29lpx' })
+            .height(`${this.calcHeight(50)}lpx`)
+            .width(`${this.calcHeight(96)}lpx`)
+            .margin({ left: `${this.calcHeight(81)}lpx`, right: `${this.calcHeight(29)}lpx` })
             .selectedColor("#ED2800")
             .onChange((isOn: boolean) => {
               if(item.itemType=='push_switch'){
@@ -168,13 +186,13 @@ export struct MineSettingComponent {
               }
             })
         }.width('40%')
-        .margin({ right: '29lpx' })
+        .margin({ right: `${this.calcHeight(29)}lpx` })
         .justifyContent(FlexAlign.End)
       }
       .alignItems(VerticalAlign.Center)
       .justifyContent(FlexAlign.SpaceBetween)
-    }.height('54lpx')
+    }.height(`${this.calcHeight(54)}lpx`)
   }
   // 右文字+箭头cell
@@ -185,10 +203,10 @@ export struct MineSettingComponent {
         // 左侧logo和标题
         Row() {
           Text(`${item.title}`)
-            .margin({ top: '8lpx' })
-            .height('38lpx')
+            .margin({ top: `${this.calcHeight(8)}lpx` })
+            .height(`${this.calcHeight(38)}lpx`)
             .fontColor('#333333')
-            .fontSize('29lpx')
+            .fontSize(`${this.calcHeight(29)}lpx`)
         }.width('60%')
         // 右侧文案和右箭头
@@ -197,13 +215,13 @@ export struct MineSettingComponent {
             .fontColor('#999999')
             .maxLines(1)
           Image($r('app.media.mine_user_arrow_2'))
-            .width('27lpx')
-            .height('27lpx')
+            .width(`${this.calcHeight(27)}lpx`)
+            .height(`${this.calcHeight(27)}lpx`)
             .objectFit(ImageFit.Auto)
             .interpolation(ImageInterpolation.High)
-          Column().width('29lpx')
+          Column().width(`${this.calcHeight(29)}lpx`)
         }.width('40%')
-        .margin({ right: '29lpx' })
+        .margin({ right: `${this.calcHeight(29)}lpx` })
         .justifyContent(FlexAlign.End)
       }
@@ -211,7 +229,7 @@ export struct MineSettingComponent {
       .justifyContent(FlexAlign.SpaceBetween)
     }
-    .height('54lpx')
+    .height(`${this.calcHeight(54)}lpx`)
     .onClick(() => {
       if (item.itemType == 'account') {
         trackButtonClick("settingPageAccountManagement")
@@ -266,6 +284,10 @@ export struct MineSettingComponent {
     }
     this.preferences.on('change', observer);
   }
+
+  calcHeight(value:number): number{
+    return value * this.percent
+  }
 }
 function trackButtonClick(buttonName: string){