鸿蒙(HarmonyOS)应用开发——基础组件

本文介绍: 组件化是一种将复杂的前端应用程序分解成小的、独立的部分的方法。这些部分被称为组件，它们可以重复使用，可以与其他组件组合使用以创建更复杂的组件，并且它们有自己的生命周期和状态。组件化的目的是提高开发效率和代码重用率，使开发人员更专注于组件自身的实现，而不是整个应用程序。这样可以提高代码的可维护性和可扩展性，并且减少了程序出错的机会。组件是界面搭建与显示的最小单位；fill:#333;color:#333;color:#333;fill:none;根据功能分类基础组件容器组件媒体组件绘制组件。

Im a g e 组件

Ima g e 用来渲染展示图片的组件，支持加载本地和网络图片

语法

Image(src: string|PixelMap|Resourece)

str ing
访问网络图片、本地图片

访问网络图片时，需要在module.json5文件中添加网络访问权限
‘module’:{ 'reqPermissinos':[ {"name":"ohos.permission.INTERNET"} ] }

Pi x elMap
Pi x elMap 为图像像素类，用于读取或写入图像数据以及获取图像信息。
Re source 类型
 使用时，需要先将图片放在resource 的 media或 raw file 目录下

属性

width()| height()支持 number、str ing和resource

Text组件

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

语法

Text(content?:string|resouce)

属性

文本样式
可使用 fontColo r、fontSize、fontStyle、fontWeigh t、fontFamily文本样式

名称	参数类型	描述
fontColo r	ResouceColo r	设置文本颜色
fon tSize	Length /Resource	设置文本尺寸，Length为number类型时，使用fp 单位。
fontStyle	FontStyle	设置文本的字体样式。默认值：FontStyle.Normal。
fontWeight	number / FontWeigh /string	设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持 number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“reg ul ar”、“medium”，分别对应FontWeight中相应的枚举值。默认值：FontWeight.Normal。
fontFamily	string /Resource	设置文本的字体列表。使用多个字体，使用“，”进行分割，优先级按顺序生效。例如：“Arial，sans-serif”。

 Text('HarmonyOS')
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')

文本对其方式
 可以使用textAlign属性设置文本的对齐方式

名称	描述
Start	水平对齐首部。
Center	水平居中对齐。
End	水平对齐尾部。

Text('HarmonyOS')
  .width(200)
  .textAlign(TextAlign.Start)

设置文本超长显示
当文本内容较多超出了Text组件范围的时候，您可以使用textOverflow设置文本截取方式，需配合maxLines使用，单独设置不生效，maxLines 用于设置文本显示最大行数

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})

设置文本装饰线
使用de c oration设置文本装饰线样式及其颜色

decoration({ type: TextDecorationType.Underline, color: Color.Black })

TextDecorationType类型	描述
None	不使用文本装饰线
Overline	文字上划线修饰。
LineThrough	穿过文本的修饰线。
Underline	文字下划线修饰。

TextInput

用来输入但行文本并支持响应输入事件

属性

设置提示文本
当我们平时使用输入框的时候，往往会有一些提示文字

TextInput({ placeholder: '请输入帐号' })

设置最大输入字符数

maxLength()

设置文本框输入类型
可以使用type 属性来设置输入框类型

TextInput({ placeholder: '请输入密码' })
  .type(InputType.Password)

InputType类型	描述
Normal	基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。
Pass word	密码输入模式。
Email	e-mail地址输入模式
Number	纯数字输入模式。
PhoneNumber9+	电话号码输入模式。

设置光标位置
可以使用TextInputController动态设置光位置

 controller: TextInputController = new TextInputController()
  this.controller.caretPosition(2)

获取输入文本
可以给TextInput 设置onChange 获取文本信息

 @State text: string = ''
 TextInput({ placeholder: '请输入账号' })
        .caretColor(Color.Blue)
        .onChange((value: string) => {
          this.text = value
        })

Button

主要用来响应点击事件，可以包含子组件。

属性

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

ButtonType类型	描述
Capsule	胶囊型按钮（圆角默认为高度的一半）
Circle	圆形按钮。
Normal	普通按钮（默认不带圆角

设置按钮点击事件
可以给Button绑定onClic k 事件，每当用户点击Button的时候，就会回调执行onClic k 方法

Button('登录', { type: ButtonType.Capsule, stateEffect: true })
  ...
  .onClick(() => {
  // 处理点击事件逻辑
  })

包含子组件
Button组件可以包含子组件，让您可以开发出更丰富多样的Button

原文地址:https://blog.csdn.net/weixin_46282323/article/d etails/134683885

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_17723.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

image 组件

Image 组件

Text组件

TextInput

Button

属性

相关文章

发表回复 取消回复

Im a g e 组件

发表回复取消回复