鸿蒙笔记2

文章介绍了鸿蒙系统中HarmonyOSArkUI的基础组件,包括Text组件的文本样式和属性,如文本对齐、超长显示和装饰线设置;Image组件的图片缩放类型;TextInput组件的输入提示和类型设置;以及Button组件的样式和点击事件绑定。这些组件是构建用户界面的关键元素。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

和vscode一样,我们在使用DevEco Studio时也是可以参照的,看一个页面也可以把它当成一个网页来看,同理,就像每一个网页都是由大大小小不同的块有序堆积而成的一样,在鸿蒙系统里,页面同样是由一个个“块”堆积而成的。我们看下面这张图可以直观理解。

而接下来,我们就来一起看看一些常用的基本组件的介绍

常用基础组件

组件介绍

组件(Component)是界面搭建与显示的最小单位,HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件,我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。

组件根据功能可以分为以下五大类:基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件是视图层的基本组成单元,包括Text、Image、TextInput、Button、LoadingProgress等,例如下面这个常用的登录界面就是由这些基础组件组合而成。

下面我们将分别介绍这些常用基础组件的使用。

Text

Text组件用于在界面上展示一段文本信息,可以包含子组件Span。

比较常用的元素之一,基本上每一个页面都离不开这一个组件的使用

文本样式

针对包含文本元素的组件,例如Text、Span、Button、TextInput等,可使用fontColor、fontSize、fontStyle、 fontWeight、fontFamily这些文本样式,分别设置文本的颜色、大小、样式、粗细以及字体,文本样式的属性如下表:

除了通用属性和文本样式设置,下面列举了一些Text组件的常用属性的使用。

设置文本对齐方式

使用textAlign属性可以设置文本的对齐方式,示例代码如下:


Text('HarmonyOS')
  .width(200)
  .textAlign(TextAlign.Start)
  .backgroundColor(0xE6F2FD)

textAlign参数类型为TextAlign,定义了以下几种类型:

Start(默认值):水平对齐首部。

Center:水平居中对齐。

End:水平对齐尾部。

设置文本超长显示

当文本内容较多超出了Text组件范围的时候,您可以使用textOverflow设置文本截取方式,需配合maxLines使用,单独设置不生效,maxLines用于设置文本显示最大行数。下面的示例代码将textOverflow设置为Ellipsis ,它将显示不下的文本用 “...” 表示:


Text('This is the text content of Text Component This is the text content of Text Component')
  .fontSize(16)
  .maxLines(1)
  .textOverflow({overflow:TextOverflow.Ellipsis})
  .backgroundColor(0xE6F2FD) 

设置文本装饰线

使用decoration设置文本装饰线样式及其颜色,大家在浏览网页的时候经常可以看到装饰线,例如带有下划线超链接文本。decoration包含type和color两个参数,其中type用于设置装饰线样式,参数类型为TextDecorationTyp,color为可选参数。

TextDecorationTyp包含以下几种类型:

None:不使用文本装饰线。

Overline:文字上划线修饰。

LineThrough:穿过文本的修饰线。

Underline:文字下划线修饰。

Image

mage组件用来渲染展示图片,它可以让界面变得更加丰富多彩。只需要给Image组件设置图片地址、宽和高,图片就能加载出来

设置缩放类型

为了使图片在页面中有更好的显示效果,有时候需要对图片进行缩放处理。您可以使用objectFit属性设置图片的缩放类型,objectFit的参数类型为ImageFit。

ImageFit包含以下几种类型:

Contain:保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内。

Cover(默认值):保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界。

Auto:自适应显示。

Fill:不保持宽高比进行放大缩小,使得图片充满显示边界。

ScaleDown:保持宽高比显示,图片缩小或者保持不变。

None:保持原有尺寸显示。

TextInput

TextInput组件用于输入单行文本,响应输入事件。TextInput的使用也非常广泛,例如应用登录账号密码、发送消息等。和Text组件一样,TextInput组件也支持文本样式设置

简单来说就是一个用于输入的文本框

设置输入提示文本

当我们平时使用输入框的时候,往往会有一些提示文字。例如登录账号的时候会有“请输入账号”这样的文本提示,当用户输入内容之后,提示文本就会消失,这种提示功能使用placeholder属性就可以轻松的实现。您还可以使用placeholderColor和placeholderFont分别设置提示文本的颜色和样式

设置输入类型

可以使用type属性来设置输入框类型。例如密码输入框,一般输入密码的时候,为了用户密码安全,内容会显示为“......”,针对这种场景,将type属性设置为InputType.Password就可以实现。

type的参数类型为InputType,包含以下几种输入类型:

Normal:基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。

Password:密码输入模式。(输入变成小黑点)

Email:e-mail地址输入模式。

Number:纯数字输入模式。

设置光标位置

可以使用TextInputController动态设置光位置,下面的示例代码使用TextInputController的caretPosition方法,将光标移动到了第二个字符后。


@Entry
@Component
struct TextInputDemo {
  controller: TextInputController = new TextInputController()
 
  build() {
    Column() {
      TextInput({ controller: this.controller })
      Button('设置光标位置')
        .onClick(() => {
          this.controller.caretPosition(2)
        })
    }
    .height('100%')
    .backgroundColor(0xE6F2FD)
  }
}

Button

Button组件主要用来响应点击操作,可以包含子组件。

设置按钮样式

type用于定义按钮样式,示例代码中ButtonType.Capsule表示胶囊形按钮;stateEffect用于设置按钮按下时是否开启切换效果,当状态置为false时,点击效果关闭,默认值为true。

我们可以设置多种样式的Button,除了Capsule可以以设置Normal和Circle:

Capsule:胶囊型按钮(圆角默认为高度的一半)。

Circle:圆形按钮。

Normal:普通按钮(默认不带圆角)。

设置按钮点击事件

可以给Button绑定onClick事件,每当用户点击Button的时候,就会回调执行onClick方法,调用里面的逻辑代码

大概就是这么多,总体看来是和前端的学习是大体相似的,希望大家能好好努力,攻克鸿蒙难关。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

J.Pei

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值