openharmony/applications_settings
1
0
Fork 0
mirror of https://gitee.com/openharmony/applications_settings synced 2024-11-27 08:30:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

横竖屏ux适配

Browse Source 
Signed-off-by: wwx1133664 <wangyi237@huawei.com>
This commit is contained in:
wwx1133664 2022-05-30 15:35:21 +08:00
parent 689edf4231
commit 155aab9923
7 changed files with 250 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
product/phone/src/main/ets/MainAbility/pages/system/homePage.ets
View File

@ -56,10 +56,11 @@ struct SystemSettings {
SubEntryComponent({targetPage: "pages/developerOptions", title: $r("app.string.developerOptionsTab")})
}
.margin({top:$r('app.float.distance_8')})
.margin({top:$r("app.float.distance_8")})
.width(ConfigData.WH_100_100)
}
.padding({ left: $r('sys.float.ohos_id_card_margin_start'), right: $r('sys.float.ohos_id_card_margin_end')})
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.padding({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') })
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.useSizeType({
@ -124,7 +125,9 @@ struct SoftwareUpdateComponent {
Image('/res/image/ic_settings_arrow.svg')
.width($r('app.float.wh_value_12'))
.height($r('app.float.wh_value_24'))
.margin({right: $r('app.float.distance_8')});
.margin({right: $r('app.float.distance_8')})
.fillColor($r("sys.color.ohos_id_color_primary"))
.opacity($r("app.float.opacity_0_2"))
}
.height(ConfigData.WH_100_100)
.width(ConfigData.WH_100_100)

29
product/phone/src/main/ets/MainAbility/pages/system/languageSettings/homePage.ets
View File

@ -15,7 +15,7 @@
import LogUtil from '../../../../../../../../../common/utils/src/main/ets/default/baseUtil/LogUtil';
import HeadComponent from '../../../../../../../../../common/component/src/main/ets/default/headComponent';
import ConfigData from '../../../../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';
import {SubEntryComponent} from '../../../../../../../../../common/component/src/main/ets/default/subEntryComponent';
import { SubEntryComponent } from '../../../../../../../../../common/component/src/main/ets/default/subEntryComponent';
/**
* Home Page Of Language Settings
@ -26,8 +26,13 @@ struct LanguageSettings {
private TAG = `${ConfigData.TAG} LanguageSettings`;
build() {
Column(){
GridContainer({columns:12, sizeType: SizeType.Auto, gutter: vp2px(1) === 2 ? '12vp' : '0vp', margin: vp2px(1) === 2 ? '24vp' : '0vp'}) {
Column() {
GridContainer({
columns: 12,
sizeType: SizeType.Auto,
gutter: vp2px(1) === 2 ? '12vp' : '0vp',
margin: vp2px(1) === 2 ? '24vp' : '0vp'
}) {
Row({}) {
Column() {
}
@ -39,11 +44,16 @@ struct LanguageSettings {
});
Column() {
HeadComponent({headName: $r('app.string.setlanguage'), isActive: true})
SubEntryComponent({targetPage: 'pages/system/languageSettings/languageAndRegion/homePage', title: $r("app.string.languageAndRegion")})
HeadComponent({ headName: $r('app.string.setlanguage'), isActive: true })
Column() {
SubEntryComponent({
targetPage: 'pages/system/languageSettings/languageAndRegion/homePage',
title: $r("app.string.languageAndRegion")
})
}.margin({top:$r("app.float.distance_8")})
}
.padding({left: $r('app.float.distance_24'), right: $r('app.float.distance_24')})
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.padding({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') })
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.useSizeType({
@ -71,15 +81,14 @@ struct LanguageSettings {
.height(ConfigData.WH_100_100);
}
aboutToAppear(){
aboutToAppear() {
LogUtil.info(`${this.TAG} aboutToAppear in`);
LogUtil.info(`${this.TAG} aboutToAppear out`);
}
aboutToDisappear(){
aboutToDisappear() {
LogUtil.info(`${this.TAG} aboutToDisappear in`);
LogUtil.info(`${this.TAG} aboutToDisappear out`);
}
}

18
product/phone/src/main/ets/MainAbility/pages/system/languageSettings/languageAndRegion/addLanguage.ets
View File

@ -46,7 +46,7 @@ struct AddLanguage {
Column() {
HeadComponent({ headName: $r('app.string.addLanguage'), isActive: true })
List({space: this.listSpace}){
List(){
ListItem() {
SubHeader({ titleContent: $r('app.string.addedLanguage') })
}
@ -58,7 +58,6 @@ struct AddLanguage {
ListItem() {
SubHeader({ titleContent: $r('app.string.allLanguage') })
}
ListItem() {
AllLanguagesList();
}
@ -66,7 +65,8 @@ struct AddLanguage {
.flexShrink(1)
.edgeEffect(EdgeEffect.Spring);
}
.padding({left: $r("app.float.distance_24"), right: $r("app.float.distance_24")})
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.padding({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') })
.height(ConfigData.WH_100_100)
.width(ConfigData.WH_100_100)
.useSizeType({
@ -133,7 +133,8 @@ struct AddedLanguagesList {
.height($r("app.float.wh_value_19"))
.fontWeight(FontWeight.Regular)
.margin({bottom: $r("app.float.distance_11")})
.fontColor($r("app.color.font_color_182431"))
.fontColor($r('sys.color.ohos_id_color_primary'))
.opacity($r('sys.float.ohos_fa_alpha_content_secondary'))
.textAlign(TextAlign.Start);
}
.alignItems(HorizontalAlign.Start);
@ -162,8 +163,8 @@ struct AddedLanguagesList {
}
.padding($r("app.float.distance_4"))
.borderRadius($r("app.float.radius_24"))
.divider({strokeWidth: 1, color: $r("app.color.color_E3E3E3_grey"), startMargin: $r("app.float.distance_8"), endMargin: $r("app.float.distance_8")})
.backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"));
.divider({strokeWidth: $r('app.float.divider_wh'), color: $r('sys.color.ohos_id_color_list_separator'), startMargin: $r("app.float.distance_8"), endMargin: $r("app.float.distance_8")})
.backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"))
}
}
@ -193,7 +194,8 @@ struct AllLanguagesList {
.height($r("app.float.wh_value_19"))
.fontWeight(FontWeight.Regular)
.margin({bottom: $r("app.float.distance_11")})
.fontColor($r("app.color.font_color_182431"))
.fontColor($r('sys.color.ohos_id_color_primary'))
.opacity($r('sys.float.ohos_fa_alpha_content_secondary'))
.textAlign(TextAlign.Start);
}
.alignItems(HorizontalAlign.Start);
@ -258,7 +260,7 @@ struct AllLanguagesList {
.padding($r("app.float.distance_4"))
.backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"))
.borderRadius($r("app.float.radius_24"))
.divider({strokeWidth: 1, color: $r("app.color.color_E3E3E3_grey"), startMargin: $r("app.float.distance_8"), endMargin: $r("app.float.distance_8")});
.divider({strokeWidth: $r('app.float.divider_wh'), color: $r('sys.color.ohos_id_color_list_separator'), startMargin: $r("app.float.distance_8"), endMargin: $r("app.float.distance_8")});
}
}

12
product/phone/src/main/ets/MainAbility/pages/system/languageSettings/languageAndRegion/editLanguage.ets
View File

@ -40,9 +40,12 @@ struct EditLanguage {
Column() {
HeadComponent({headName: $r('app.string.editLanguage')});
EditList();
Column(){
EditList();
}.margin({top:$r("app.float.distance_8")})
}
.padding({left: $r("app.float.distance_24"), right: $r("app.float.distance_24")})
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.padding({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') })
.height(ConfigData.WH_100_100)
.width(ConfigData.WH_100_100)
.useSizeType({
@ -99,6 +102,7 @@ struct EditList {
Image($r('app.media.ic_move'))
.width($r('app.float.wh_value_24'))
.height($r('app.float.wh_value_24'))
.fillColor($r("sys.color.ohos_id_color_primary"))
.objectFit(ImageFit.Contain)
.margin({right: $r("app.float.distance_11")});
@ -170,7 +174,7 @@ struct EditList {
.margin({top:$r("app.float.distance_8")})
.backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"))
.borderRadius($r("app.float.radius_24"))
.divider({strokeWidth:1, color: $r("app.color.color_E3E3E3_grey"), startMargin: $r("sys.float.ohos_id_card_margin_start"), endMargin: $r("sys.float.ohos_id_card_margin_end")})
.divider({strokeWidth:$r('app.float.divider_wh'), color: $r('sys.color.ohos_id_color_list_separator'), startMargin: $r("sys.float.ohos_id_card_margin_start"), endMargin: $r("sys.float.ohos_id_card_margin_end")})
}
}
@ -188,6 +192,7 @@ struct HeadComponent {
Image($r('app.media.ic_close'))
.width($r('app.float.wh_value_24'))
.height($r('app.float.wh_value_24'))
.fillColor($r("sys.color.ohos_id_color_primary"))
.margin({ right: $r('app.float.wh_value_16'), top: $r('app.float.wh_value_16'), bottom: $r('app.float.wh_value_16')})
.backgroundColor(this.isTouch ? $r('app.color.color_E3E3E3_grey') : $r('app.color.color_00000000_transparent'))
.onClick(()=>{
@ -215,6 +220,7 @@ struct HeadComponent {
Image($r("app.media.ic_ok"))
.width($r('app.float.wh_value_24'))
.height($r('app.float.wh_value_24'))
.fillColor($r("sys.color.ohos_id_color_primary"))
.objectFit(ImageFit.Contain);
}
.width(ConfigData.WH_100_100)

28
product/phone/src/main/ets/MainAbility/pages/system/languageSettings/languageAndRegion/homePage.ets
View File

@ -51,7 +51,6 @@ struct LanguageAndRegion {
.fontWeight(FontWeight.Medium)
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.textAlign(TextAlign.Start)
.margin({top: $r("app.float.distance_19_5"), bottom: $r("app.float.distance_9_5")});
Navigator({target: 'pages/system/languageSettings/languageAndRegion/editLanguage'}) {
Text($r("app.string.edit"))
.fontColor($r("app.color.font_color_007DFF"))
@ -59,11 +58,11 @@ struct LanguageAndRegion {
.fontWeight(FontWeight.Medium)
.lineHeight($r("app.float.lineHeight_19"))
.textAlign(TextAlign.End)
.margin({top: $r("app.float.distance_19_5"), bottom: $r("app.float.distance_9_5")});
}
}
.margin({left: $r("sys.float.ohos_id_card_margin_start"), right: $r("sys.float.ohos_id_card_margin_end")})
.height($r("app.float.wh_value_48"));
.height($r("app.float.wh_value_48"))
.padding({top:$r('app.float.distance_19_5'),bottom:$r('app.float.distance_9_5')})
}
ListItem() {
@ -85,9 +84,10 @@ struct LanguageAndRegion {
}
.flexShrink(1)
}
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.height(ConfigData.WH_100_100)
.width(ConfigData.WH_100_100)
.padding({left: $r("app.float.distance_24"), right: $r("app.float.distance_24")})
.padding({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') })
.useSizeType({
xs: { span: 12, offset: 0 }, sm: { span: 12, offset: 0 },
md: { span: 12, offset: 0 }, lg: { span: 8, offset: 2 }
@ -141,21 +141,22 @@ struct AddedList {
Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems:ItemAlign.Center }) {
Column(){
Text(LanguageAndRegionModel.getSysDisplayLanguage(item))
.fontSize($r("app.float.font_16"))
.fontSize($r("sys.float.ohos_id_text_size_body1"))
.lineHeight($r("app.float.wh_value_22"))
.fontWeight(FontWeight.Medium)
.padding(LanguageAndRegionModel.isSystemLanguage(item) ? {top: $r("app.float.distance_21"), bottom: $r("app.float.distance_17")} : {top: $r("app.float.distance_10"), bottom: $r("app.float.distance_2")})
.fontColor(LanguageAndRegionModel.isSystemLanguage(item) ? $r("app.color.font_color_007DFF") : $r("app.color.font_color_182431"))
.textAlign(TextAlign.Start);
Text(LanguageAndRegionModel.getDisplayLanguage(item))
.fontSize($r("app.float.font_14"))
.fontSize($r("sys.float.ohos_id_text_size_body2"))
.lineHeight($r("app.float.wh_value_19"))
.fontWeight(FontWeight.Regular)
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.fontColor($r('sys.color.ohos_id_color_primary'))
.opacity($r('sys.float.ohos_fa_alpha_content_secondary'))
.margin({ bottom: $r("app.float.distance_11") })
.fontColor($r("app.color.font_color_182431"))
.textAlign(TextAlign.Start)
.visibility(LanguageAndRegionModel.isSystemLanguage(item) ? Visibility.None : Visibility.Visible);
.visibility(LanguageAndRegionModel.isSystemLanguage(item) ? Visibility.None : Visibility.Visible)
}
.alignItems(HorizontalAlign.Start)
@ -165,6 +166,7 @@ struct AddedList {
.objectFit(ImageFit.Contain)
.visibility(LanguageAndRegionModel.isSystemLanguage(item) ? Visibility.Visible : Visibility.None);
}
.height($r('app.float.wh_value_64'))
.padding({left: $r("app.float.distance_8"), right: $r("app.float.distance_8")})
}
.align(Alignment.Start)
@ -193,7 +195,7 @@ struct AddedList {
}
.padding($r("app.float.distance_4"))
.borderRadius($r("app.float.radius_24"))
.divider({strokeWidth: 1, color: $r("app.color.color_E3E3E3_grey"), startMargin: $r("app.float.distance_8"), endMargin: $r("app.float.distance_8")})
.divider({strokeWidth: $r('app.float.divider_wh'), color: $r('sys.color.ohos_id_color_list_separator'), startMargin: $r("app.float.distance_8"), endMargin: $r("app.float.distance_8")})
.backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"));
}
}
@ -261,7 +263,7 @@ struct Region {
.fontSize($r('app.float.font_16'))
.lineHeight($r('app.float.wh_value_22'))
.fontWeight(FontWeight.Medium)
.fontColor($r('app.color.font_color_182431'))
.fontColor($r("sys.color.ohos_id_color_primary"))
.margin({left: $r('app.float.distance_8')})
.textAlign(TextAlign.Start);
}
@ -270,13 +272,15 @@ struct Region {
Text(this.currentRegion)
.fontSize($r('app.float.font_14'))
.lineHeight($r('app.float.wh_value_19'))
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.fontColor($r("sys.color.ohos_id_color_primary"))
.margin({ right: $r('app.float.distance_4') })
.textAlign(TextAlign.End);
Image('/res/image/ic_settings_arrow.svg')
.width($r('app.float.wh_value_12'))
.height($r('app.float.wh_value_24'))
.margin({right: $r('app.float.distance_8')});
.margin({right: $r('app.float.distance_8')})
.fillColor($r("sys.color.ohos_id_color_primary"))
.opacity($r("app.float.opacity_0_2"))
}
}
.height(ConfigData.WH_100_100)

5
product/phone/src/main/ets/MainAbility/pages/system/languageSettings/languageAndRegion/selectRegion.ets
View File

@ -85,13 +85,14 @@ struct SelectRegion {
.width(ConfigData.WH_100_100)
.borderRadius($r('app.float.radius_24'))
.backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"))
.divider({strokeWidth: 1, color: $r("app.color.color_E3E3E3_grey"), startMargin: $r("app.float.distance_8"), endMargin: $r("app.float.distance_8")});
.divider({strokeWidth: $r('app.float.divider_wh'), color: $r('sys.color.ohos_id_color_list_separator'), startMargin: $r("app.float.distance_8"), endMargin: $r("app.float.distance_8")});
}
}
.flexShrink(1)
.width(ConfigData.WH_100_100)
}
.padding({left: $r('app.float.radius_24'), right: $r('app.float.radius_24')})
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.padding({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') })
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.useSizeType({

187
product/phone/src/main/ets/MainAbility/pages/system/storage.ets Normal file
View File

@ -0,0 +1,187 @@
/**
* 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 HeadComponent from '../../../../../../../common/component/src/main/ets/default/headComponent';
import ConfigData from '../../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';
import StorageController from '../controller/storage/storageController';
/**
* Storage
*/
@Entry
@Component
struct Storage {
@State storageList: any[] = [];
private usedSpace: any = '';
private totalSpace: any = '';
private freeBytes: any = '';
@State proportion: number = 0;
@State usedSpaceList: any[] = [];
private controller: StorageController = new StorageController();
build() {
Column(){
GridContainer({columns:12, sizeType: SizeType.Auto, gutter: vp2px(1) === 2 ? '12vp' : '0vp', margin: vp2px(1) === 2 ? '24vp' : '0vp'}) {
Row({}) {
Column() {
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.useSizeType({
xs: { span: 0, offset: 0 }, sm: { span: 0, offset: 0 },
md: { span: 0, offset: 0 }, lg: { span: 2, offset: 0 }
});
Column() {
HeadComponent({ headName: $r('app.string.storageTab'), isActive: true });
Stack({ alignContent: Alignment.Center }) {
Column() {
DataPanel({ values: this.usedSpaceList, max: 100 })
.align(Alignment.Top)
.width($r("app.float.dataPanel_distance"))
.height($r("app.float.dataPanel_distance"))
}
Column() {
Row() {
Blank()
}.layoutWeight(1)
Row() {
Column() {
Blank()
}.layoutWeight(1)
Text(`${this.proportion}`)
.fontSize($r("app.float.dataPanel_proportion_font_size_1"))//wjx
.fontWeight(FontWeight.Medium).fontColor($r("sys.color.ohos_id_color_primary"))//wjx
.margin({ right: $r("app.float.distance_2") })//wjx
Flex({ alignItems: ItemAlign.Baseline }) {
Text('%')
.fontSize($r("app.float.dataPanel_percent_font_size_1"))//wjx
.fontWeight(FontWeight.Medium)//wjx
.fontColor($r("sys.color.ohos_id_color_secondary"))//wjx
Text(' ').fontSize($r("app.float.dataPanel_proportion_font_size"))
}.layoutWeight(1)
}.width(ConfigData.WH_100_100)
.margin({ bottom: $r("app.float.distance_8")})//wjx
Row() {
Text($r("app.string.used", this.usedSpace, this.totalSpace))
.fontSize($r("app.float.dataPanel_used_font_size_1")) //wjx
.fontColor(Color.Grey)
.alignSelf(ItemAlign.Start)
.fontColor($r("sys.color.ohos_id_color_primary")) //wjx
.opacity($r("sys.float.ohos_id_alpha_content_secondary"))//wjx
.fontWeight(FontWeight.Regular)//wjx
}.layoutWeight(1)
}
}
.width($r("app.float.dataPanel_distance"))
.height($r("app.float.dataPanel_distance"))
.margin({ bottom: $r("app.float.distance_96") })
Row() {
List() {
ForEach(this.storageList, (item) => {
ListItem() {
Row() {
Circle()
.width($r('sys.float.ohos_id_corner_radius_default_s'))
.height($r('sys.float.ohos_id_corner_radius_default_s'))
.colorBlend(item.settingIcon)
.margin({
right: $r("app.float.distance_16")//wjx
})
Text(item.settingTitle)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.fontSize( $r('sys.float.ohos_id_text_size_body1'))
.textAlign(TextAlign.Start)
.layoutWeight(1);
Text(item.settingValue)
.fontSize($r('sys.float.ohos_id_text_size_body2'))
.fontColor($r('sys.color.ohos_id_color_secondary'))
.fontWeight(FontWeight.Regular)
.height($r('app.float.wh_value_40'))
.margin({ left: $r('sys.float.ohos_id_elements_margin_horizontal_l') })
.align(Alignment.End);
}
.height($r("app.float.wh_value_56"))
.width(ConfigData.WH_100_100)
.borderRadius($r("sys.float.ohos_id_corner_radius_default_l"))
.alignItems(VerticalAlign.Center)
.padding({ left: $r("app.float.distance_16"),right: $r("app.float.distance_12")})//wjx
}
});
}
.padding({
left: $r('sys.float.ohos_id_card_margin_end'),
right: $r('sys.float.ohos_id_card_margin_end')
})
.divider({
strokeWidth: $r('app.float.divider_wh'),
color: $r('app.color.color_D8D8D8_grey'),
startMargin: $r('app.float.distance_24'),
})
}
.borderRadius($r("sys.float.ohos_id_corner_radius_default_l"))
.backgroundColor($r("app.color.white_bg_color"))
.padding($r('app.float.distance_4'))
}
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.padding({left:$r('app.float.distance_24'), right:$r('app.float.distance_24')})
.align(Alignment.Start)
.height(ConfigData.WH_100_100)
.width(ConfigData.WH_100_100)
.useSizeType({
xs: { span: 12, offset: 0 }, sm: { span: 12, offset: 0 },
md: { span: 12, offset: 0 }, lg: { span: 8, offset: 2 }
});
Column() {
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100)
.useSizeType({
xs: { span: 0, offset: 12 }, sm: { span: 0, offset: 12 },
md: { span: 0, offset: 12 }, lg: { span: 2, offset: 10 }
})
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100);
}
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100);
}
.backgroundColor($r("sys.color.ohos_id_color_sub_background"))
.width(ConfigData.WH_100_100)
.height(ConfigData.WH_100_100);
}
aboutToAppear(): void{
// bind component and initialize
if (this.controller) {
this.controller.bindComponent(this)
.bindProperties(["storageList", "totalSpace", "freeBytes", "usedSpace", "proportion", "usedSpaceList"])
.initData();
}
}
}