效果演示
代码结构
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
├──entry/src/main/ets // 代码区 │ ├──common │ │ ├──constants │ │ │ ├──CommonConstants.ets // 公共常量类 │ │ │ └──StyleConstants.ets // 样式常量类 │ │ └──utils │ │ └──Logger.ets // 日志打印类 │ ├──entryability │ │ └──EntryAbility.ts // 程序入口类 │ ├──model │ │ └──PreferenceModel.ets // 首选项相关方法类 │ ├──pages │ │ └──Index.ets // 主界面 │ ├──view │ │ ├──ButtonComponent.ets // 自定义Button组件类 │ │ └──TextItemComponent.ets // 自定义Text组件类 │ └──viewmodel │ ├──ButtonItemData.ets // 按钮数据类 │ └──Fruit.ets // 水果数据类 └──entry/src/main/resources // 资源文件目录 |
初始代码
common
constants/CommonConstants.ets
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/** * Common constants for all features. */ class CommonConstants { /** * Duration of prompt. */ DURATION: number = 3000 /** * The fruit name tag. */ FRUIT_FLAG: number = 0 /** * The fruit number tag. */ NUMBER_FLAG: number = 1 /** * The tag is used to print log. */ TAG = '[PreferenceModel]' /** * The key value of the data store. */ KEY_NAME = 'fruit' /** * The name of the data store. */ PREFERENCES_NAME = 'fruit.db' } export default new CommonConstants() |
constants/StyleConstants.ets
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/** * Style constants for all Component. */ class StyleConstants { FONT_SIZE = 20 FONT_WEIGHT = 500 FULL_PERCENT = '100%' TEXT_FONT_SIZE = 25 TEXT_HEIGHT = '24vp' TEXT_INPUT_HEIGHT = '7%' TEXT_INPUT_WIDTH = '93%' TEXT_MARGIN_BOTTOM = '3%' TEXT_MARGIN_LEFT = '10%' LETTER_SPACING = '1.58' MARGIN_TOP = '12%' MARGIN_BOTTOM_SMALL = '6%' MARGIN_BOTTOM_BIG = '250vp' BUTTON_HEIGHT = '6%' BUTTON_WIDTH = '87%' BUTTON_MARGIN_BOTTOM = '24vp' } export default new StyleConstants() |
utils/Logger.ets
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import { hilog } from '@kit.PerformanceAnalysisKit' /** * A utility class for printing logs. * * @param prefix The prefix of Logger. */ class Logger { private domain: number private prefix: string private format: string = '%{public}s, %{public}s' constructor(prefix: string) { this.prefix = prefix this.domain = 0xFF00 } debug(...args: string[]) { hilog.debug(this.domain, this.prefix, this.format, args) } info(...args: string[]) { hilog.info(this.domain, this.prefix, this.format, args) } warn(...args: string[]) { hilog.warn(this.domain, this.prefix, this.format, args) } error(...args: string[]) { hilog.error(this.domain, this.prefix, this.format, args) } } export default new Logger('[Preferences]') |
model
PreferenceModel.ets
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
import { promptAction } from '@kit.ArkUI' import { preferences } from '@kit.ArkData' import Logger from '../common/utils/Logger' import CommonConstants from '../common/constants/CommonConstants' import Fruit from '../viewmodel/Fruit' let context = getContext(this) let preference: preferences.Preferences let preferenceTemp: preferences.Preferences /** * Preference model. * * @param fruitData Fruit data. */ class PreferenceModel { private fruitData: Fruit = new Fruit() /** * Read the specified Preferences persistence file and load the data into the Preferences instance. */ async getPreferencesFromStorage() { try { preference = await preferences.getPreferences(context, CommonConstants.PREFERENCES_NAME) } catch (err) { Logger.error(CommonConstants.TAG, `Failed to get preferences, Cause: ${err}`) } } /** * Delete the specified Preferences persistence file from memory and removes the Preferences instance. */ async deletePreferences() { try { await preferences.deletePreferences(context, CommonConstants.PREFERENCES_NAME) } catch (err) { Logger.error(CommonConstants.TAG, `Failed to delete preferences, Cause: ${err}`) } preference = preferenceTemp this.showToastMessage($r('app.string.delete_success_msg')) } /** * Save the data to the Preferences. * * @param fruit Fruit data. */ async putPreference(fruit: Fruit) { if (!preference) { await this.getPreferencesFromStorage() } // The fruit name and fruit quantity data entered by the user are saved to the cached Preference instance. try { await preference.put(CommonConstants.KEY_NAME, JSON.stringify(fruit)) } catch (err) { Logger.error(CommonConstants.TAG, `Failed to put value, Cause: ${err}`) } // Store the Preference instance in the preference persistence file await preference.flush() } /** * Get preference data. * @returns */ async getPreference() { let fruit = '' if (!preference) { await this.getPreferencesFromStorage() } try { fruit = (await preference.get(CommonConstants.KEY_NAME, '')).toString() } catch (err) { Logger.error(CommonConstants.TAG, `Failed to get value, Cause: ${err}`) } // If the data is empty, a message is displayed indicating that data needs to be written. if (fruit === '') { this.showToastMessage($r('app.string.data_is_null_msg')) return } this.showToastMessage($r('app.string.read_success_msg')) return JSON.parse(fruit) } /** * Process the data obtained from the database. * @returns */ async getFruitData() { this.fruitData = await this.getPreference() return this.fruitData } /** * Verifies that the data entered is not empty. * * @param fruit * @returns */ checkFruitData(fruit: Fruit) { if (fruit.fruitName === '' || fruit.fruitNum === '') { this.showToastMessage($r('app.string.fruit_input_null_msg')) return true } return false } /** * write data. * * @param fruit Fruit data. */ writeData(fruit: Fruit) { // Check whether the data is null. let isDataNull = this.checkFruitData(fruit) if (isDataNull) { return } // The data is inserted into the preferences database if it is not empty. this.putPreference(fruit) this.showToastMessage($r('app.string.write_success_msg')) } /** * Popup window prompt message. * * @param message */ showToastMessage(message: Resource) { promptAction.showToast({ message: message, duration: CommonConstants.DURATION }) } } export default new PreferenceModel() |
pages
页面效果
Index.ets
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
import Logger from '../common/utils/Logger' import PreferenceModel from '../model/PreferenceModel' import Fruit from '../viewmodel/Fruit' @Entry @Component struct Index { @State fruit: Fruit = new Fruit() async aboutToAppear() { // Get the lightweight storage db file from memory. await PreferenceModel.getPreferencesFromStorage() // Get the key value with the key name fruit from the lightweight storage db file. PreferenceModel.getFruitData().then((resultData: Fruit) => { if (resultData) { this.fruit = resultData } }) } build() { Column() { Column() { Text($r('app.string.fruit_text')) TextInput({ placeholder: $r('app.string.fruit_placeholder'), text: this.fruit.fruitName }) .onChange((value: string) => { this.fruit.fruitName = value }) } Column() { Text($r('app.string.number_text')) TextInput({ placeholder: $r('app.string.number_placeholder'), text: this.fruit.fruitNum }) .onChange((value: string) => { this.fruit.fruitNum = value }) } Column() { Button($r('app.string.write_data_btn_text')) .onClick(() => { PreferenceModel.writeData(this.fruit) }) Button($r('app.string.read_data_btn_text')) .onClick(() => { PreferenceModel.getFruitData().then((resultData: Fruit) => { if (resultData) { this.fruit = resultData } }) }) Button($r('app.string.delete_data_file_btn_text')) .onClick(() => { PreferenceModel.deletePreferences() this.fruit.fruitName = '' this.fruit.fruitNum = '' }) } } } } |
viewmodel
ButtonItemData.ets
|
1 2 3 4 5 6 7 8 9 |
export default class ButtonItemData { resource: Resource clickMethod: () => void constructor(resource: Resource, clickMethod: () => void) { this.resource = resource this.clickMethod = clickMethod } } |
Fruit.ets
|
1 2 3 4 |
export default class Fruit { fruitName: string = '' fruitNum: string = '' } |
组件封装代码
pages/Index.ets
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
import CommonConstants from '../common/constants/CommonConstants' import StyleConstants from '../common/constants/StyleConstants' import Logger from '../common/utils/Logger' import PreferenceModel from '../model/PreferenceModel' import ButtonComponent from '../view/ButtonComponent' import TextItemComponent from '../view/TextItemComponent' import Fruit from '../viewmodel/Fruit' @Entry @Component struct Index { @State fruit: Fruit = new Fruit() async aboutToAppear() { // Get the lightweight storage db file from memory. await PreferenceModel.getPreferencesFromStorage() // Get the key value with the key name fruit from the lightweight storage db file. PreferenceModel.getFruitData().then((resultData: Fruit) => { if (resultData) { this.fruit = resultData } }) } build() { Column() { TextItemComponent({ textResource: $r('app.string.fruit_text'), placeholderResource: $r('app.string.fruit_placeholder'), textFlag: CommonConstants.FRUIT_FLAG, fruit: $fruit, textInputCallBack: (value: string) => { this.fruit.fruitName = value } }) TextItemComponent({ textResource: $r('app.string.number_text'), placeholderResource: $r('app.string.number_placeholder'), textFlag: CommonConstants.NUMBER_FLAG, fruit: $fruit, textInputCallBack: (value: string) => { this.fruit.fruitNum = value } }) ButtonComponent({ fruit: $fruit }) } .width(StyleConstants.FULL_PERCENT) .height(StyleConstants.FULL_PERCENT) .backgroundColor($r('app.color.main_background_color')) } } |
view/ButtonComponent.ets
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import StyleConstants from '../common/constants/StyleConstants' import PreferenceModel from '../model/PreferenceModel' import ButtonItemData from '../viewmodel/ButtonItemData' import Fruit from '../viewmodel/Fruit' @Component export default struct ButtonComponent { private buttonItemValues: Array<ButtonItemData> = this.getButtonItemValues() @Link fruit: Fruit build() { Column() { ForEach(this.buttonItemValues, (item: ButtonItemData) => { Button(item.resource, { type: ButtonType.Capsule, stateEffect: true }) .backgroundColor($r('app.color.button_background_color')) .width(StyleConstants.BUTTON_WIDTH) .height(StyleConstants.BUTTON_HEIGHT) .fontWeight(StyleConstants.FONT_WEIGHT) .fontSize(StyleConstants.FONT_SIZE) .margin({ bottom: StyleConstants.BUTTON_MARGIN_BOTTOM }) .onClick(() => { item.clickMethod() }) }, (item: ButtonItemData) => JSON.stringify(item)) } } getButtonItemValues() { let values: Array<ButtonItemData> = [ new ButtonItemData( $r('app.string.write_data_btn_text'), () => { PreferenceModel.writeData(this.fruit) } ), new ButtonItemData( $r('app.string.read_data_btn_text'), () => { PreferenceModel.getFruitData().then((resultData: Fruit) => { if (resultData) { this.fruit = resultData } }) } ), new ButtonItemData( $r('app.string.delete_data_file_btn_text'), () => { PreferenceModel.deletePreferences() this.fruit.fruitName = '' this.fruit.fruitNum = '' } ) ] return values } } |
view/TextItemComponent.ets
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
import CommonConstants from '../common/constants/CommonConstants' import StyleConstants from '../common/constants/StyleConstants' import Fruit from '../viewmodel/Fruit' /** * Text item component. */ @Component export default struct TextItemComponent { @Link fruit: Fruit textResource: Resource = $r('app.string.empty') placeholderResource: Resource = $r('app.string.empty') textFlag: number = 0 textInputCallBack = (value: string) => { } private marginBottom: string = '' private marginTop: string = '' private textInputType: InputType = InputType.Normal aboutToAppear() { if (this.textFlag === CommonConstants.FRUIT_FLAG) { // Fruit name text input. this.marginTop = StyleConstants.MARGIN_TOP this.marginBottom = StyleConstants.MARGIN_BOTTOM_SMALL this.textInputType = InputType.Normal } else { // Fruit number text input. this.marginBottom = StyleConstants.MARGIN_BOTTOM_BIG this.textInputType = InputType.Number } } build() { Column() { Text(this.textResource) .fontSize(StyleConstants.TEXT_FONT_SIZE) .height(StyleConstants.TEXT_HEIGHT) .width(StyleConstants.FULL_PERCENT) .fontColor($r('app.color.text_font_color')) .letterSpacing(StyleConstants.LETTER_SPACING) .fontWeight(StyleConstants.FONT_WEIGHT) .margin({ bottom: StyleConstants.TEXT_MARGIN_BOTTOM, left: StyleConstants.TEXT_MARGIN_LEFT, top: this.marginTop }) TextInput({ placeholder: this.placeholderResource, text: this.textFlag === 0 ? this.fruit.fruitName : this.fruit.fruitNum }) .placeholderFont({ size: StyleConstants.FONT_SIZE, weight: StyleConstants.FONT_WEIGHT }) .placeholderColor($r('app.color.placeholder_color')) .caretColor(Color.Blue) .type(this.textInputType) .height(StyleConstants.TEXT_INPUT_HEIGHT) .width(StyleConstants.TEXT_INPUT_WIDTH) .margin({ bottom: this.marginBottom }) .fontSize(StyleConstants.FONT_SIZE) .fontColor($r('app.color.text_font_color')) .fontWeight(StyleConstants.FONT_WEIGHT) .backgroundColor($r('app.color.white')) .onChange((value: string) => { this.textInputCallBack(value) }) } } } |
下载源码
官网地址
https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_NEXT-Preferences
