鸿蒙(HarmonyOS)应用开发——基础组件
组件
组件化是一种将复杂的前端应用程序分解成小的、独立的部分的方法。这些部分被称为组件，它们可以重复使用，可以与其他组件组合使用以创建更复杂的组件，并且它们有自己的生命周期和状态。
组件化的目的是提高开发效率和代码重用率，使开发人员更专注于组件自身的实现，而不是整个应用程序。这样可以提高代码的可维护性和可扩展性，并且减少了程序出错的机会。
组件是界面搭建与显示的最小单位；
Image 组件
Image 用来渲染展示图片的组件，支持加载本地和网络图片
语法
Image(src: string|PixelMap|Resourece)
- string
访问网络图片、本地图片
访问网络图片时，需要在module.json5文件中添加网络访问权限
‘module’:{ 'reqPermissinos':[ {"name":"ohos.permission.INTERNET"} ] }
- PixelMap
PixelMap 为图像像素类，用于读取或写入图像数据以及获取图像信息。 - Resource 类型
使用时，需要先将图片放在resource 的 media或 rawfile目录下
属性
width()| height()支持number、string和resource
Text组件
用于在界面上展示一段文本信息，可以包含子组件
语法
Text(content?:string|resouce)
属性
- 文本样式
可使用fontColor、fontSize、fontStyle、fontWeight、fontFamily文本样式
| 名称 | 参数类型 | 描述 |
|---|---|---|
| fontColor | ResouceColor | 设置文本颜色 |
| fontSize | Length /Resource | 设置文本尺寸，Length为number类型时，使用fp单位。 |
| fontStyle | FontStyle | 设置文本的字体样式。默认值：FontStyle.Normal。 |
| fontWeight | number / FontWeigh /string | 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular”、“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})
- 设置文本装饰线
使用decoration设置文本装饰线样式及其颜色
decoration({ type: TextDecorationType.Underline, color: Color.Black })
| TextDecorationType类型 | 描述 |
|---|---|
| None | 不使用文本装饰线 |
| Overline | 文字上划线修饰。 |
| LineThrough | 穿过文本的修饰线。 |
| Underline | 文字下划线修饰。 |
TextInput
用来输入但行文本并支持响应输入事件
属性
- 设置提示文本
当我们平时使用输入框的时候，往往会有一些提示文字
TextInput({ placeholder: '请输入帐号' })
- 设置最大输入字符数
maxLength()
- 设置文本框输入类型
可以使用type属性来设置输入框类型
TextInput({ placeholder: '请输入密码' }).type(InputType.Password)
| InputType类型 | 描述 |
|---|---|
| Normal | 基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。 |
| Password | 密码输入模式。 |
| 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.Capsule表示胶囊形按钮；stateEffect用于设置按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭，默认值为true。
| ButtonType类型 | 描述 |
|---|---|
| Capsule | 胶囊型按钮（圆角默认为高度的一半） |
| Circle | 圆形按钮。 |
| Normal | 普通按钮（默认不带圆角 |
- 设置按钮点击事件
可以给Button绑定onClick事件，每当用户点击Button的时候，就会回调执行onClick方法
Button('登录', { type: ButtonType.Capsule, stateEffect: true })....onClick(() => {// 处理点击事件逻辑})
- 包含子组件
Button组件可以包含子组件，让您可以开发出更丰富多样的Button