HarmonyOS | UI开发 (一) | 基础组件(Text/Span,TextInput/TextArea,Button,Image)

文章目录


个人博客主页谭祖爱 & 技术博客

项目实例地址RecordHarmonyOSProject


前言

鸿蒙操作系统作为华为推出的全新分布式操作系统,为开发者提供了丰富的组件库,使得开发者能够快速构建功能强大、界面美观的应用程序。本文将深入探讨鸿蒙应用开发中常用的组件,帮助开发者更好地理解和应用这些组件,提升开发效率和用户体验。


一、基础组件

基础组件:Text/Span,TextInput/TextArea,Button,Image


1.1.Text的概述

Text是文本组件,通常用于展示用户的视图,如显示文章的文字

1.2.Text的创建方式

Text创建方式:1.string字符串,2.引用Resource资源

- string字符串创建

typescript 复制代码
Text('我是一段文本')

- 引用Resource资源

通过 $r('app.string.xxx') 引用 string.json 文件中的 xxx(属性名) 对于的值

typescript 复制代码
Text($r('app.string.app_name'))
        .baselineOffset(0)
        .fontSize(30)
        .border({ width: 1 })
        .padding(10)
        .width(300)

1.3.Text自定义文本样式

- 通过textAlign属性设置文本对齐样式

typescript 复制代码
Text('左对齐')
  .width(300)
  .textAlign(TextAlign.Start)

Text('中间对齐')
  .width(300)
  .textAlign(TextAlign.Center)

Text('右对齐')
  .width(300)
  .textAlign(TextAlign.End)

- 通过textOverflow属性控制文本超长处理

typescript 复制代码
Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.')
          .width(250)
          .textOverflow({overflow:TextOverflow.None})
          .maxLines(1)
          .fontSize(12)
          .border({width:1}).padding(10)

Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.')
          .width(250)
          .textOverflow({overflow:TextOverflow.Ellipsis})
          .maxLines(1)
          .fontSize(12)
          .border({width:1}).padding(10)

- 通过lineHeight属性设置文本行高

typescript 复制代码
Text('This is the text with the line height set. This is the text with the line height set.')
  .width(300).fontSize(12).border({ width: 1 }).padding(10)
Text('This is the text with the line height set. This is the text with the line height set.')
  .width(300).fontSize(12).border({ width: 1 }).padding(10)
  .lineHeight(20)

- 通过copyOption属性设置文本是否可复制粘贴

typescript 复制代码
Text("这是一段可复制文本")
  .fontSize(30)
  .copyOption(CopyOptions.InApp)

1.4.Text添加事件

typescript 复制代码
Text('点我')
.onClick(()=>{
    console.info('我是Text的点击响应事件');
 })

2.1.Span的概述

Span只能作为Text组件的子组件显示文本内容。可以在一个Text内添加多个Span来显示一段信息

2.2.创建Span

typescript 复制代码
Text('我是Text') {
    Span('我是Span')
}
.padding(10)
.borderWidth(1)

- Span设置文本装饰线及颜色

typescript 复制代码
Text() {
       Span('我是Span1,').fontSize(16).fontColor(Color.Black)
         .decoration({type:TextDecorationType.None})
       Span('我是Span1,').fontSize(16).fontColor(Color.Grey)
         .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
       Span('我是Span2').fontColor(Color.Blue).fontSize(16)
         .fontStyle(FontStyle.Italic)
         .decoration({ type: TextDecorationType.Underline, color: Color.Black })
       Span(',我是Span3').fontSize(16).fontColor(Color.Grey)
         .decoration({ type: TextDecorationType.Overline, color: Color.Green })
}
.borderWidth(1)
.padding(10)

- Span通过textCase设置文字一直保持大写或者小写状态

typescript 复制代码
Text() {
      Span('I am Upper-span').fontSize(12).textCase(TextCase.UpperCase)
}
.borderWidth(1)
.padding(10)

2.3.Span添加事件

typescript 复制代码
Text() {
  Span('I am Upper-span').fontSize(12)
    .textCase(TextCase.UpperCase)
    .onClick(()=>{
      console.info('我是Span------onClick')
    })
}

3.1.TextInput的概述

TextInput 是单行输入框组件,通常用于响应用户的输入操作

3.2.TextInput的创建

typescript 复制代码
TextInput()

- 设置输入框类型

TextInput有5种可选类型,分别为Normal基本输入模式、Password密码输入模式、Email邮箱地址输入模式、Number纯数字输入模式、PhoneNumber电话号码输入模式。通过type属性进行设置:

  • 基本输入模式(默认类型)
typescript 复制代码
TextInput().type(InputType.Normal)
  • 密码输入模式
typescript 复制代码
TextInput().type(InputType.Password)
  • Email邮箱地址输入模式
