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 描述规范。

页面组件

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

自定义组件

javascript 复制代码
// 定义 `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 输入框组件

实现一个简易登录界面:

javascript 复制代码
@Entry
@Component
struct Index {
  @State
  phone: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. 练习案例

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

javascript 复制代码
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: `请输入手机号或验证码` })
            }
          })
      }
    }
  }
}
相关推荐
zhanshuo20 分钟前
构建可扩展的状态系统:基于 ArkTS 的模块化状态管理设计与实现
harmonyos
zhanshuo25 分钟前
ArkTS 模块通信全解析:用事件总线实现页面消息联动
harmonyos
codefish7985 小时前
鸿蒙开发学习之路:从入门到实践的全面指南
harmonyos
yrjw11 小时前
一款基于react-native harmonyOS 封装的【文档】文件预览查看开源库(基于Harmony 原生文件预览服务进行封装)
harmonyos
小徐不徐说18 小时前
每日一算:华为-批萨分配问题
数据结构·c++·算法·leetcode·华为·动态规划·后端开发
搜狐技术产品小编20231 天前
搜狐新闻直播间适配HarmonyOs实现点赞动画
华为·harmonyos
zhanshuo1 天前
ArkUI 玩转水平滑动视图:超全实战教程与项目应用解析
harmonyos·arkui
zhanshuo1 天前
ArkUI Canvas 实战:快速绘制柱状图图表组件
harmonyos·arkui
zhanshuo2 天前
手把手教你用 ArkUI 写出高性能分页列表:List + onScroll 实战解析
harmonyos
zhanshuo2 天前
深入解析 ArkUI 触摸事件机制:从点击到滑动的开发全流程
harmonyos