第一个ArkTS项目实践-鸿蒙ArkTS

第一个ArkTS项目实践-ArkTS

  • 第一个ArkTS项目实践-ArkTS
    • 自定义组件的组成
    • 配置属性与布局
      • 配置属性
      • 布局
    • 改变组件状态
    • 循环渲染列表数据
    • 代码
      • ToDoItem组件
      • ToDoList页面
    • 效果
    • 参考资料

第一个ArkTS项目实践-ArkTS

本篇文章是官网上视频对ArkTS开发实践的第一个视频,主要是引导大家对ArkTS的一个了解。

开发文档官网

第一个ArkTS项目实践-鸿蒙ArkTS_第1张图片

自定义组件的组成

ArkTS通过struct声明组件名,并通过@Component和@Entry装饰器,来构成一个自定义组件。

使用@Entry和@Component装饰的自定义组件作为页面的入口,会在页面加载时首先进行渲染。

import { ToItem } from '../view/ToItem'

// 表示当前组件是一个主页面
@Entry
// 表示当前是一个组件
@Component
struct ToDoList {

  build() {
   // 页面内容
   ...
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ElcBw0BK-1692021004323)(D:\work\鸿蒙开发APP\第一个ArkTs项目实践.assets\image-20230814205246074.png)]

图中有重复的内容显示,可以通过创建组件配合ForEach来完成。

// 组件注释
@Component
export struct  ToItem{
  build(){
   
  }
}

在这里插入图片描述

图片中的选中和未选择状态可以通过定义变量进行在样式中判断。

@Component
export struct  ToItem{
  private content:string;
    // 定义当前状态
  @State isComplete: boolean = false;

  @Builder labelIcon(icon) {
    Image(icon)
      .width(20)

  }
  build(){
    Row(){
        // 通过判断当前的状态进行显示指定图片效果
      if(this.isComplete){
        this.labelIcon($r('app.media.radio_on'))
      }else {
        this.labelIcon($r('app.media.radio_off'))
      }
        // 文字
      ...
    }
  }
}

配置属性与布局

配置属性

自定义组件的组成使用基础组件和容器组件等内置组件进行组合。但有时内置组件的样式并不能满足我们的需求,ArkTS提供了属性方法用于描述界面的样式。属性方法支持以下使用方式:

常量传递

例如使用fntSize(50)来配置字体大小

Text('Hello World')
  .fontSize(50)

变量传递

通过定义变量可以在当前组件内通过 this 进行拿取到对应变量的值。

@Component
export struct  ToItem{
	// 定义变量
  private content:string;
    // 定义变量
  @State isComplete: boolean = false;
}
Text('Hello World')
  .frontSize(this.size)

链式调用

在多个属性时,ArkTS提供了链式调用的方式,通过’.'方式连续配置。

Text('Hello World')
  .fontSize(this.size)
  // 宽度默认单位vp
  .width(100)
  // 高度默认单位vp
  .height(100)

表达式传递

属性中还可传入普通表达式以及三目运算表达式。

Text('Hello World')
  .fontSize(this.size)
  .width(this.count + 100)
  .height(this.count % 2 === 0 ? 100 : 200)

内置枚举类型

ArkTS中提供了内置枚举类型,如Color,FontWeight等,例如设置fontColor改变字体颜色为红色,并私有fontWeight为加粗。

Text('Hello World')
  .fontSize(this.size)
  .width(this.count + 100)
  .height(this.count % 2 === 0 ? 100 : 200)
  // 设置字体颜色
  .fontColor(Color.Red)
  // 设置字体粗细
  .fontWeight(FontWeight.Bold)

布局

ArkTS中的布局方式有两种分别时水平和垂直。

布局公共属性

  • alignItems

    在Row上设置子组件在垂直方向上的对齐格式。

    在Column上设置子组件的水平方向上的对齐格式。

    默认值:VerticalAlign.Center

    VerticalAlign.Top

    VerticalAlign.Bottom

  • justifyContent

    在Row上设置子组件在水平方向上的对齐格式。

    在Column上设置子组件垂直方向上的对齐格式。

    默认值:FlexAlign.Start

    FlexAlign.Center 居中对齐

    FlexAlign.End

Row水平布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HfFBfJw6-1692021004324)(D:\work\鸿蒙开发APP\第一个ArkTs项目实践.assets\image-20230814211205501.png)]

Row(){
 Image($r('app.media.radio_on'))
    ...
 Text(this.content)
     ...
 }
}

Column垂直布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VRt49LPt-1692021004324)(D:\work\鸿蒙开发APP\第一个ArkTs项目实践.assets\image-20230814211359185.png)]

Column() {
  Text('待办')
      ....  
  ForEach(this.totalTasks, (item) => {
      ToItem({content: item})
  },....)

}

