项目搭建指南
相关链接
- ArtTs语法: https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-get-started-0000001504769321-V3
- ArkUI文档: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkui-overview-0000001532577181-V2
- ArkUIAPI: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-methods-alert-dialog-box-0000001478341185-V2
效果演示
鸿蒙移动端开发demo-代办小工具视频演示
项目搭建
从空项目开始
创建页面
- 保留原有页面
Index.ets作为App入口页面。 - 新建两个页面：
AddTodo: 新增代办页面。ToDoDetail: 代办详情页。
建议右键创建page页面，IDE会自动修改路由，新增页面。
系统会自动在这里新增路由。
创建数据
创建数据模型
在 src/main/ets 下新建文件夹 model，然后在下新建文件 ToDoModel.ets。
export class ToDoModel {
id: number
name? : string
date? : string
color? : string
imageUrl? : string
constructor(id: number, name: string, date: string, color: string, imageUrl: string) {
this.id = id
this.name = name
this.date = date
this.color = color
this.imageUrl = imageUrl
}
}
创建默认数据
在 src/main/ets 下新建文件夹 common/constant，新建文件 CommonConstant.est，插入默认数据。
export default class CommonConstants {
static readonly TODO_DATA: Array<ToDoModel> = [
new ToDoModel(1, "早起晨练","2020-01-01","#FDD6AC","https://cdn.dribbble.com/users/1753960/screenshots/4965971/media/93c049fbbd538ce5ebe9230cfbd7f211.jpg"),
// ...
];
// ...
}
创建组件
组件的封装使用装饰器 @Component
创建首页组件
我们用默认的 Index.ets。
每个页面都得用@Entry装饰器修饰结构体，表示页面入口，页面入口只能有一个
@Entry
@Component
struct Index {
@State todoList: ToDoModel[] = CommonConstants.TODO_DATA
build() {
Column() {
ToDoList({
todoList: $todoList })
}
}
}
新建 ToDoList.ets
@Component
export default struct ToDoList {
@Link todoList: ToDoModel[]
build() {
Stack() {
// ...
}
.width(CommonConstants.FULL_LENGTH)
.height(CommonConstants.FULL_LENGTH)
}
}
创建标题组件
@Component
export struct TitleView {
private title?: Resource
private titleStr?: string
build() {
Text(this.title || this.titleStr)
.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)
}
}
关于 Resource
Resource 表示资源文件类型，我们可以通过 $r 去读取资源文件。如 $r(‘app.media.icon’)，其中app是固定值，media是src/main/resource/base下的文件夹名，icon是media文件夹下的具体资源名
$r还可以读取json文件中的字符串
比如在src/main/resource/base/element下新建文件float.json，按照如下格式填写，即可通过 $r(‘app.float.checkbox_width’) 读取到值 ‘28vp’
{
"float": [
{
"name": "checkbox_width",
"value": "28vp"
}
]
}
使用封装的组件
TitleView({
title: $r('app.string.page_title')} )
.margin({
left: '5%' })
创建新增按钮组件
@Component
export struct AddButton {
build() {
Button($r("app.string.add_page_title"))
.fontSize($r('app.float.item_font_size'))
.padding({
top:'5vp', bottom: '5vp'})
.width('80%')
.margin({
bottom: '44pv' })
}
}
创建列表组件
有两种方式，一种是用Scroller组件，一种是用List组件，两种都用了之后，发现List组件相对更好用，所以这里介绍List组件
新建一个名为ScrollView的组件
@Component
export struct ScrollView {
@Link totalTasks: ToDoModel[]
build() {
List() {
ForEach(this.totalTasks, (item: ToDoModel, index: number) => {
ListItem() {
// ...
}
.swipeAction({
end: this.itemEnd.bind(this, item)})
}, (item: ToDoModel) => item.id.toString())
}
}
}
