developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
yangchenggong1_wd
61643d99 1 parent af2c4c24

desc：设置页面适配折叠屏

Inline Side-by-side
Showing 3 changed files with 120 additions and 62 deletions
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
}
}
... ...
... ... @@ -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"))
}
// 私有方法
... ...
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){
... ...