鸿蒙应用开发-基础组件

组件-什么是ArkTS

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript(简称TS)生态基础上做了进一步扩展,继承了TS的所有特性,是TS的超集。

扩展能力如下:
  1. 基本语法
    • 定义声明式UI、自定义组件、动态扩展UI元素;
    • 提供ArkUI系统组件,提供组件事件、方法、属性;
    • 共同构成 UI 开发主体
  2. 状态管理
    • 组件状态、组件数据共享、应用数据共享、设备共享;
  3. 渲染控制
    • 条件渲染、循环渲染、数据懒加载;
声明式UI?

问题?通过一段 HTML 标签展示出对应的页面方便,还是使用 document.createElement('tag')创建标签构建页面方便?

  • 显然是 HTML , 其实 HTML 本身就是声明式的,通过描述的方式去声明 UI 界面。
  • 一些前端框架也是声明式UI,如 Vue 使用的 tempalte 模板,如 React 使用的 JSX
  • 在例如现在的 Jetpack Compose SwiftUI Flutter 等APP开发技术也是声明式。

基础-组件结构

ArkTS通过装饰器 @Component@Entry 装饰 struct 关键字声明的数据结构,构成一个自定义组件。 自定义组件中提供了一个 build 函数,开发者需在该函数内以链式调用的方式进行基本的 UI 描述,UI 描述的方法请参考 UI 描述规范。

  • 页面组件
java 复制代码
@Entry
@Component
struct Index {
  // 工程默认显示 `Index` 页面组件
  // build 是声明UI的位置
  build() {
    Text('页面组件')
  }
}
  • 自定义组件
java 复制代码
// 定义 `Footer` 组件
@Component
struct Footer {
  build() {
    Text('自定义组件')
  }
}

@Entry
@Component
struct Index {
  build() {
    Column(){
      // 使用 `Footer` 组件
      Footer()
    }
  }
}

为了更好维护,自定义组件通常会新建一个文件 Footer.ets,通过模块化语法导出导入(默认|按需)使用。

components/Footer.ets

java 复制代码
@Component
export default struct Footer {
  build() {
    Text('自定义组件')
  }
}

Index.ets

java 复制代码
import Footer from './components/Footer.ets'

@Entry
@Component
struct Index {
  build() {
    Column(){
      // 使用 `Footer` 组件
      Footer()
    }
  }
}

基础-系统组件(ArkUI)

常用系统组件 Text Column Row Button TextInput 更多组件

  • Text 文本组件
  • Column 列组件,纵向排列,Flex布局主轴是Y
  • Row 行组件,横向向排列,Flex布局主轴是X
  • Button 按钮组件
  • InputText 输入框组件

实现一个简易登录界面:

java 复制代码
@Entry
@Component
struct Index {

  build() {
    Column(){
      Row(){
        Text('手机号')
        TextInput()
      }
      Row(){
        Text('验证码')
        TextInput()
      }
      Row(){
        Button('重置').backgroundColor('#ccc')
        Button('登录')
      }
    }
  }
}

基础-组件状态

如何使用 @State 定义一个状态变量?

  • 组件变量,不具备驱动UI更新能力。
java 复制代码
@Entry
@Component
struct Index {
  count = 100

  build() {
    Text(this.count.toString())
      .onClick(() => this.count++)
  }
}
  • 状态变量,指驱动UI更新的数据,加上 @State 装饰器即可,注意:加上类型和初始值。
java 复制代码
@Entry
@Component
struct Index {

  @State
  count: number = 100

  build() {
    Text(this.count.toString())
      .onClick(() => this.count++)
  }
}

TIP

  • 加上类型和初始值
  • 状态变量不可设置的类型有:any undefined null 与复杂类型的联合类型

其他:

  • 绑定事件在系统组件后链式使用 onXxxxx 进行绑定即可
  • 使用 @ohos.promptAction 可以进行轻提示 promptAction.showToast({ message: 'Tip' })

📕📕📕 练习案例→实现登录表单数据收集、重置、模拟提交。

java 复制代码
import promptAction from '@ohos.promptAction'
@Entry
@Component
struct Index {

  @State
  mobile: string = ''
  @State
  code: string = ''

  build() {
    Column(){
      Row(){
        Text('手机号')
        TextInput({ text: this.mobile })
          .onChange((value)=>this.mobile = value)
      }
      Row(){
        Text('验证码')
        TextInput({ text: this.code })
          .onChange((value)=>this.code = value)
      }
      Row(){
        Button('重置')
          .backgroundColor('#ccc')
          .onClick(()=>{
            this.mobile = ''
            this.code = ''
          })
        Button('登录')
          .onClick(()=>{
            if (this.mobile && this.code) {
              promptAction.showToast({ message: `${this.mobile} 登录成功` })
            } else {
              promptAction.showToast({ message: `请输入手机号或验证码` })
            }
          })
      }
    }
  }
}

👀关注公众号:Android老皮!!!欢迎大家来找我探讨交流👀

相关推荐
__Benco2 小时前
OpenHarmony - 小型系统内核(LiteOS-A)(十),魔法键使用方法,用户态异常信息说明
人工智能·harmonyos
NapleC15 小时前
HarmonyOS:一多能力介绍:一次开发,多端部署
华为·harmonyos
我爱学习_zwj18 小时前
【鸿蒙HarmonyOS】深入理解router与Navigation
华为·harmonyos
NapleC18 小时前
HarmonyOS:1.7
harmonyos
鸿蒙布道师18 小时前
鸿蒙NEXT开发通知工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
鸿蒙布道师18 小时前
鸿蒙NEXT开发网络相关工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
半梅芒果干18 小时前
HarmonyOs @hadss/hmrouter路由接入
华为·harmonyos
心走20 小时前
鸿蒙WebRTC编译指南&踩坑(Native 编译指导)
harmonyos·音视频开发
冯志浩21 小时前
HarmonyOS - 嵌套类属性状态管理装饰器:ObservedV2 和 Trace
harmonyos·掘金·金石计划