HarmonyOS

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

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

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

这里表示开发不同的设备上的软件,比如

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

这就是用c++开发.

这里我们直接使用最简单Empty Ability来写我们TodoList.

上手体验写TodoList

来到项目中,我们看到entry这个文件夹

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

就会展示index.ets文件的页面效果.

现在我们要开始写一个这样的页面了.

代码实现

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('待办')
  }
}

这是最基础的代码样式.这是页面布局的树状图

一个页面基本上就是由这几部分组成的.具体详解大家伙可以看看开发文档

这里build是用于创建用户界面的.这里我们设置垂直方向的内容文本Text(),在鸿蒙开发中Text()用于展示文本，支持转义字符\.这里这个待办字符我们使用全局配置.我们找到resources文件夹下的base文件夹中的element文件夹下string.json中我们添加这个变量.

{
  "name": "page_title",
  "value": "待办"
}

然后这里我们的Text()就变成了Text($r('app.string.page_title'))这里的$r是一个获取资源的接口,这个资源就是获取到resources这个静态资源目录下的资源.使用app就可以访问到静态资源下的资源了.

然后我们对于这个Text()里面的文字写一个样式,这个样式我们也写一点全局配置.我们在element文件夹中创建文件float.json文件.在新建中我们选择资源文件

{
  "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"
    }
  ]
}

以上就是float.json的内容.这个文件里面的内容就是我们写好的一些样式.

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({
      top:$r('app.float.title_margin_top'),
      bottom:$r('app.float.title_margin_bottom')
    })
    .textAlign(TextAlign.Start)

字体加粗.fontWeight(FontWeight.Bold)这里我们使用的是对象FontWeight直接调用我们要的粗细,width(CommonConstants.TITLE_WIDTH)是我在ets文件下创建的一个样式文件.

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

//声明一些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',
    '打游戏'
  ]
}

现在我们只需要将其进入到index.ets文件中就好了.

下一步工作就是写列表项内容.列表内容我们再写过一个组件将其引入就好了.在此之前我需要拿到列表项的内容从index.ets文件传给子组件.我们定义一个私有变量private totalTasks:Array = [],为一个字符串数组.默认为空.在生命周期aboutToAppear

aboutToAppear(): void {
  this.totalTasks = DataModel.getData()
}

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

//限定一下我们在首页需要使用到的数据
import CommonConstant from '../common/constant/CommonConstant'
export class DataModel{
  private tasks:Array<string> = CommonConstant.TODO_DATA
  getData(){
    return this.tasks
  }
}
export default new DataModel()

这样我们拿到了列表项中的内容.现在我们需要做的是将列表项内容循环输出.在这套鸿蒙开发中给我们打造好了一个函数ForEach()在index.ets中

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

export default struct TodoItem {
  build() {
    Row(){
     }
  }
}

在子组件中我们需要接受父组件过来的值然后显示,所以我们需要创建一个content变量private content?: string但是这个变量不一定需要,所以我们打了一个?.然后对于每一个列表项前的圆圈

我们也用一个UI组件,但是这个UI组件的创建方式和我们平常的不一样，我们使用装饰器@Builder

然后我们给函数labelIcon()传个参数icon这个参数是一个资源参数,需要我们传resources文件夹下的静态资源文件.

@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()来存放

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

我们给列表项添加了一个点击事件,当我们点击后就表示已经完成了这项内容,就会修改样式.

这里我们使用响应式变量isComplete表示,在鸿蒙开发中使用@State表示响应式变量.那么我们在Build()中加载图片资源就需要判断该项是否完成了.

if(!this.isComplete){
  this.labelIcon($r('app.media.ic_default'))
}else{
  this.labelIcon($r('app.media.ic_ok'))
}

这样我们就基本实现了效果.

文章到这里也就结束了,鸿蒙开发对于小编还是有一定难度的。如有不足,恳请指出！！谢谢大家.