案例地址
代码结构
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
├──entry/src/main/ets // ArkTS代码区 │ ├──common │ │ └──constants │ │ └──CommonConstants.ets // 公共常量类 │ ├──entryability │ │ └──EntryAbility.ets // 程序入口类 │ ├──pages │ │ └──ToDoListPage.ets // 主页面 │ ├──view │ │ └──ToDoItem.ets // 自定义单项待办组件 │ └──viewmodel │ └──DataModel.ets // 列表数据获取文件 └──entry/src/main/resources // 资源文件目录 |
代码
ToDoListPage.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 |
import DataModel from '../viewmodel/DataModel' import CommonConstants from '../common/constant/CommonConstant' import ToDoItem from '../view/ToDoItem' @Entry @Component struct ToDoListPage { private totalTasks: string[] = [] aboutToAppear(): void { this.totalTasks = DataModel.getData() } @Builder pageTitle() { Text($r('app.string.page_title')) .fontSize($r('app.float.title_font_size')) .fontWeight(FontWeight.Bold) .lineHeight($r('app.float.title_font_height')) .width(CommonConstants.TITLE_WIDTH) .margin({ top: $r('app.float.title_margin_top'), bottom: $r('app.float.title_margin_bottom') }) .textAlign(TextAlign.Start) } build() { Column({ space: CommonConstants.COLUMN_SPACE }) { this.pageTitle() ForEach(this.totalTasks, (item: string) => { ToDoItem({ content: item }) }, (item: string) => JSON.stringify(item)) } .width(CommonConstants.FULL_LENGTH) .height(CommonConstants.FULL_LENGTH) .backgroundColor($r('app.color.page_background')) } } |
ToDoItem.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 |
import CommonConstants from '../common/constant/CommonConstant' @Component export default struct ToDoItem { private content?: string @State isComplete: boolean = false @Builder labelIcon(icon: Resource) { Image(icon) .objectFit(ImageFit.Contain) .width($r('app.float.checkbox_width')) .height($r('app.float.checkbox_width')) .margin($r('app.float.checkbox_margin')) } build() { Row() { if (this.isComplete) { this.labelIcon($r('app.media.ic_ok')) } else { this.labelIcon($r('app.media.ic_default')) } Text(this.content) .fontSize($r('app.float.item_font_size')) .fontWeight(CommonConstants.FONT_WEIGHT) .opacity(this.isComplete ? CommonConstants.OPACITY_COMPLETED : CommonConstants.OPACITY_DEFAULT) .decoration({ type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None }) } .backgroundColor($r('app.color.start_window_background')) .width(CommonConstants.LIST_DEFAULT_WIDTH) .height($r('app.float.list_item_height')) .borderRadius(CommonConstants.BORDER_RADIUS) .onClick(() => { this.isComplete = !this.isComplete }) } } |
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
/** * Style constants that can be used by all modules */ export default class CommonConstants{ /** * Full width or height. */ static readonly FULL_LENGTH: string = '100%' /** * Title width. */ static readonly TITLE_WIDTH: string = '80%' /** * List default width. */ static readonly LIST_DEFAULT_WIDTH: string = '93.3%' /** * Opacity of default. */ static readonly OPACITY_DEFAULT: number = 1 /** * Opacity of completed. */ static readonly OPACITY_COMPLETED: number = 0.4 /** * BorderRadius of list item. */ static readonly BORDER_RADIUS: number = 24 /** * FontWeight of list item. */ static readonly FONT_WEIGHT: number = 500 /** * Space of column. */ static readonly COLUMN_SPACE: number = 16 /** * Agents data. */ static readonly TODO_DATA: Array<string> = [ '早起晨练', '准备早餐', '阅读名著', '学习ArkTS', '看剧放松' ] } |
DataModel.ets
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import CommonConstants from '../common/constant/CommonConstant' /** * Saving and manipulating data displayed on the page. */ export class DataModel { /** * Saved Data. */ private tasks: string[] = CommonConstants.TODO_DATA /** * Get the data. * @returns */ getData(): string[] { return this.tasks } } export default new DataModel() |
color.json
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "color": [ { "name": "start_window_background", "value": "#FFFFFF" }, { "name": "page_background", "value": "#F1F3F5" } ] } |
float.json
|
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 |
{ "float": [ { "name": "checkbox_width", "value": "28vp" }, { "name": "checkbox_margin", "value": "20vp" }, { "name": "item_font_size", "value": "20fp" }, { "name": "title_font_size", "value": "28fp" }, { "name": "title_font_height", "value": "33vp" }, { "name": "title_margin_top", "value": "24vp" }, { "name": "title_margin_bottom", "value": "12vp" }, { "name": "list_item_height", "value": "64vp" } ] } |
string.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ "string": [ { "name": "module_desc", "value": "module description" }, { "name": "EntryAbility_desc", "value": "description" }, { "name": "EntryAbility_label", "value": "待办列表" }, { "name": "page_title", "value": "待办" } ] } |
