梅科尔工作室-鸿蒙笔记2_梅科尔鸿蒙

组件：

介绍：界面搭建与显示的最小单位。

分类：基础组件、容器组件、媒体组件、绘制组件、画布组件。

基础组件：

介绍：视图层的基本组成单元

包括：

image

介绍：用来渲染展示图片，它可以让界面变得更加丰富多彩。设置图片地址、宽和高。

设置缩放类型：

介绍：可以使用objectFit属性设置图片的缩放类型，objectFit的参数类型为ImageFit。

使用方法：

ImageFit包含以下几种类型：

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

Cover（默认值）：保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。

Auto：自适应显示。

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

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

None：保持原有尺寸显示。

加载网络图片：

Image组件支持加载网络图片，将图片地址换成网络图片地址进行加载。

使用说明：为了成功加载网络图片，您需要在module.json5文件中申明网络访问权限。

Text

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

文本样式：

使用方法：针对包含文本元素的组件

fontColor （ResourceColor） 设置文本的颜色

fontSize（Length | Resource） 设置文本的大小

fontStyle（FontStyle） 设置文本的样式

fontWeight（number | FontWeight | string） 设置文本的粗细

fontFamily（string | Resource） 设置文本的字体

设置文本对齐方式：

介绍：textAlign属性可以设置文本的对齐方式

使用方法：

Start（默认值）：水平对齐首部。

Center：水平居中对齐。

End：水平对齐尾部。

代码：

Text('HarmonyOS')

.width(200)

.textAlign(TextAlign.Start)

.backgroundColor(0xE6F2FD)

设置文本超长显示：

介绍：当文本内容较多超出了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})

.backgroundColor(0xE6F2FD)

设置文本装饰线：

介绍：使用decoration设置文本装饰线样式及其颜色，decoration包含type和color两个参数，其中type用于设置装饰线样式，参数类型为TextDecorationTyp，color为可选参数。

TextDecorationTyp包含以下几种类型：

None：不使用文本装饰线。

Overline：文字上划线修饰。

LineThrough：穿过文本的修饰线。

Underline：文字下划线修饰。

Textinput

介绍：用于输入单行文本，响应输入事件。

支持文本样式设置

设置输入提示文本：

使用placeholder属性可以实现。可以使用placeholderColor和placeholderFont分别设置提示文本的颜色和样式。

代码：

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

.placeholderColor(0x999999)

.placeholderFont({ size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic })

设置输入类型：

使用type属性来设置输入框类型。

分类：

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

Password：密码输入模式。

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

Number：纯数字输入模式。

代码：

TextInput({ placeholder: '请输入密码' })

.type(InputType.Password)

设置改变位置：

使用TextInputController动态设置光位置。

获取输入文本：

Button

介绍：主要用来响应点击操作，可以包含子组件。

设置按钮样式：

介绍：type用于定义按钮样式。

分类：

Capsule：胶囊型按钮（圆角默认为高度的一半）

Circle：圆形按钮。

Normal：普通按钮（默认不带圆角）。

设置按钮点击事件：

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

可以包含子组件：

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