【HarmonyOS】ArkTS语言介绍与组件方式运用

这篇具有很好参考价值的文章主要介绍了【HarmonyOS】ArkTS语言介绍与组件方式运用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        从今天开始,博主将开设一门新的专栏用来讲解市面上比较热门的技术 “鸿蒙开发”,对于刚接触这项技术的小伙伴在学习鸿蒙开发之前,有必要先了解一下鸿蒙,从你的角度来讲,你认为什么是鸿蒙呢?它出现的意义又是什么?鸿蒙仅仅是一个手机操作系统吗?它的出现能够和Android和IOS三分天下吗?它未来的潜力能否制霸整个手机市场呢?

抱着这样的疑问和对鸿蒙开发的好奇,让我们开始今天对ArkTS语言的了解以及对组件的掌握吧!

目录

初识ArkTS语言

ArkUI基础组件

Image(图片显示组件)

Text(文本显示组件)

TextInput(文本输入框)

Button(按钮组件)

Slider(滑动条组件)

Column、Row(布局容器)

ForEach(循环控制)

List(列表容器)

ArkTS自定义组件


初识ArkTS语言

ArkTS是HarmonyOS优选的主力应用开发语言,它在 TypeScript(简称TS) 的基础上,匹配ArkUI框架,扩展了声明式UI、状态管理等相应的能力,让开发者以更简洁、更自然的方式开发跨端应用。要了解什么是ArkTS,我们要先了解一下ArkTS、TypeScript 和 JavaScript 之间的关系,如下:

【HarmonyOS】ArkTS语言介绍与组件方式运用,HarmonyOS(鸿蒙开发),harmonyos,开发语言,华为

学习ArkTS之前还是推荐先了解并掌握一下 JS 和 TS ,这两门语言的掌握再回头看ArkTS的话可谓是上手很快了。ArkTS兼容TypeScript语言,拓展了声明式UI、状态管理、并发任务等能力。在学习ArkTS语言之前,建议开发者具备ts语言的开发能力,当前ArkTS在ts的基础上主要扩展了如下能力:

基本语法

ArkTS定义了声明式 UI 描述、自定义组件和动态扩展UI元素的能力,再配ArkUI开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了UI开发的主体。

状态管理:

ArkTS提供了多维度的状态管理机制。在UI开发框架中,与UI相关联的数据可以在组件内使用,也可以在不同组件层级间传递,比如父子组件之间、爷孙组件之间,还可以在应用全局范围内传递或跨设备传递。另外,从数据的传递形式来看,可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动。

渲染控制

ArkTS 提供了渲染控制的能力。条件渲染可根据应用的不同状态,渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据,并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。

未来,ArkTS会结合应用开发/运行的需求持续演进,逐步提供并行和并发能力增强、系统类型增强、分布式开发范式等更多特性。

在ArkTS的布局结构方面,开发者需要在页面上声明对应的元素,其布局的结构通常是分层级的,代表了用户界面中的整体架构,一个常见的页面结构如下:

【HarmonyOS】ArkTS语言介绍与组件方式运用,HarmonyOS(鸿蒙开发),harmonyos,开发语言,华为

其中Page表示页面的根节点,Column/Row等元素为系统组件。针对不同的页面结构,ArkUI提供了不同的布局组件来帮助开发者实现对应布局的效果,例如Row用于实现线性布局等,我会给大家详细讲解对应的布局。

ArkUI基础组件

接下来将对ArkUI常用的基础组件进行一个简单的演示与应用,掌握ArkUI的基本使用。

Image(图片显示组件)

声明Image组件并设置图片源方式如下:

Image(src: string|PixelMap|Resource)

1)string格式,通常用来加载网络图片,需要申请网络访问权限:ohos.permission.INTERNET

Image('https://xxx.png')

【HarmonyOS】ArkTS语言介绍与组件方式运用,HarmonyOS(鸿蒙开发),harmonyos,开发语言,华为

