初体验HarmonyOS,写了一个TodoList

 体验鸿蒙开发我们就得安装鸿蒙开发的开发环境DevEco Studio 安装结束我们打开软件就会来到欢迎界面

这里由于我已经汉化好了,所以显示的是中文,大家伙刚刚安装好显示的英文版本,大家在自界说板块中找到all setting点击进去就会弹出设置板块，随后我们找到插件部门选择已下载中搜索chinese就可以找到汉化,我们启用就好了.

然后我们来到新建项目,在新建项目中我们可以看到有许多不同的项目

这里表示开发不同的装备上的软件,好比

表示开发出来的软件用于手表端.还有选取不同的语言举行开发

这就是用c++开发.
这里我们直接使用最简单Empty Ability来写我们TodoList.


上手体验写TodoList
    来到项目中,我们看到entry这个文件夹

src文件夹中的main文件夹是我们的主要文件夹,这个main文件夹由ets和resources文件夹构成,在ets文件夹中我们用于写代码,在resources文件夹中我们用于存放的是静态资源文件.在ets文件夹下我们有一个index.ets文件就是我们的默认执行的页面文件.我们可以在右边的边框找到预览器

就会展示index.ets文件的页面效果.
现在我们要开始写一个这样的页面了.

代码实现

1. [/code] less
2. 代码解读
3. 复制代码
4. @Entry @Component struct Index { build() { Column(){ Text('待办') } }
5. 这是最基础的代码样式.这是页面布局的树状图
6. [align=center][img=958,560]https://i-blog.csdnimg.cn/direct/a29870983d1f4b6cbc94c4cca55310e4.png[/img][/align]一个页面基本上就是由这几部分构成的.详细详解大家伙可以看看开发文档
7. 这里build是用于创建用户界面的.这里我们设置垂直方向的内容文本Text(),在鸿蒙开发中Text()用于展示文本，支持转义字符\.这里这个待办字符我们使用全局配置.我们找到resources文件夹下的base文件夹中的element文件夹下string.json中我们添加这个变量.
8. [code]

复制代码

json
代码解读
复制代码
{ "name": "page_title", "value": "待办" }
然后这里我们的Text()就变成了Text($r('app.string.page_title'))这里的$r是一个获取资源的接口,这个资源就是获取到resources这个静态资源目次下的资源.使用app就可以访问到静态资源下的资源了.
然后我们对于这个Text()里面的笔墨写一个样式,这个样式我们也写一点全局配置.我们在element文件夹中创建文件float.json文件.在新建中我们选择资源文件

1. [/code] css
2. 代码解读
3. 复制代码
4. { "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" } ] }
5. 以上就是float.json的内容.这个文件里面的内容就是我们写好的一些样式.
6. [code]

复制代码

less
代码解读
复制代码
Column(){ 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({ topr('app.float.title_margin_top'), bottomr('app.float.title_margin_bottom') }) .textAlign(TextAlign.Start)
字体加粗.fontWeight(FontWeight.Bold)这里我们使用的是对象FontWeight直接调用我们要的粗细,width(CommonConstants.TITLE_WIDTH)是我在ets文件下创建的一个样式文件.

在这个文件中写好了列表的样式以及列表项需要展示的内容.

1. [/code] typescript
2. 代码解读
3. 复制代码
4. //声明一些ts的范例值 用于模块中 //默认抛出一个类 export default class CommonConstant { //只读属性 static readonly FULL_LENGTH:string = '100%' 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 default. */ static readonly OPACITY_COMPLETED: number = 0.4; /** * BorderRadius of list item. */ static readonly BORDER_RADIUS: number = 24; /** * BorderRadius of list item. */ static readonly FONT_WEIGHT: number = 500; /** * Space of column. */ static readonly COLUMN_SPACE: number = 16; //假数据 static readonly TODO_DATA:Array<string> = [ '干饭', '睡午觉', '写代码', '学习ArkTS', '打游戏' ] }
5. 现在我们只需要将其进入到index.ets文件中就好了.
6. 下一步工作就是写列表项内容.列表内容我们再写过一个组件将其引入就好了.在此之前我需要拿到列表项的内容从index.ets文件传给子组件.我们界说一个私有变量private totalTasks:Array<string> = [],为一个字符串数组.默以为空.在生命周期aboutToAppear
7. [code]

复制代码

scss
代码解读
复制代码
aboutToAppear(): void { this.totalTasks = DataModel.getData() }

也就是说会在build执行前调用，且数据能在build中使用.那么这个DataModel.getData()是什么呢？ 这个是在本身创建的viewmodel文件夹下的DataModel.ets文件中引入的.在该文件中我们将CommonConstant.TODO_DATA  的值赋值给私有变量tasks

1. [/code] typescript
2. 代码解读
3. 复制代码
4. //限定一下我们在首页需要使用到的数据 import CommonConstant from '../common/constant/CommonConstant' export class DataModel{ private tasks:Array<string> = CommonConstant.TODO_DATA getData(){ return this.tasks } } export default new DataModel()
5. 这样我们拿到了列表项中的内容.现在我们需要做的是将列表项内容循环输出.在这套鸿蒙开发中给我们打造好了一个函数ForEach()在index.ets中
6. [code]

复制代码

typescript
代码解读
复制代码
ForEach(this.totalTasks, (item:string,index:number)=>{ TodoItem({content:item}) }, (item:string)=>{ console.log(item) return JSON.stringify(item) } ) } .width(CommonConstants.FULL_LENGTH) .height(CommonConstants.FULL_LENGTH) .backgroundColor($r('app.color.page_background'))
它接受三个参数,第一个是需要循环输出的数组,第二个是一个返回值为void的函数,第三个也是一个函数,但是返回值不为空.我们可以在底部边框中的日志看到输出内容.

