ui：
TypeScript
import { display, mediaquery, router } from '@kit.ArkUI'
import CommonConstants from './CommonConstants';
import PreferencesUtil from './PreferencesUtil';
import StyleConstants from './StyleConstants';
// 字体大小
@Entry
@Component
struct FontSize {
@State TopBar: string[] = ['取消', '字体大小预览', '确定']
@State sliderTitle: string[] = ['A', '标准', '', 'A']
@State changeFontSize: number = 12;
@State outSetValueOne: number = 40
@State offsetX: number = 0;
@State lineW: number = 0
@State circleW: number = 18
@State circleH: number = 18
@State minW: number = 0
@State scaleArr: number[] = []
@State acrossOrVertical: string = ''
aboutToAppear() {
PreferencesUtil.getChangeFontSize().then((value) => {
this.changeFontSize = value;
if (this.changeFontSize === CommonConstants.SET_SIZE_EXTRA_LARGE) {
this.offsetX = CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL
} else if (this.changeFontSize === CommonConstants.SET_SIZE_LARGE) {
this.offsetX = CommonConstants.SET_SCALE_LARGE_VERTICAL
} else if (this.changeFontSize === CommonConstants.SET_SIZE_NORMAL) {
this.offsetX = CommonConstants.SET_SCALE_NORMAL_VERTICAL
} else if (this.changeFontSize === CommonConstants.SET_SIZE_SMALL) {
this.offsetX = CommonConstants.SET_SCALE_SMALL_VERTICAL
}
});
this.scaleArr = [CommonConstants.SET_SCALE_SMALL_VERTICAL, CommonConstants.SET_SCALE_NORMAL_VERTICAL,
CommonConstants.SET_SCALE_LARGE_VERTICAL, CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL]
this.lineW = CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL //pad竖屏
}
callbackOffset() {
// if (this.offsetX === 18) {
// return 0 - this.circleW / 2
// }
return this.offsetX - this.circleW / 2
}
changeFontSize_Across() {
if (this.offsetX > CommonConstants.SET_SCALE_SMALL_ACROSS &&
this.offsetX <= CommonConstants.SET_SCALE_NORMAL_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS) {
this.changeFontSize = CommonConstants.SET_SIZE_SMALL
} else if (this.offsetX >
CommonConstants.SET_SCALE_NORMAL_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS / 2 &&
this.offsetX <= CommonConstants.SET_SCALE_LARGE_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS) {
this.changeFontSize = CommonConstants.SET_SIZE_NORMAL
} else if (this.offsetX >
CommonConstants.SET_SCALE_LARGE_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS &&
this.offsetX <=
CommonConstants.SET_SCALE_EXTRA_LARGE_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS) {
this.changeFontSize = CommonConstants.SET_SIZE_LARGE
} else if (this.offsetX >
CommonConstants.SET_SCALE_EXTRA_LARGE_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS &&
this.offsetX <= CommonConstants.SET_SCALE_EXTRA_LARGE_ACROSS) {
this.changeFontSize = CommonConstants.SET_SIZE_EXTRA_LARGE
}
}
changeFontSize_Vertical() {
if (this.offsetX > CommonConstants.SET_SCALE_SMALL_VERTICAL &&
this.offsetX <=
CommonConstants.SET_SCALE_NORMAL_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
this.changeFontSize = CommonConstants.SET_SIZE_SMALL
} else if (this.offsetX >
CommonConstants.SET_SCALE_NORMAL_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL / 2 &&
this.offsetX <= CommonConstants.SET_SCALE_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
this.changeFontSize = CommonConstants.SET_SIZE_NORMAL
} else if (this.offsetX >
CommonConstants.SET_SCALE_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL &&
this.offsetX <=
CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
this.changeFontSize = CommonConstants.SET_SIZE_LARGE
} else if (this.offsetX >
CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL &&
this.offsetX <= CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL) {
this.changeFontSize = CommonConstants.SET_SIZE_EXTRA_LARGE
}
}
onTouchGetOffsetX_Vertical(touchesX: number) {
AlertDialog.show({ message: "1" })
if (touchesX > CommonConstants.SET_SCALE_SMALL_VERTICAL && touchesX <
CommonConstants.SET_SCALE_NORMAL_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
this.offsetX = CommonConstants.SET_SCALE_SMALL_VERTICAL
}
if (touchesX >
CommonConstants.SET_SCALE_NORMAL_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL &&
touchesX <
CommonConstants.SET_SCALE_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
this.offsetX = CommonConstants.SET_SCALE_NORMAL_VERTICAL
}
if (touchesX >
CommonConstants.SET_SCALE_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL &&
touchesX <
CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
this.offsetX = CommonConstants.SET_SCALE_LARGE_VERTICAL
}
if (touchesX >
CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL &&
touchesX < CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL) {
this.offsetX = CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL
}
}
onTouchGetOffsetX_Across(touchesX: number) {
AlertDialog.show({ message: "2" })
if (touchesX > CommonConstants.SET_SCALE_SMALL_ACROSS &&
touchesX < CommonConstants.SET_SCALE_NORMAL_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS) {
this.offsetX = CommonConstants.SET_SCALE_SMALL_ACROSS
}
if (touchesX > CommonConstants.SET_SCALE_NORMAL_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS &&
touchesX < CommonConstants.SET_SCALE_LARGE_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS) {
this.offsetX = CommonConstants.SET_SCALE_NORMAL_ACROSS
}
if (touchesX > CommonConstants.SET_SCALE_LARGE_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS &&
touchesX < CommonConstants.SET_SCALE_EXTRA_LARGE_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS) {
this.offsetX = CommonConstants.SET_SCALE_LARGE_ACROSS
}
if (touchesX > CommonConstants.SET_SCALE_EXTRA_LARGE_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS &&
touchesX < CommonConstants.SET_SCALE_EXTRA_LARGE_ACROSS) {
this.offsetX = CommonConstants.SET_SCALE_EXTRA_LARGE_ACROSS
}
}
build() {
Column() {
Text('实例文案-----你猜你猜猜').fontSize(this.changeFontSize + StyleConstants.UNIT_FP)
Text(`相应字体大小:${this.changeFontSize}`).fontSize(this.changeFontSize + StyleConstants.UNIT_FP)
Text(`偏移距离:${this.offsetX}`).fontSize(this.changeFontSize + StyleConstants.UNIT_FP)
Column() {
Row() {
ForEach(this.sliderTitle, (item: string, i: number) => {
Text(item).fontSize(i === 3 ? 16 : 13)
})
}.width('91%').justifyContent(FlexAlign.SpaceBetween)
Stack() {
Row() {
ForEach([1, 2, 3, 4], (item: number) => {
Text()
.width(2)
.height(12)
.backgroundColor('#646464')
})
}.width(this.lineW).justifyContent(FlexAlign.SpaceBetween)
Stack() {
Line().width(this.lineW).height(2).backgroundColor('#646464')
Text()
.width(this.circleW)
.height(this.circleH)
.borderRadius(9)
.backgroundColor(Color.White)
.border({ width: 3, color: "#646464" })
.draggable(true)
.translate({ x: this.callbackOffset() })
}
.width('97%')
.height(50)
.alignContent(Alignment.Start)
.onTouch(async (event) => {
this.offsetX = event.touches[0].x
if (event.touches[0].x < this.circleW) {
this.offsetX = this.circleW
}
if (event.touches[0].x > this.lineW) {
this.offsetX = this.lineW
}
if (this.offsetX > CommonConstants.SET_SCALE_SMALL_VERTICAL &&
this.offsetX <=
CommonConstants.SET_SCALE_NORMAL_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
this.changeFontSize = CommonConstants.SET_SIZE_SMALL
} else if (this.offsetX >
CommonConstants.SET_SCALE_NORMAL_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL / 2 &&
this.offsetX <= CommonConstants.SET_SCALE_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
this.changeFontSize = CommonConstants.SET_SIZE_NORMAL
} else if (this.offsetX >
CommonConstants.SET_SCALE_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL &&
this.offsetX <=
CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
this.changeFontSize = CommonConstants.SET_SIZE_LARGE
} else if (this.offsetX >
CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL &&
this.offsetX <= CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL) {
this.changeFontSize = CommonConstants.SET_SIZE_EXTRA_LARGE
}
// this.changeFontSize_Vertical()
if (event.type === TouchType.Up) {
if (event.touches[0].x > CommonConstants.SET_SCALE_SMALL_VERTICAL && event.touches[0].x <
CommonConstants.SET_SCALE_NORMAL_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
this.offsetX = CommonConstants.SET_SCALE_SMALL_VERTICAL
}
if (event.touches[0].x >
CommonConstants.SET_SCALE_NORMAL_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL &&
event.touches[0].x <
CommonConstants.SET_SCALE_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
this.offsetX = CommonConstants.SET_SCALE_NORMAL_VERTICAL
}
if (event.touches[0].x >
CommonConstants.SET_SCALE_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL &&
event.touches[0].x <
CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
this.offsetX = CommonConstants.SET_SCALE_LARGE_VERTICAL
}
if (event.touches[0].x >
CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL &&
event.touches[0].x < CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL) {
this.offsetX = CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL
}
}
if (this.changeFontSize === 0) {
this.changeFontSize = await PreferencesUtil.getChangeFontSize();
return;
}
})
}.width('93%')
}
.width('100%')
.height(48)
.margin({ bottom: 40, top: 5 })
}
.height('100%')
.width('100%')
}
}utils_GlobalContext:
TypeScript
/*
* Copyright (c) 2023 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 class GlobalContext {
private constructor() { }
private static instance: GlobalContext;
private _objects = new Map<string, Object>();
public static getContext(): GlobalContext {
if (!GlobalContext.instance) {
GlobalContext.instance = new GlobalContext();
}
return GlobalContext.instance;
}
getObject(value: string): Object | undefined {
return this._objects.get(value);
}
setObject(key: string, objectClass: Object): void {
this._objects.set(key, objectClass);
}
}utils_CommonConstants:
TypeScript
/*
* Copyright (c) 2022 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.
*/
/**
* Common constants for all features.
*/
export default class CommonConstants {
// fontSize
static readonly SET_SIZE_SMALL: number = 13.6;
static readonly SET_SIZE_NORMAL: number = 16;
static readonly SET_SIZE_LARGE: number = 18.4;
static readonly SET_SIZE_EXTRA_LARGE: number = 20.8;
// scale_pad_vertical
static readonly SET_SCALE_SMALL_VERTICAL: number = 0
static readonly SET_SCALE_NORMAL_VERTICAL: number = 214
static readonly SET_SCALE_LARGE_VERTICAL: number = 428
static readonly SET_SCALE_EXTRA_LARGE_VERTICAL: number = 642
static readonly SET_SCALE_AVERAGE_VERTICAL: number = 107
// scale_pad_across
static readonly SET_SCALE_SMALL_ACROSS: number = 0
static readonly SET_SCALE_NORMAL_ACROSS: number = 342
static readonly SET_SCALE_LARGE_ACROSS: number = 684
static readonly SET_SCALE_EXTRA_LARGE_ACROSS: number = 1026
static readonly SET_SCALE_AVERAGE_ACROSS: number = 171
}utils_PreferencesUtil:
TypeScript
/*
* Copyright (c) 2022 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 { preferences } from '@kit.ArkData';
import { GlobalContext } from './GlobalContext';
const TAG = '[PreferencesUtil]';
const PREFERENCES_NAME = 'myPreferences';
const KEY_APP_FONT_SIZE = 'appFontSize';
/**
* The PreferencesUtil provides preferences of create, save and query.
*/
export class PreferencesUtil {
createFontPreferences(context: Context) {
let fontPreferences: Function = (() => {
let preference: Promise<preferences.Preferences> = preferences.getPreferences(context, PREFERENCES_NAME);
return preference;
});
GlobalContext.getContext().setObject('getFontPreferences', fontPreferences);
}
saveDefaultFontSize(fontSize: number) {
let getFontPreferences: Function = GlobalContext.getContext().getObject('getFontPreferences') as Function;
getFontPreferences().then((preferences: preferences.Preferences) => {
preferences.has(KEY_APP_FONT_SIZE).then(async (isExist: boolean) => {
if (!isExist) {
await preferences.put(KEY_APP_FONT_SIZE, fontSize);
preferences.flush();
}
}).catch((err: Error) => {
});
}).catch((err: Error) => {
});
}
saveChangeFontSize(fontSize: number) {
let getFontPreferences: Function = GlobalContext.getContext().getObject('getFontPreferences') as Function;
getFontPreferences().then(async (preferences: preferences.Preferences) => {
await preferences.put(KEY_APP_FONT_SIZE, fontSize);
preferences.flush();
}).catch((err: Error) => {
});
}
async getChangeFontSize() {
let fontSize: number = 0;
let getFontPreferences: Function = GlobalContext.getContext().getObject('getFontPreferences') as Function;
// const preferences: dataPreferences.Preferences = await getFontPreferences();
fontSize = await (await getFontPreferences()).get(KEY_APP_FONT_SIZE, fontSize);
return fontSize;
}
async deleteChangeFontSize() {
let getFontPreferences: Function = GlobalContext.getContext().getObject('getFontPreferences') as Function;
const preferences: preferences.Preferences = await getFontPreferences();
let deleteValue = preferences.delete(KEY_APP_FONT_SIZE);
deleteValue.then(() => {
}).catch((err: Error) => {
});
}
}
export default new PreferencesUtil();utils_StyleConstants:
TypeScript
/*
* Copyright (c) 2022 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.
*/
/**
* Style constants for all features.
*/
export default class StyleConstants {
/**
* The head aspect ratio.
*/
static readonly HEAD_ASPECT_RATIO: number = 1;
/**
* Weight to fill.
*/
static readonly WEIGHT_FULL: number = 1;
/**
* Minimum height of two lines of text.
*/
static readonly DOUBLE_ROW_MIN: number = 28;
/**
* Unit of fp.
*/
static readonly UNIT_FP: string = 'fp';
/**
* Full the width.
*/
static readonly FULL_WIDTH: string = '100%';
/**
* Full the height.
*/
static readonly FULL_HEIGHT: string = '100%';
/**
* The percentage of 7.2.
*/
static readonly TITLE_BAR_HEIGHT_PERCENT: string = '7.2%';
/**
* The percentage of 93.3.
*/
static readonly BLOCK_WIDTH_PERCENT: string = '93.3%';
/**
* The percentage of 0.5.
*/
static readonly BLOCK_TOP_MARGIN_FIRST_PERCENT: string = '0.5%';
/**
* The percentage of 1.5.
*/
static readonly BLOCK_TOP_MARGIN_SECOND_PERCENT: string = '1.5%';
/**
* The percentage of 23.8.
*/
static readonly DIVIDER_END_MARGIN_PERCENT: string = '23.8%';
/**
* The percentage of 6.7.
*/
static readonly HEAD_RIGHT_PERCENT: string = '6.7%';
/**
* The percentage of 2.2.
*/
static readonly HEAD_LEFT_PERCENT: string = '2.2%';
/**
* The percentage of 64.4.
*/
static readonly MAX_CHAT_WIDTH_PERCENT: string = '64.4%';
/**
* The percentage of 3.1.
*/
static readonly CHAT_TOP_MARGIN_PERCENT: string = '3.1%';
/**
* The percentage of 6.5.
*/
static readonly SLIDER_LAYOUT_LEFT_PERCENT: string = '6.5%';
/**
* The percentage of 3.2.
*/
static readonly SLIDER_LAYOUT_TOP_PERCENT: string = '3.2%';
/**
* The percentage of 8.9.
*/
static readonly SET_CHAT_HEAD_SIZE_PERCENT: string = '8.9%';
/**
* The percentage of 12.5.
*/
static readonly A_WIDTH_PERCENT: string = '12.5%';
/**
* The percentage of 75.
*/
static readonly SLIDER_WIDTH_PERCENT: string = '75%';
/**
* The percentage of 3.3.
*/
static readonly SLIDER_HORIZONTAL_MARGIN_PERCENT: string = '3.3%';
/**
* The percentage of 1.
*/
static readonly SLIDER_TOP_MARGIN_PERCENT: string = '1%';
/**
* The percentage of 6.2.
*/
static readonly SLIDER_BOTTOM_MARGIN_PERCENT: string = '6.2%';
}