1、ui
Stack() {
Row() {
ForEach([1, 2, 3, 4], (item: number) => {
Text()
.width(3)
.height(20)
.backgroundColor(Color.Black)
.margin(item === 2 ? { left: 8 } : item === 3 ? { left: 7 } : { left: 0 })
})
}.width('97%').justifyContent(FlexAlign.SpaceBetween).padding({ right: 2 })
Slider({
value: this.changeFontSize === CommonConstants.SET_SIZE_HUGE
? CommonConstants.SET_SLIDER_MAX : this.changeFontSize === 16 ? this.changeFontSize = 16.700000762939453 :
this.changeFontSize === 19 ? this.changeFontSize = 19.399999618530273 : this.changeFontSize,
min: CommonConstants.SET_SLIDER_MIN,
max: CommonConstants.SET_SLIDER_MAX,
step: CommonConstants.SET_SLIDER_STEP,
style: SliderStyle.OutSet
})
.blockColor(Color.White)
.trackColor(Color.Black)
.selectedColor(Color.Black)
.showSteps(true)
.onChange(async (value: number) => {
if (this.changeFontSize === 0) {
this.changeFontSize = await PreferencesUtil.getChangeFontSize();
return;
}
this.changeFontSize =
(Math.floor(value) === CommonConstants.SET_SLIDER_MAX ? CommonConstants.SET_SIZE_HUGE :
Math.floor(value));
PreferencesUtil.saveChangeFontSize(this.changeFontSize);
})
}2、工具类
1.
/*
* 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 {
/**
* Small font size.
*/
static readonly SET_SIZE_SMALL: number = 14;
/**
* Normal font size.
*/
static readonly SET_SIZE_NORMAL: number = 16.7;
/**
* Large font size.
*/
static readonly SET_SIZE_LARGE: number = 19.4;
/**
* Extra large font size.
*/
static readonly SET_SIZE_EXTRA_LARGE: number = 20;
/**
* Huge font size.
*/
static readonly SET_SIZE_HUGE: number = 24;
/**
* Slider min value.
*/
static readonly SET_SLIDER_MIN: number = 14;
/**
* Slider max value.
*/
static readonly SET_SLIDER_MAX: number = 22;
/**
* Slider step length.
*/
static readonly SET_SLIDER_STEP: number = 2.7;
/**
* The setting list display index.
*/
static readonly DISPLAY_INDEX: number = 0;
/**
* The setting list voice index.
*/
static readonly VOICE_INDEX: number = 1;
/**
* The setting list slice start index.
*/
static readonly START_INDEX: number = 2;
/**
* The setting list slice font index.
*/
static readonly SET_FONT_INDEX: number = 3;
/**
* The setting list slice end index.
*/
static readonly END_INDEX: number = 6;
/**
* The set font size url.
*/
static readonly SET_URL: string = 'pages/SetFontSizePage';
}2.
/*
* 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);
}
}3.
/*
* 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 '../utils/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();4.
/*
* 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%';
}3、使用
@State changeFontSize: number = CommonConstants.SET_SIZE_NORMAL;
onPageShow() {
PreferencesUtil.getChangeFontSize().then((value) => {
this.changeFontSize = value;
});
}
Text('字体大小')
.fontSize(this.changeFontSize)4.配置文件（api13，不需要配置，api13以下需要）
详情文档中心
AppScope/resources/base/profile/configuration.json中
{
"configuration": {
"fontSizeScale": "nonFollowSystem"
}
}
app.json5中
"configuration": "$profile:configuration",
