feat: add a Page

build-profile.json5

@@ -1,6 +1,20 @@
 {
   "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": [
       {
         "name": "default",

entry/oh-package.json5

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

entry/src/main/ets/constants/CommonConstants.ets

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

entry/src/main/ets/entryability/EntryAbility.ets

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

entry/src/main/ets/pages/HomePage.ets

@@ -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)
+}

entry/src/main/ets/pages/Index.ets

@@ -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 })
-  }
-}

entry/src/main/ets/pages/SetFontSizePage.ets

@@ -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 })
+}

entry/src/main/ets/utils/PreferencesUtil.ets

@@ -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);
+  }
+}

entry/src/main/ets/viewModel/HomeViewModel.ets

@@ -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();

entry/src/main/resources/base/element/color.json

@@ -3,6 +3,26 @@
     {
       "name": "start_window_background",
       "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"
     }
   ]
 }

entry/src/main/resources/base/media/arrow_left.svg

@@ -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>

entry/src/main/resources/base/profile/main_pages.json

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

oh-package.json5

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