typescript 复制代码
TextInput().type(InputType.Email)
  • Number纯数字输入模式
typescript 复制代码
TextInput().type(InputType.Number)
  • PhoneNumber电话号码输入模式
typescript 复制代码
TextInput().type(InputType.PhoneNumber)

- 自定义样式

  • 设置无输入时的提示文本
typescript 复制代码
TextInput({placeholder:'我是提示文本'})
  • 设置输入框当前的文本内容
typescript 复制代码
TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})
  • 添加backgroundColor改变输入框的背景颜色
typescript 复制代码
TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'}).backgroundColor(Color.Pink)

3.3.添加事件

typescript 复制代码
TextInput()
  .onChange((value: string) => {
    console.info(value);
  })
  .onFocus(() => {
    console.info('获取焦点');
  })

4.1.TextArea的概述

TextArea 是 多行输入框

4.2.TextArea的创建

typescript 复制代码
TextArea()

- 多行输入框文字超出一行时会自动折行

typescript 复制代码
TextArea({text:"我是TextArea我是TextArea我是TextArea我是TextArea"}).width(300)

5.1.Button的概述

Button是按钮组件,通常用于响应用户的点击操作

5.2.Button的创建

Button通过调用接口来创建,接口调用有以下两种形式

  • 创建不包含子组件的按钮
typescript 复制代码
Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
  .borderRadius(8) 
  .backgroundColor(0x317aff) 
  .width(90)
  .height(40)
  • 创建包含子组件的按钮
typescript 复制代码
Button({ type: ButtonType.Normal, stateEffect: true }) {
	  Row() {
	    Image($r('app.media.app_icon')).width(20).height(40).margin({ left: 12 })
	    Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
	  }.alignItems(VerticalAlign.Center)
}.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)

- 设置按钮类型

Button有三种可选类型,分别为Capsule(胶囊类型)、Circle(圆形按钮)和Normal(普通按钮),通过type进行设置

  • 胶囊按钮(默认类型)
typescript 复制代码
Button('Disable', { type: ButtonType.Capsule, stateEffect: false })
      .backgroundColor(0x317aff)
      .width(90)
      .height(40)
  • 圆形按钮
typescript 复制代码
Button('Circle', { type: ButtonType.Circle, stateEffect: false }) 
  .backgroundColor(0x317aff) 
  .width(90) 
  .height(90)
  • 普通按钮
typescript 复制代码
Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
  .borderRadius(8) 
  .backgroundColor(0x317aff) 
  .width(90)
  .height(40)

5.3.添加事件

typescript 复制代码
Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
  .onClick(()=>{ 
    console.info('Button onClick') 
  })

6.1.Image的概述

Image是显示图片组件,比如:按钮中的icon、网络图片、本地图片等

6.2.Image的获取图片的三种方式

  • 本地资源
typescript 复制代码
Image('images/like.png').size({width: 100,height:100})
  • 网络资源
typescript 复制代码
Image('https://www.wanandroid.com/resources/image/pc/logo.png').size({width: 300,height:300})

注:获取网络图片,需要申请网络权限,在 module.json5 中配置。

  • Resource资源
typescript 复制代码
Image($r('app.media.like')).size({width: 100,height:100})

二、总结

  1. Text是文本组件,用于显示文字
  2. Span只能作为Text组件的子组件显示文本内容,可以在一个Text内添加多个Span来显示一段信息
  3. TextInput 是单行输入框组件,通常用于响应用户的输入操作
  4. TextArea 是 多行输入框
  5. Button是按钮组件,通常用于响应用户的点击操作
  6. Image是显示图片组件
相关推荐
幽蓝计划6 分钟前
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
开发语言·harmonyos
伍哥的传说11 分钟前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
Georgewu2 小时前
【HarmonyOS】应用开发拖拽功能详解
harmonyos
塞尔维亚大汉2 小时前
鸿蒙内核源码分析(构建工具篇) | 顺瓜摸藤调试鸿蒙构建过程
源码·harmonyos
kumalab5 小时前
HarmonyOS ArkTS卡片堆叠滑动组件实战与原理详解(含源码)
华为·harmonyos
别说我什么都不会6 小时前
【OpenHarmony】鸿蒙开发之xml2jsDemo
harmonyos
HarmonyOS_SDK9 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
harmonyos
zhanshuo11 小时前
鸿蒙操作系统核心特性解析:从分布式架构到高效开发的全景技术图谱
harmonyos
塞尔维亚大汉11 小时前
鸿蒙内核源码分析(编译过程篇) | 简单案例窥视编译全过程
源码·harmonyos
别说我什么都不会11 小时前
【OpenHarmony】鸿蒙开发之ohos_beacon_library
harmonyos