改变组件状态

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hXk9lGmc-1692021004325)(D:\work\鸿蒙开发APP\第一个ArkTs项目实践.assets\image-20230814212726895.png)]

在实际的开发中由于交互的需求,需求页面中的内产生一个状态的改变。需要通过定义变量完成不过需要加上 @State 注解。

声明式UI的特点就是UI是随数据更改而自动刷新的,我们这里定义了一个类型为boolean的变量isComplete,其被@State装饰后,框架内建立了数据和视图之间的绑定,其值的改变影响UI的显示。

// @State 装饰器的作用主要是在数据发生改变时能调用页面的build进行页面UI更新
@State isComplete : boolean = false;

由于两个Image的实现具有大量重复代码,ArkTS提供了@Builder装饰器,来修饰一个函数,快速生成布局内容,从而可以避免重复的UI描述内容。这里使用@Bulider声明了一个labelIcon的函数,参数为url,对应要传给Image的图片路径。

@Component
export struct  ToItem{
  @State isComplete: boolean = false;

   // @Builder 用法大概是通过 this 来调用当前构建好的框架去传入内容,完成一个模板的填写成类似的功能
  @Builder labelIcon(icon) {
    Image(icon)
      .width(20)

  }


  build(){
    Row(){
      if(this.isComplete){
        this.labelIcon($r('app.media.radio_on'))
      }else {
        this.labelIcon($r('app.media.radio_off'))
      }
      ...
    }
  }
}

为了让待办项带给用户的体验更符合已完成的效果,给内容的字体也增加了相应的样式变化,这里使用了三目运算符来根据状态变化修改其透明度和文字样式,如opacity是控制透明度,decoration是文字是否有划线。通过isComplete的值来控制其变化。

  • TextDecorationType.None** 文字没有任何效果
  • TextDecorationType.LineThrough 文字中间横穿一条线
  • TextDecorationType.Underline 文字底部一条线
  • TextDecorationType.Overline 文字顶部一条线
Text(this.content)
   .fontSize(20)
   .margin({left:15})
   .opacity(this.isComplete ? 0.4 : 1)
   .decoration({type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None})

最后,为了实现与用户交互的效果,在组件上添加了onClick点击事件,当用户点击该待办项时,数据isComplete的更改就能够触发UI的更新。

@Component
export struct  ToItem{
  private content:string;
  @State isComplete: boolean = false;

  @Builder labelIcon(icon) {
    ...
  }
  build(){
    Row(){
      if(this.isComplete){
        this.labelIcon($r('app.media.radio_on'))
      }else {
        this.labelIcon($r('app.media.radio_off'))
      }
      ...
    }
    ...
    .onClick(() => {
      this.isComplete = !this.isComplete
    })
  }
}

循环渲染列表数据

我们通过创建好的ToDoItem组件开发,通过ForEach循环显示多条数据。

totalTasks: Array = [
    "早餐晨练",
    "准备早餐",
    "阅读名著",
    "学习ArkTs",
    "看剧轻松"
 ]

代码

ToDoItem组件

@Component
export struct  ToItem{
  private content:string;
  @State isComplete: boolean = false;

  @Builder labelIcon(icon) {
    Image(icon)
      .width(20)

  }


  build(){
    Row(){
      if(this.isComplete){
        this.labelIcon($r('app.media.radio_on'))
      }else {
        this.labelIcon($r('app.media.radio_off'))
      }
      Text(this.content)
        .fontSize(20)
        .margin({left:15})
        .opacity(this.isComplete ? 0.4 : 1)
        .decoration({type: this.isComplete ? TextDecorationType.Overline : TextDecorationType.None})
    }
    .backgroundColor("#fff")
    .borderRadius(24)
    .padding(25)
    .margin(10)
    .width("93%")
    .onClick(() => {
      this.isComplete = !this.isComplete
    })
  }
}

ToDoList页面

import { ToItem } from '../view/ToItem'
@Entry
@Component
struct ToDoList {

  totalTasks: Array = [
    "早餐晨练",
    "准备早餐",
    "阅读名著",
    "学习ArkTs",
    "看剧轻松"
  ]

  build() {
    Row() {
      Column() {
        Text('待办')
          .fontSize(28)
          .fontWeight(FontWeight.Bold)
          .margin({
            top:30,
            bottom: 20
          })
          .width("80%")
        ForEach(this.totalTasks, (item) => {
          ToItem({content: item})
        })

      }
      .height("100%")
      .width("100%")

      .backgroundColor("#efefef")
    }
    .justifyContent(FlexAlign.)

  }
}

效果

第一个ArkTS项目实践-鸿蒙ArkTS_第2张图片

参考资料

文档:

​ 开发文档官网

​ 官网文档

​ https://blog.csdn.net/qq_57985179/article/details/128953555

视频:

​ 官网视频/

你可能感兴趣的:(鸿蒙APP开发,学习笔记,鸿蒙,harmonyos)