梅科尔工作室-孙溢博-鸿蒙笔记2

一、组件

（一）、基础组件

1、Text组件

text组件是文本组件，用来添加文本，可以通过以下文本样式的属性调整文本的颜色、大小、样式、粗细以及字体。

其中文本超长显示是指如果文本长度超过文本框长度，超出部分会以。。。代替

2、TextInput组件

用于输入单行文本，响应输入事件，通常用于登录界面、发送短信等。、

该组件具有以下属性：

（1）、提示文本：

在‘placeholder’中输入提示文本。效果如下。

（2）、输入类型：

我们平时在输入密码时，输入框中的内容会被......代替，这就用到了密码属性

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

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

  

• Password：密码输入模式。

  

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

  

• Number：纯数字输入模式。

  

 3、Button组件

 Button($r('app.string.login'), { type: ButtonType.Capsule, stateEffect: true })

这是按钮组件，通常搭配时间使用，可以调整的参数有：按钮样式、按钮点击事件、包含子组件

（1）、按钮样式

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

  

• Circle：圆形按钮。

  

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

  

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

（2）、按钮点击事件

设置当我们点下按钮后发生的事件。可以给Button绑定onClick事件，每当用户点击Button的时候，就会回调执行onClick方法，调用里面的逻辑代码。

 （3）、包含子组件

在按钮中，我们可以使用文本组件、图片组件等，并且我们可以调整这些内部组件的大小等属性。

4、Image组件

Image($r("app.media.image2"))
  .objectFit(ImageFit.Cover)
  .backgroundColor(0xCCCCCC)
  .width(100)
  .height(100) 

这是图片组件，可以通过.width、.height来调整图片的宽与高。

ImageFit包含以下几种类型：

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

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

• Auto：自适应显示。

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

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

• None：保持原有尺寸显示。

（二）、容器组件

1、column、row

column组件可以看做沿垂直方向布局的容器。

row组件为沿水平方向的容器。

2、主轴、交叉轴

容器中存在两条轴：主轴与交叉轴。

在Column容器中的子组件是按照从上到下的垂直方向布局的，其主轴的方向是垂直方向；在Row容器中的组件是按照从左到右的水平方向布局的，其主轴的方向是水平方向。与主轴垂直相交的轴线，如果主轴是垂直方向，则交叉轴就是水平方向；如果主轴是水平方向，则交叉轴是垂直方向。

3、轴的属性

（1）、justifyContent

设置子组件在主轴方向上的对齐格式。

（2）、alignItems

设置子组件在交叉轴方向上的对齐格式。

（3）、参数类型是FlexAlign，FlexAlign定义了以下几种类型：

主轴方向上：

• Start：元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
• Center：元素在主轴方向中心对齐，第一个元素与行首的距离以及最后一个元素与行尾距离相同。
• End：元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
• SpaceBetween：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
• SpaceAround：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
• SpaceEvenly：元素在主轴方向等间距布局，无论是相邻元素还是边界元素到容器的间距都一样。

交叉轴方向上：

子组件在交叉轴方向上的对齐方式使用alignItems属性来设置。

Column容器的主轴是垂直方向，交叉轴是水平方向，其参数类型为HorizontalAlign（水平对齐），HorizontalAlign定义了以下几种类型：

• Start：设置子组件在水平方向上按照起始端对齐。
• enter（默认值）：设置子组件在水平方向上居中对齐。

  目录

  一、组件

  （一）、基础组件

  1、Text组件

  2、TextInput组件

   3、Button组件

  4、Image组件

  （二）、容器组件

  1、column、row

  2、主轴、交叉轴

  3、轴的属性

  ---

• End：设置子组件在水平方向上按照末端对齐。

• Row容器的主轴是水平方向，交叉轴是垂直方向，其参数类型为VerticalAlign（垂直对齐），VerticalAlign定义了以下几种类型：

• Top：设置子组件在垂直方向上居顶部对齐。
• Center（默认值）：设置子组件在竖直方向上居中对齐。
• Bottom：设置子组件在竖直方向上居底部对齐。