HarmonyOS开发组件基础

个人简介

👨‍💻‍个人主页： 魔术师
📖学习方向： 主攻前端方向，正逐渐往全栈发展
🚴个人状态： 研发工程师，现效力于政务服务网事业
🇨🇳人生格言： “心有多大，舞台就有多大。”
📚推荐学习： 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js 🍇鸿蒙开发
🪧使用备注：仅供学习交流 严禁用于商业用途 ，若发现侵权内容请及时联系作者
📤更新进度：持续更新内容
🤙个人名片：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

HarmonyOS开发组件基础目录

---

---

组件基础

1. 组件-什么是ArkTS

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

2. 基础-组件结构

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

页面组件

@Entry
@Component
struct Index {// 工程默认显示 `Index` 页面组件// build 是声明UI的位置build() {Text('页面组件')}
}

自定义组件

// 定义 `Footer` 组件
@Component
struct Footer {build() {Text('自定义组件')}
}@Entry
@Component
struct Index {build() {Column(){// 使用 `Footer` 组件Footer()}}
}

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

3. 基础-系统组件(ArkUI)

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

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

实现一个简易登录界面：

@Entry
@Component
struct Index {@Statephone:string = '18852638009'yzm:string= 'ws34'build() {Column(){// 手机号Row(){Text('手机号：')TextInput({text:this.phone, placeholder: '请输入手机号'}).placeholderColor('red')}// 验证码Row(){Text('验证码：')TextInput({text:this.yzm, placeholder: '请输入验证码'}).maxLength(4)}// 验证码Row(){Text('忘记密码').fontColor('#FF2B71F3')}// 登录，注册按钮Row(){Button('注册').backgroundColor('#c3c4c5').onClick(()=>{console.log('注册')})Button('登录').onClick(()=>{console.log('登录')})}}.width('100%').height('100%').backgroundColor('#ffececec')}}

注意: ArkUI 组件一般都是 Flex 模式，大部分布局可以由行和列组成。

4. 练习案例

实现登录表单数据收集、重置、模拟提交。

import promptAction from '@ohos.promptAction'
@Entry
@Component
struct Index {@Statemobile: string = ''@Statecode: 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: `请输入手机号或验证码` })}})}}}
}