而第二个回调函数是用于子组件并给子组件传值的.这里我们给子组件传值名为content，条件是我们在子组件中必须含有一变量为content.
现在我们在ets文件夹下创建一个component的文件夹用于存放组件,然后创建文件TodoItem.ets

1. [/code] scss
2. 代码解读
3. 复制代码
4. export default struct TodoItem { build() { Row(){ } } }
5. 在子组件中我们需要接受父组件过来的值然后显示,所以我们需要创建一个content变量private content?: string但是这个变量不一定需要,所以我们打了一个?.然后对于每一个列表项前的圆圈
6. [align=center][img=505,134]https://i-blog.csdnimg.cn/direct/3f538016727e4a9bba6899c9fb4fb65e.png[/img][/align]
7. 我们也用一个UI组件,但是这个UI组件的创建方式和我们平常的不一样，我们使用装饰器@Builder
8. [align=center][img=984,617]https://i-blog.csdnimg.cn/direct/480f992c0a0f488e985f60f2d88ce821.png[/img][/align]然后我们给函数labelIcon()传个参数icon这个参数是一个资源参数,需要我们传resources文件夹下的静态资源文件.
9. [code]

复制代码

scss
代码解读
复制代码
@Builder labelIcon(icon:Resource){ //专门用于放图片的 Image(icon) .objectFit(ImageFit.Contain)//首先图片不能被截取 .width($r('app.float.checkbox_width')) .margin($r('app.float.checkbox_margin')) }
然后在Row()直接这样写this.labelIcon($r('app.media.ic_default'))就好了.然后列表项内容部分我们依旧使用的是Text()来存放

1. [/code] kotlin
2. 代码解读
3. 复制代码
4. build() { Row(){ if(!this.isComplete){ this.labelIcon($r('app.media.ic_default')) }else{ this.labelIcon($r('app.media.ic_ok')) } Text(this.content) .fontSize($r('app.float.item_font_size')) .fontWeight(CommonConstants.FONT_WEIGHT) .opacity(this.isComplete?CommonConstants.OPACITY_COMPLETED:CommonConstants.OPACITY_DEFAULT) .decoration(this.isComplete?{type:TextDecorationType.LineThrough}:{type: TextDecorationType.None}) } .width(CommonConstants.LIST_DEFAULT_WIDTH) .height($r('app.float.list_item_height')) .borderRadius(CommonConstants.BORDER_RADIUS) .backgroundColor($r('app.color.start_window_background')) .margin({ top:10 }) .onClick(()=>{ this.isComplete = !this.isComplete }) }
5. 我们给列表项添加了一个点击事件,当我们点击后就表示已经完成了这项内容,就会修改样式.
6. [align=center][img=484,122]https://i-blog.csdnimg.cn/direct/626541878bca46b6bb739e163205d828.png[/img][/align]
7. 这里我们使用响应式变量isComplete表示,在鸿蒙开发中使用@State表示响应式变量.那么我们在Build()中加载图片资源就需要判定该项是否完成了.
8. [code]

复制代码

kotlin
代码解读
复制代码
if(!this.isComplete){ this.labelIcon($r('app.media.ic_default')) }else{ this.labelIcon($r('app.media.ic_ok')) }
这样我们就基本实现了效果.
文章到这里也就结束了,鸿蒙开发对于小编照旧有一定难度的。如有不敷,恳请指出！！谢谢大家.

   原文链接：https://juejin.cn/post/7416499669629075497

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。