鸿蒙应用开发-基础组件

组件-什么是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老皮!!!欢迎大家来找我探讨交流👀

相关推荐
小脑斧爱吃鱼鱼1 小时前
鸿蒙项目笔记(1)
笔记·学习·harmonyos
鸿蒙布道师2 小时前
鸿蒙NEXT开发对象工具类(TS)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
zhang1062092 小时前
HarmonyOS 基础组件和基础布局的介绍
harmonyos·基础组件·基础布局
马剑威(威哥爱编程)2 小时前
在HarmonyOS NEXT 开发中,如何指定一个号码,拉起系统拨号页面
华为·harmonyos·arkts
GeniuswongAir3 小时前
Flutter极速接入IM聊天功能并支持鸿蒙
flutter·华为·harmonyos
90后的晨仔7 小时前
鸿蒙ArkUI框架中的状态管理
harmonyos
别说我什么都不会1 天前
OpenHarmony 5.0(API 12)关系型数据库relationalStore 新增本地数据变化监听接口介绍
api·harmonyos
MardaWang1 天前
HarmonyOS 5.0.4(16) 版本正式发布,支持wearable类型的设备!
华为·harmonyos
余多多_zZ1 天前
鸿蒙学习手册(HarmonyOSNext_API16)_应用开发UI设计:Swiper
学习·ui·华为·harmonyos·鸿蒙系统
斯~内克1 天前
鸿蒙网络通信全解析:从网络状态订阅到高效请求实践
网络·php·harmonyos