打开 module.json5 文件夹下,配置如下 requestPermissions 选项,可以看到图片出现。

【HarmonyOS】ArkTS语言介绍与组件方式运用,HarmonyOS(鸿蒙开发),harmonyos,开发语言,华为

2)PixelMap格式,可以加载像素图,常用在图片编辑中

Image(pixelMapObject)

3)Resource格式,加载本地图片,推荐使用

Image($r('app.media.mate'60.png)

Image($rawfile('mate60.png'))

【HarmonyOS】ArkTS语言介绍与组件方式运用,HarmonyOS(鸿蒙开发),harmonyos,开发语言,华为

Text(文本显示组件)

Text(content?: string|Resource)

1)string格式,直接填写文本内容

Text('文本内容')

2)Resource格式,读取本地资源文件

Text($r('app.string.width_label'))

这里我们设置了一个动态的文本显示:

【HarmonyOS】ArkTS语言介绍与组件方式运用,HarmonyOS(鸿蒙开发),harmonyos,开发语言,华为

TextInput(文本输入框)

TextInput( {placeholder?: ResourceStr, text?: ResourceStr} )

1)placeHolder:输入框无输入时的提示文本

TextInput({placeholder: '请输入账号或手机号'})

2)text:输入框当前的文本内容

TextInput({text: '文本内容'})

比如我们用输入框动态的改变一个图片的大小操作如下:

【HarmonyOS】ArkTS语言介绍与组件方式运用,HarmonyOS(鸿蒙开发),harmonyos,开发语言,华为

下面是输入框的各种类型描述:

名称 描述
Normal 基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。
Password 密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。
Email 邮箱地址输入模式。支持数字,字母,下划线,以及@字符。
Number 纯数字输入模式。
PhoneNumber 电话号码输入模式。支持输入数字、+、-、*、#、长度不限。

Button(按钮组件)

Button(label?: ResourceStr)

1)文字型按钮

Button('点我')

2)自定义按钮,在Button内嵌套其它组件

Button(){

        Image($r('app.media.search')).width(20).margin(10)

}

比如我们用按钮动态的改变一个图片的大小操作如下:

【HarmonyOS】ArkTS语言介绍与组件方式运用,HarmonyOS(鸿蒙开发),harmonyos,开发语言,华为

下面是按钮的各种类型描述:

名称 描述
Capsule 胶囊型按钮(圆角默认为高度的一半)。
Circle 圆形按钮。
Normal 普通按钮(默认不带圆角)。

Slider(滑动条组件)

滑动条的组件的功能实现很简单,只需要在Slider里面设置其功能,外部设置其样式即可:

【HarmonyOS】ArkTS语言介绍与组件方式运用,HarmonyOS(鸿蒙开发),harmonyos,开发语言,华为

Column、Row(布局容器)

Column容器与Row容器其对应的对齐方式使用的参数如下表格所示:

属性方法名 说明 参数
justifyContent 设置子元素在主轴方向的对齐格式 FlexAlign枚举
alignItems 设置子元素在交叉轴方向的对齐格式 Row容器使用VerticalAlign枚举
Column容器使用HorizontalAlign枚举

Column容器中使用FlexAlign的主轴对齐方式函数及其特点如下所示:

【HarmonyOS】ArkTS语言介绍与组件方式运用,HarmonyOS(鸿蒙开发),harmonyos,开发语言,华为

Row容器中使用FlexAlign的主轴对齐方式函数及其特点如下所示: 

【HarmonyOS】ArkTS语言介绍与组件方式运用,HarmonyOS(鸿蒙开发),harmonyos,开发语言,华为

两者在交叉轴上的对齐方式如下所示:

【HarmonyOS】ArkTS语言介绍与组件方式运用,HarmonyOS(鸿蒙开发),harmonyos,开发语言,华为

Column容器:纵向布局,先从上往下,再从左往右。

Row容器:横向布局,先从左往右,再从上往下。

以下给出使用Column和Row容器的例子:

@Entry
@Component

