梅科尔工作室-张宇-鸿蒙笔记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。