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

1.Text组件

文本样式

针对包含文本元素的组件，例如Text、Span、Button、TextInput等，可使用fontColor、fontSize、fontStyle、 fontWeight、fontFamily这些文本样式，分别设置文本的颜色、大小、样式、粗细以及字体

文本对齐方式

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

文本超长显示

当文本内容较多超出了Text组件范围的时候，您可以使用textOverflow设置文本截取方式，需配合maxLines使用，单独设置不生效，maxLines用于设置文本显示最大行数。下面的示例代码将textOverflow设置为Ellipsis ，它将显示不下的文本用 “...” 表示

设置文本装饰线

None：不使用文本装饰线

Overline：文字上划线修饰

LineThrough：穿过文本的修饰线。

Underline：文字下划线修饰

2.image

Image组件用来渲染展示图片，它可以让界面变得更加丰富多彩。只需要给Image组件设置图片地址、宽和高，图片就能加载出来，示例如下：

Image($r("app.media.icon"))
  .width(100)
  .height(100)

3. TextInput

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

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

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

2.Password：密码输入模式。

3.Number：纯数字输入模式

4.Button

Button组件主要用来响应点击操作，可以包含子组件。下面的示例代码实现了一个“登录按钮”

2.布局容器

Column表示沿垂直方向布局的容器。

Row表示沿水平方向布局的容器。

主轴：在Column容器中的子组件是按照从上到下的垂直方向布局的，其主轴的方向是垂直方向；在Row容器中的组件是按照从左到右的水平方向布局的，其主轴的方向是水平方向

交叉轴：与主轴垂直相交的轴线，如果主轴是垂直方向，则交叉轴就是水平方向；如果主轴是水平方向，则交叉轴是垂直方向。