feat: add a Page

This commit is contained in:
cheliangzhao 2023-09-27 11:52:32 +08:00
parent 95a2e5ac35
commit 3309e664b5
15 changed files with 305 additions and 110 deletions

View File

@ -1,6 +1,20 @@
{ {
"app": { "app": {
"signingConfigs": [], "signingConfigs": [
{
"name": "default",
"type": "HarmonyOS",
"material": {
"certpath": "C:\\Users\\Administrator\\.ohos\\config\\auto_debug_harmony-demo_com.example.myapplication_70086000144137060.cer",
"storePassword": "0000001B7D0C3655FB9772C4075AA8B911BF72A385223C9C6E31223CB2B7B4C8AFD5B33A57CFC7CC2A76E6",
"keyAlias": "debugKey",
"keyPassword": "0000001BBEC8D2B369C85E907BDD68C151DEB7415B57223EA76BDB90DC4D8772B40C84EE3209ECF65DB1A8",
"profile": "C:\\Users\\Administrator\\.ohos\\config\\auto_debug_harmony-demo_com.example.myapplication_70086000144137060.p7b",
"signAlg": "SHA256withECDSA",
"storeFile": "C:\\Users\\Administrator\\.ohos\\config\\auto_debug_harmony-demo_com.example.myapplication_70086000144137060.p12"
}
}
],
"products": [ "products": [
{ {
"name": "default", "name": "default",

View File

@ -1,10 +1,10 @@
{ {
"license": "",
"devDependencies": {},
"author": "",
"name": "entry", "name": "entry",
"version": "1.0.0",
"description": "Please describe the basic information.", "description": "Please describe the basic information.",
"main": "", "main": "",
"author": "", "version": "1.0.0",
"license": "",
"dependencies": {} "dependencies": {}
} }

View File

@ -0,0 +1,3 @@
export enum Constants {
SET_SIZE_STANDARD = 16
}

View File

@ -3,10 +3,16 @@ import hilog from '@ohos.hilog';
import UIAbility from '@ohos.app.ability.UIAbility'; import UIAbility from '@ohos.app.ability.UIAbility';
import Want from '@ohos.app.ability.Want'; import Want from '@ohos.app.ability.Want';
import window from '@ohos.window'; import window from '@ohos.window';
import PreferencesUtil from '../utils/PreferencesUtil';
import { Constants } from '../constants/CommonConstants';
export default class EntryAbility extends UIAbility { export default class EntryAbility extends UIAbility {
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
globalThis.abilityWant = want;
PreferencesUtil.createFontPreferences(this.context);
PreferencesUtil.saveDefaultFontSize(Constants.SET_SIZE_STANDARD)
} }
onDestroy() { onDestroy() {
@ -17,7 +23,7 @@ export default class EntryAbility extends UIAbility {
// Main window is created, set main page for this ability // Main window is created, set main page for this ability
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
windowStage.loadContent('pages/Index', (err, data) => { windowStage.loadContent('pages/HomePage', (err, data) => {
if (err.code) { if (err.code) {
hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
return; return;

View File

@ -0,0 +1,68 @@
import PreferencesUtil from '../utils/PreferencesUtil';
import hilog from '@ohos.hilog';
import { Constants } from '../constants/CommonConstants';
import HomeViewModel from '../viewModel/HomeViewModel';
import router from '@ohos.router';
@Preview
@Entry
@Component
struct HomePage {
@State message: string = 'Hello World';
@State changeFontSize: number = Constants.SET_SIZE_STANDARD;
private settingList = HomeViewModel.initSettingData()
onPageShow() {
PreferencesUtil.getChangeFontSize().then((value) => {
this.changeFontSize = value;
hilog.info(0x0000, 'testTag', '%{public}s', 'Get the value of changeFontSize: ' + this.changeFontSize);
});
}
handleClick() {
router.pushUrl({ url: "pages/SetFontSizePage" })
}
@Builder
getListItems() {
Column() {
ForEach(this.settingList, (item) => {
Row() {
Image(item.settingImage)
.width(16)
.height(16)
.margin({ right: 4 })
Text(item.settingName)
.fontSize(this.changeFontSize)
}
.blockBackground(10)
.onClick(() => this.handleClick())
})
}
}
build() {
Column() {
Text("设置")
.fontSize(this.changeFontSize * 1.2)
.fontWeight(FontWeight.Bold)
.width('100%')
this.getListItems()
}
.backgroundColor($r('sys.color.ohos_id_color_sub_background'))
.height('100%')
.width('100%')
.padding({ left: 10, right: 10, top: 4, bottom: 4 })
}
}
@Extend(Row)
function blockBackground(marginTop: string | number) {
.backgroundColor(Color.White)
.borderRadius(16)
.margin({ top: marginTop })
.padding({ top: 4, bottom: 4, left: 10, right: 10 })
.width('100%')
.height(40)
}

View File

@ -1,95 +0,0 @@
@Preview
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
@State messageList: any[] = [
{ message: this.message, checked: false },
{ message: this.message, checked: false },
{ message: this.message, checked: false },
{ message: this.message, checked: false },
{ message: this.message, checked: false },
]
private textController: TextInputController = new TextInputController()
private tabsController: TabsController = new TabsController()
build() {
Column() {
Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
TabContent() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.width('100%')
.padding({ left: 10, right: 10 })
List() {
ForEach(this.messageList, (item, idx) => {
ListItem() {
Row() {
Checkbox()
.select(item.checked)
.onChange((value) => {
// item.checked = value // array list 修改 item 的属性无法触发 UI 更新
// this.messageList[idx].checked = value // array list 修改 item 的属性无法触发 UI 更新
this.messageList[idx] = { ...item, checked: value } // array list 替换 item 触发 UI 更新
// array list 整体替换,触发 UI 更新
// const newMessageList = this.messageList
// newMessageList[idx].checked = value
// this.messageList = [...newMessageList]
})
Text(item.message)
.decoration({ type: item.checked ? TextDecorationType.LineThrough : TextDecorationType.None })
}
}
.align(Alignment.Start)
.width('100%')
.margin({ top: 4 })
.padding({ left: 4, right: 4, top: 2, bottom: 2 })
.backgroundColor(Color.Gray)
.borderRadius(20)
})
}
.listDirection(Axis.Vertical)
}
}
.tabBar('green')
.align(Alignment.Top)
TabContent() {
Column() {
TextInput({ placeholder: '请输入密码', controller: this.textController })
.type(InputType.Password)
.margin({ top: 4 })
Button('设置光标位置', { type: ButtonType.Capsule, stateEffect: true })
.onClick(() => {
this.textController.caretPosition(2)
})
}
}
.tabBar("red")
.align(Alignment.Top)
TabContent() {
LoadingProgress()
.color(Color.Blue)
.height(60)
.width(60)
}
.tabBar('yellow')
.align(Alignment.Top)
}
.barWidth('100%') // 设置TabBar宽度
.barHeight(60) // 设置TabBar高度
.width('100%') // 设置Tabs组件宽度
.height('100%') // 设置Tabs组件高度
.backgroundColor(0xF5F5F5) // 设置Tabs组件背景颜色
.vertical(false)
.padding({ top: 10, left: 4, right: 2 })
}
.height('100%')
.padding({ left: 4, right: 4 })
}
}

View File

@ -0,0 +1,79 @@
import router from '@ohos.router'
import { Constants } from '../constants/CommonConstants';
import PreferencesUtil from '../utils/PreferencesUtil';
import hilog from '@ohos.hilog';
@Preview
@Entry
@Component
struct SetFontSizePage {
@State changeFontSize: number = Constants.SET_SIZE_STANDARD;
onPageShow() {
PreferencesUtil.getChangeFontSize().then((value) => {
this.changeFontSize = value;
hilog.info(0x0000, 'testTag', '%{public}s', 'Get the value of changeFontSize: ' + this.changeFontSize);
});
}
handleBack() {
router.back()
}
@Builder
setChat() {
Column() {
ForEach([1, 1, 1, 1,], (item, idx) => {
this.ChatItem(item + 'testsetestsetestsetestse', idx % 2 === 0)
})
}
.justifyContent(FlexAlign.Start)
.alignItems(HorizontalAlign.Start)
.height('100%')
.width('100%')
}
@Builder
ChatItem(text: string, me: boolean = false) {
Row() {
Row() {
Image(me ? $r('app.media.right_head') : $r('app.media.left_head'))
.width(16)
.height(16)
Text(text)
.fontSize(this.changeFontSize)
.chatBackground(me)
}
.width('60%')
}
.width('100%')
.justifyContent(me ? FlexAlign.End : FlexAlign.Start)
.margin({ top: 10 })
}
build() {
Navigation() {
Row() {
this.setChat()
}
.height('100%')
.width('100%')
.padding({ left: 24, right: 20, top: 4, bottom: 4 })
}
.mode(NavigationMode.Auto)
.titleMode(NavigationTitleMode.Mini)
.title("字体大小设置")
.backgroundColor($r('sys.color.ohos_id_color_sub_background'))
.height('100%')
.width('100%')
}
}
@Extend(Text)
function chatBackground(me: boolean = false) {
.backgroundColor(me ? $r('app.color.set_chat_right_bg') : $r('app.color.set_chat_left_bg'))
.borderRadius(12)
.padding({ top: 8, bottom: 8, left: 10, right: 10 })
}

View File

@ -0,0 +1,43 @@
import dataPreferences from '@ohos.data.preferences';
import hilog from '@ohos.hilog';
import { Constants } from '../constants/CommonConstants';
// 首选项名字
export const PREFERENCES_NAME = 'myPreferences';
// 首选项Key字段
export const KEY_APP_FONT_SIZE = 'appFontSize';
export default class PreferencesUtil {
static createFontPreferences(context) {
globalThis.getFontPreferences = () => {
const preferences: Promise<dataPreferences.Preferences> = dataPreferences.getPreferences(context, PREFERENCES_NAME)
return preferences
}
}
static saveDefaultFontSize(fontSize: number) {
globalThis.getFontPreferences().then((preferences) => {
// 判断保存的key是否存在
preferences.has(KEY_APP_FONT_SIZE).then(async (isExist) => {
hilog.info(0x0000, 'testTag', '%{public}s', 'preferences has changeFontSize is ' + isExist);
if (!isExist) {
// 保存数据
await preferences.put(KEY_APP_FONT_SIZE, fontSize);
preferences.flush();
}
}).catch((err) => {
hilog.error(0x0000, 'testTag', '%{public}s', 'Has the value failed with err: ' + err);
});
}).catch((err) => {
hilog.error(0x0000, 'testTag', '%{public}s', 'Get the preferences failed, err: ' + err);
});
}
// 获取fontSize
static async getChangeFontSize(): Promise<number> {
const preferences = await globalThis.getFontPreferences();
return await preferences.get(KEY_APP_FONT_SIZE, Constants.SET_SIZE_STANDARD);
}
}

View File

@ -0,0 +1,44 @@
export interface SettingData {
settingName: string | Resource;
settingImage: string | Resource;
}
export class HomeViewModel {
settingList: Array<SettingData> = [];
initSettingData(): Array<SettingData> {
if (this.settingList.length === 0) {
this.settingList = [
{
settingName: "显示和亮度",
settingImage: $r("app.media.icon"),
},
{
settingName: "声音",
settingImage: $r("app.media.icon"),
},
{
settingName: "应用管理",
settingImage: $r("app.media.icon"),
},
{
settingName: "存储",
settingImage: $r("app.media.icon"),
},
{
settingName: "隐私",
settingImage: $r("app.media.icon"),
},
{
settingName: "设置字体和大小",
settingImage: $r("app.media.icon"),
},
]
}
return this.settingList;
}
}
export default new HomeViewModel();

View File

@ -3,6 +3,26 @@
{ {
"name": "start_window_background", "name": "start_window_background",
"value": "#FFFFFF" "value": "#FFFFFF"
},
{
"name": "white",
"value": "#FFFFFF"
},
{
"name": "setting_item_divider",
"value": "#0d182431"
},
{
"name": "text",
"value": "#182431"
},
{
"name": "set_chat_right_bg",
"value": "#D7E9F3"
},
{
"name": "set_chat_left_bg",
"value": "#FFFFFF"
} }
] ]
} }

View File

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-arrow-left">
<path d="m12 19-7-7 7-7"/>
<path d="M19 12H5"/>
</svg>

After

Width:  |  Height:  |  Size: 322 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

View File

@ -1,5 +1,6 @@
{ {
"src": [ "src": [
"pages/Index" "pages/HomePage",
"pages/SetFontSizePage"
] ]
} }

View File

@ -1,13 +1,12 @@
{ {
"name": "myapplication",
"version": "1.0.0",
"description": "Please describe the basic information.",
"main": "",
"author": "",
"license": "", "license": "",
"dependencies": {
},
"devDependencies": { "devDependencies": {
"@ohos/hypium": "1.0.6" "@ohos/hypium": "1.0.6"
} },
"author": "",
"name": "myapplication",
"description": "Please describe the basic information.",
"main": "",
"version": "1.0.0",
"dependencies": {}
} }