struct Index {
  // 设置状态变量
  @State ImageWidth: number = 150

  build() {
    Column() {
      Row(){
        Image($r('app.media.icon'))
          .width(this.ImageWidth)
          .interpolation(ImageInterpolation.High)
      }
      .width('100%')
      .height(400)
      .justifyContent(FlexAlign.Center)
      Row(){
        Text($r('app.string.width_label'))
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor('#008c8c')
        TextInput({text: this.ImageWidth.toString()})
          .backgroundColor('#fff')
          .width(200)
          .type(InputType.Number) // 只能输入数字类型
          .onChange(value=>{
            if (!value) {
              this.ImageWidth = 0
            }else {
              this.ImageWidth = parseInt(value)
            }
          })
      }
      .width('100%')
      .padding({left: 10, right: 10})
      .justifyContent(FlexAlign.SpaceBetween)
      Divider().width('91%')
      Row(){
        Button('缩小')
          .width(80)
          .fontSize(20)
          .onClick(()=>{
            if(this.ImageWidth >= 10){
              this.ImageWidth -= 10
            }
          })
        Button('放大')
          .width(80)
          .fontSize(20)
          .onClick(() => {
            if (this.ImageWidth <= 300) {
              this.ImageWidth += 10
            }
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)
      .margin({top: 30, bottom: 30})

      Slider({
        min: 100,
        max: 300,
        value: this.ImageWidth,
        step: 10, // 步长
      })
        .width('90%')
        .blockColor('#36D')
        .trackThickness(5) // 滑动条的粗细
        .showTips(true) // 显示气泡百分比
        .onChange(value => {
          this.ImageWidth = value
        })
    }
    .width('100%')
    .height('100%')
  }
}

呈现的效果如下所示:

【HarmonyOS】ArkTS语言介绍与组件方式运用,HarmonyOS(鸿蒙开发),harmonyos,开发语言,华为

ForEach(循环控制)

ForEach循环遍历数组,根据数组内容渲染页面组件,以下是其基本格式:

ForEach(
    arr: Array, // 要遍历的数据数组
    (item: any, index?: number) => {
        // 页面组件生成函数
    }
    keyGenerator?: (item: any, index?: number): string => {
        // 键生成函数,为数组每一项生产一个唯一标识,组件是否重新渲染的判断标准
    }
)

以下是通过ForEach生成页面的组件的基本案例:

class Item {
  name: string
  image: ResourceStr
  price: number
  discount: number

  constructor(name: string, image: ResourceStr, price: number, discount = 0) {
    this.name = name
    this.image = image
    this.price = price
    this.discount = discount
  }
}

@Entry
@Component

struct Index {
  // 商品数据
  private items: Array<Item> = [
    new Item('华为', $r('app.media.icon'), 6999, 500),
    new Item('小米', $r('app.media.icon'), 7999),
    new Item('苹果', $r('app.media.icon'), 9999),
    new Item('三星', $r('app.media.icon'), 3999),
    new Item('oppo', $r('app.media.icon'), 1999),

  ]
  build(){
    Column({space: 4}){
      Row(){
        Text('商品列表')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .margin({bottom: 20})

      ForEach(
        this.items,
        (item: Item) => {
          Row({space: 10}){
            Image(item.image)
              .width(100)
            Column({space: 4}){
              if (item.discount) {
                Text(item.name)
                  .fontSize(20)
                  .fontWeight(FontWeight.Bold)
                Text('原价:¥ '+ item.price)
                  .fontColor('#ccc')
                  .fontSize(14)
                  .decoration({type: TextDecorationType.LineThrough})
                Text('折扣价:¥ '+ (item.price - item.discount))
                  .fontColor('#F36')
                  .fontSize(18)
                Text('补贴:¥ '+ item.discount)
                  .fontColor('#F36')
                  .fontSize(18)
              }else {
                Text(item.name)
                  .fontSize(20)
                  .fontWeight(FontWeight.Bold)
                Text('¥ '+ item.price)
                  .fontColor('#F36')
                  .fontSize(18)
              }
            }
            .margin({left: 10})
            .height('100%')
            .alignItems(HorizontalAlign.Start)
          }
          .width('100%')
          .height(120)
          .borderRadius(20)
          .backgroundColor('#EFEFEF')
          .padding(20)
          .margin({bottom: 10})
        }
      )
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

呈现的结果如下所示:

【HarmonyOS】ArkTS语言介绍与组件方式运用,HarmonyOS(鸿蒙开发),harmonyos,开发语言,华为

List(列表容器)

List是一种复杂的容器,当页面内容数量过多超出屏幕后,其列表项ListItem会自动提供滚动功能,当然列表项既可以纵向排列也可以横向排列,其基本格式代码如下:

List({space: 10}){
    ForEach([1, 2, 3, 4], item => {
        ListItem(){
            // 列表项内容,只能包含一个根组件
            Text('ListItem')
        }
    })
}
.width('100%')
.listDirection(Axis.Vertical) // 列表方向,默认纵向(垂直)

在ForEarch外面我们嵌套一层List容器,在ForEach里面我们嵌套ListItem,来实现页面的滚动:

【HarmonyOS】ArkTS语言介绍与组件方式运用,HarmonyOS(鸿蒙开发),harmonyos,开发语言,华为

最终呈现的效果如下:

【HarmonyOS】ArkTS语言介绍与组件方式运用,HarmonyOS(鸿蒙开发),harmonyos,开发语言,华为

ArkTS自定义组件

ArtTS提供了一些自定义组件及函数的方式,让繁杂的代码抽离出来,便于代码的可维护性和可阅读性,增强了代码的健壮性,以下是ArkTS进行自定义组件等相关的方法:

自定义组件:自定义组件很简单,可以在一个ets中进行书写,将一部分代码处理出来新设置一个 struct 构造函数即可,也可以将代码单独抽离出来形成一个新的文件,如下将上面案例的头部组件抽离出来形成一个新的组件Header,然后再在原本书写头部代码的位置引用Header组件即可:

【HarmonyOS】ArkTS语言介绍与组件方式运用,HarmonyOS(鸿蒙开发),harmonyos,开发语言,华为

自定义函数:自定义函数可以将烦长的代码单独抽离出一个函数当中,然后在原位置调用我们设置的函数即可,自定义函数可以定义在全局或组件内,如下:

【HarmonyOS】ArkTS语言介绍与组件方式运用,HarmonyOS(鸿蒙开发),harmonyos,开发语言,华为

如果想设置组件内自定义函数,则需要设置与build()函数平级然后去掉function,然后引用函数的位置需要通过this指向即可:

【HarmonyOS】ArkTS语言介绍与组件方式运用,HarmonyOS(鸿蒙开发),harmonyos,开发语言,华为

@Styles装饰器: 用来设置组件公共样式,可以定义在全局或者组件内,和自定义函数的方式一致,如下:

【HarmonyOS】ArkTS语言介绍与组件方式运用,HarmonyOS(鸿蒙开发),harmonyos,开发语言,华为

@Extend装饰器:仅可定义在全局,用来设置组件的特有属性,使用方式与上面一致:文章来源地址https://www.toymoban.com/news/detail-774565.html

// 继承模式,只能写在全局
@Extend(Text) function priceText() {
  .fontSize(18)
  .fontColor('#F36')
}

到了这里,关于【HarmonyOS】ArkTS语言介绍与组件方式运用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 零基础快速上手HarmonyOS ArkTS开发1---运行Hello World、ArkTS开发语言介绍

    在华为开发者大会2023年8月4日(HDC.Together)大会上,HarmonyOS 4正式发布,其实在2021年那会学习了一点鸿蒙的开发: 不过因为现在的鸿蒙手机完全兼容Android应用,所以学习动力也不是很足,一直就搁置了,直到今年华为官方出了这么一则消息才让我对于学习它有一种紧迫感了,如

    2024年02月05日
    浏览(51)
  • <HarmonyOS第一课>ArkTS开发语言介绍——闯关习题及答案

    判断题 1.循环渲染ForEach可以从数据源中迭代获取数据,并为每个数组项创建相应的组件。( 对 ) 2.@Link变量不能在组件内部进行初始化。( 对 ) 单选题 1.用哪一种装饰器修饰的struct表示该结构体具有组件化能力?( A ) A. @Component B. @Entry C. @Builder D. @Preview 2.用哪一种装饰

    2024年02月07日
    浏览(48)
  • HarmonyOS鸿蒙学习基础篇 - ArkTs介绍

    概述     ArkTS 是 Harmenyos优选的主力应用开发语言,它是一种基于TypeScript(简称TS)的应用开发语言,由华为开发。它在保持TS基本语法风格的基础上,对TS的动态类型特性施加更严格的约束,引入静态类型。同时,ArkTS提供了声明式UI、状态管理等相应的能力,让开发者可以

    2024年01月22日
    浏览(47)
  • 鸿蒙HarmonyOS实战-ArkTS语言(基本语法)

    🔎1.简介 HarmonyOS的ArkTS语言是一种基于TypeScript开发的语言,它专为HarmonyOS系统开发而设计。ArkTS语言结合了JavaScript的灵活性和TypeScript的严谨性,使得开发者能够快速、高效地开发出高质量的HarmonyOS应用程序。 ArkTS语言具有以下特点: 静态类型检查:开发者在编写代码时可以

    2024年01月18日
    浏览(58)
  • HarmonyOS鸿蒙开发指南:基于ArkTS开发 音频录制开发指导

    目录 场景介绍 开发步骤 全流程场景 正常录制场景 音频录制的主要工作是捕获音频信号

    2024年01月19日
    浏览(74)
  • HarmonyOS鸿蒙开发指南:基于ArkTS开发 音频渲染开发指导

    目录 场景介绍 音频中断 状态检查 异步操作 开发步骤

    2024年01月16日
    浏览(61)
  • 基于鸿蒙HarmonyOS 元服务开发一款公司运营应用(ArkTS API 9)

    最近基于Harmony OS最新版本开发了一个作品,本文来详细讲解一下,如何我是如何开发这个作品的。以及如何使用OpenHarmony,基于ArkTS,API 9来开发一个属于自己的元服务。 废话不多说,我的作品名称叫做 Company Operate 公司运营,是一个根据会计公式来预测公司未来几个月的资产

    2024年02月01日
    浏览(66)
  • HarmonyOS鸿蒙开发指南:基于ArkTS的声明式开发范式 声明式UI开发实例 绘图与动画

    目录 绘制图形 绘制基本几何图形 绘制自定义几何图形 animateTo实现闪屏动画 页面转场动画 绘制能力主要是通过框架提供的绘制组件来支撑,支持svg标准绘制命令。 本节主要学习如何使用绘制组件,绘制详情页食物成分标签(基本几何图形)和应用Logo(自定义图形)。

    2024年01月17日
    浏览(66)
  • HarmonyOS开发(十一):ArkTS组件通用属性

    用来设置组件的宽度、边距 相关属性 名称 参数说明 描术 width Length 设置组件的自身宽度,缺省的情况组件宽度为其内容的宽度 height Length 设置组件的自身高度,缺省的情况组件高度为其内容的度度 size {   width?:Length,   height?:Length } 设置组件的宽度尺寸 padding Padding | Length 设

    2024年01月20日
    浏览(44)
  • HarmonyOS鸿蒙开发指南:基于ArkTS开发 轻量级智能穿戴 体验应用、构建布局、绘制样式​​​​​​​和交互事件

    目录 体验应用 构建布局 绘制样式​​​​​​​ 交互事件 HelloWorld工程目录如下图所示: 图1  目录结构 pages/index/index.hml

    2024年02月01日
    浏览(56)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包