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

这篇具有很好参考价值的文章主要介绍了第一个ArkTS项目实践-鸿蒙ArkTS。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

第一个ArkTS项目实践-ArkTS

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

开发文档官网

第一个ArkTS项目实践-鸿蒙ArkTS,鸿蒙APP开发,学习笔记,鸿蒙,harmonyos

自定义组件的组成

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

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

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

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

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

第一个ArkTS项目实践-鸿蒙ArkTS,鸿蒙APP开发,学习笔记,鸿蒙,harmonyos

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

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

第一个ArkTS项目实践-鸿蒙ArkTS,鸿蒙APP开发,学习笔记,鸿蒙,harmonyos

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

@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上设置子组件在垂直方向上的对齐格式。
    默认值:VerticalAlign.Center

    VerticalAlign.Top

    VerticalAlign.Bottom

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

    默认值:HorizontalAlign.Center

    HorizontalAlign.Start

    HorizontalAlign.End

  • justifyContent

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

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

    默认值:FlexAlign.Start

    FlexAlign.Center 居中对齐

    FlexAlign.End

Row水平布局

第一个ArkTS项目实践-鸿蒙ArkTS,鸿蒙APP开发,学习笔记,鸿蒙,harmonyos

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

Column垂直布局

第一个ArkTS项目实践-鸿蒙ArkTS,鸿蒙APP开发,学习笔记,鸿蒙,harmonyos

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

}

改变组件状态

第一个ArkTS项目实践-鸿蒙ArkTS,鸿蒙APP开发,学习笔记,鸿蒙,harmonyos

在实际的开发中由于交互的需求,需求页面中的内产生一个状态的改变。需要通过定义变量完成不过需要加上 @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<string> = [
    "早餐晨练",
    "准备早餐",
    "阅读名著",
    "学习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<string> = [
    "早餐晨练",
    "准备早餐",
    "阅读名著",
    "学习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")
    }

  }
}

效果

第一个ArkTS项目实践-鸿蒙ArkTS,鸿蒙APP开发,学习笔记,鸿蒙,harmonyos

参考资料

文档:

​ 开发文档官网

​ 官网文档

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

视频:

​ 官网视频文章来源地址https://www.toymoban.com/news/detail-651256.html

到了这里,关于第一个ArkTS项目实践-鸿蒙ArkTS的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【华为鸿蒙系统学习】- 如何利用鸿蒙系统进行App项目开发|自学篇

    🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 💫个人格言: \\\"没有罗马,那就自己创造罗马~\\\" 目录  创建鸿蒙第一个App项目  项目创建 工程目录区  预览区 运行Hello World 基本工程目录   ws:工程级别目录  entry:模块级别目录  app.json5 modu

    2024年02月04日
    浏览(54)
  • 鸿蒙Stage模型开发—创建你的第一个ArkTS应用

    基本概念 下图展示了Stage模型中的基本概念。 图1 Stage模型概念图 UIAbility组件和ExtensionAbility组件 Stage模型提供UIAbility和ExtensionAbility两种类型的组件,这两种组件都有具体的类承载,支持面向对象的开发方式。 UIAbility组件是一种包含UI界面的应用组件,主要用于和用户交互。

    2024年02月04日
    浏览(97)
  • 鸿蒙开发实战项目(六十七):常见组件和容器低代码开发示例(ArkTS)

    本文 详细代码 需订阅下面专栏获取(订阅后私信邮箱+项目名): https://blog.csdn.net/m0_68036862/category_12333038.html 目录 介绍 环境搭建 代码结构解读 创建低代码工程

    2024年02月21日
    浏览(45)
  • 鸿蒙开发笔记(一):ArkTS概述及声明式UI的使用

    ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript(简称TS)生态基础上做了进一步扩展,继承了TS的所有特性,是TS的超集。 ArkTS在TS的基础上主要扩展了如下能力: 基本语法 :ArkTS定义了声明式UI描述、自定义组件和动态扩展UI元素的能力,再配合ArkUI开发

    2024年01月17日
    浏览(51)
  • 创建一个简单鸿蒙app项目

    文章目录 前言 TypeScript 基础类型 创建一个鸿蒙app 总结 一、前言 鸿蒙系统上的开发已经是趋势了,必须紧跟时代的潮流。先简单了解下鸿蒙系统中,我们开发一个app需要用到的语言,那么就是TypeScript。这篇文章主要讲的就是一些基础的语法。最后我会附上一个demo,可以看看

    2024年01月21日
    浏览(42)
  • 鸿蒙4.0开发笔记之ArkTS语法基础的UI描述、基础组件的使用与如何查看组件是否有参数(八)

    在HarmonyOS的ArkTS语法中,万物皆组件。ArkTS以声明方式组合和扩展组件来描述应用程序的UI,同时还提供了基本的属性、事件和子组件配置方法,帮助开发者实现应用交互逻辑。根据组件构造方法的不同,创建组件包含有参数和无参数两种方式。 1、无/有参数组件 无参数组件:

    2024年02月03日
    浏览(40)
  • 『牛角书』HarmonyOS鸿蒙实战 开发一个简单聊天助手APP

    我是通过b站上面老师的讲解,跟着老师编写了一个简单聊天助手app,简答实用,对于刚开始接触鸿蒙的我们来说很有帮助。 所用软件为DevEco Studio,点击Create HarmonyOS Project,这里选择了第一个空的项目,点击next会跳至下一个页面。 这里是项目的名称,因为是一个demo,就没有

    2024年02月12日
    浏览(47)
  • 【Unity】Unity开发学习和项目实践02——创建第一个Unity项目和游戏物体

    创建第1个Unity项目 打开Unity hub,点击新项目 以下有四处地方需要注意选择: 1.Unity编辑器版本 2.项目模板 3.项目名称 4.项目保存位置 点击创建项目 ok,进入编辑器了 把编辑器界面布局稍微改一下,改成2by3 点击Edit 点击 project settings,这是对我们所创建工程的设置 此外还有对

    2024年01月25日
    浏览(56)
  • 鸿蒙Harmony应用开发,一起来写一个“遥遥领先”的开眼App

    最近不知道怎么鸿蒙Harmony突然就很火,到处都是鸿蒙开发相关的文章,培训机构的也是各种推鸿蒙应用,不知道是真的🔥了,还是在贩卖焦虑!不过看热度不错,那也就来了解了解咱们的遥遥领先😊,花了大概一周的闲暇时间从了解到参照自己以前开眼App的api写了一款鸿蒙

    2024年01月20日
    浏览(49)
  • 鸿蒙ArkTS小短剧开源项目进行中

    使用ArtTS语言,API9以上,HarmonyOS系统的短剧开源代码,使用GSYVideoPlayer作为核心播放器的小短剧。主要以ArkTS,ArkUI编写为主,拥有市面上的短剧页面。 推荐页面,主要随机推荐热门的小短剧并播放 短剧页面,主要是对短剧类型进行了分类,可供选择。 收藏界面,主要是对自

    2024年04月16日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包