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容器中的组件是按照从左到右的水平方向布局的,其主轴的方向是水平方向
交叉轴:与主轴垂直相交的轴线,如果主轴是垂直方向,则交叉轴就是水平方向;如果主轴是水平方向,则交叉轴是垂直方向。