鸿蒙应用开发-基础组件

组件-什么是ArkTS

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

扩展能力如下：

基本语法
- 定义声明式UI、自定义组件、动态扩展UI元素；
- 提供ArkUI系统组件，提供组件事件、方法、属性；
- 共同构成 UI 开发主体
状态管理
- 组件状态、组件数据共享、应用数据共享、设备共享；
渲染控制
- 条件渲染、循环渲染、数据懒加载；

声明式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老皮！！！欢迎大家来找我探讨交流👀