基础组件介绍
组件(Component)是界面搭建与显示的最小单位,HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件,我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。
组件根据功能可以分为以下五大类:基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件是视图层的基本组成单元,包括Text、Image、TextInput、Button、LoadingProgress等,例如下面这个常用的登录界面就是由这些基础组件组合而成。
Text
Text组件用于在界面上展示一段文本信息,可以包含子组件Span。
文本样式
针对包含文本元素的组件,例如Text、Span、Button、TextInput等,可使用fontColor、fontSize、fontStyle、 fontWeight、fontFamily这些文本样式,分别设置文本的颜色、大小、样式、粗细以及字体。
属性
![](https://img-blog.csdnimg.cn/img_convert/530612e1b0c189818c65d144519ca5a2.png)
设置文本对齐方式
代码介绍
使用textAlign属性可以设置文本的对齐方式
示例代码如下:
![](https://img-blog.csdnimg.cn/img_convert/889eb8b049e52487e63e4590e7a3425e.png)
参数类型
textAlign参数类型为TextAlign,定义了以下几种类型:
①Start(默认值):水平对齐首部。
②Center:水平居中对齐。
③End:水平对齐尾部。
设置文本超长显示
代码介绍
当文本内容较多超出了Text组件范围的时候,可以使用textOverflow设置文本截取方式,需配合maxLines使用,单独设置不生效,maxLines用于设置文本显示最大行数。下面的示例代码将textOverflow设置为Ellipsis ,它将显示不下的文本用 “...” 表示:
![](https://img-blog.csdnimg.cn/img_convert/4139ba84cc58d9325c870131b7451197.png)
效果图
![](https://img-blog.csdnimg.cn/img_convert/072a3c58bc73bcc923cf766fcd5b8867.png)
设置文本装饰线
用法介绍
使用decoration设置文本装饰线样式及其颜色。decoration包含type和color两个参数,其中type用于设置装饰线样式,参数类型为TextDecorationTyp,color为可选参数。
代码如下:
![](https://img-blog.csdnimg.cn/img_convert/b17e9abab1107fde83530aa11fa30c64.png)
参数类型
None:不使用文本装饰线。
Overline:文字上划线修饰。
LineThrough:穿过文本的修饰线
Underline:文字下划线修饰。
Image
Image组件用来渲染展示图片,它可以让界面变得更加丰富多彩。只需要给Image组件设置图片地址、宽和高,图片就能加载出来,示例如下:
![](https://img-blog.csdnimg.cn/img_convert/75e138cc05df214beb6f89ef41fb3caf.png)
设置缩放类型
为了使图片在页面中有更好的显示效果,通过objectFit属性设置图片的缩放类型,objectFit的参数类型为ImageFit。
代码介绍
将图片加载到Image组件,设置宽高各100,设置objectFit为Cover(默认值),设置图片背景色为灰色0xCCCCCC。示例代码如下:
![](https://img-blog.csdnimg.cn/img_convert/3bf9bb6fc4345e067e0f21ff37eaa0bf.png)
ImageFit类型
Contain:保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内。
Cover(默认值):保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界。
Auto:自适应显示。
Fill:不保持宽高比进行放大缩小,使得图片充满显示边界。
ScaleDown:保持宽高比显示,图片缩小或者保持不变。
None:保持原有尺寸显示。
3. TextInput
代码介绍
TextInput组件用于输入单行文本,响应输入事件。TextInput的使用也非常广泛,例如应用登录账号密码、发送消息等。和Text组件一样,TextInput组件也支持文本样式设置,下面的示例代码实现了一个简单的输入框:
![](https://img-blog.csdnimg.cn/img_convert/cd1bcf9c389ac3c2c4251378a0f900dd.png)
设置输入提示文本
在使用输入框时,往往会有一些提示文字。例如登录账号的时候会有“请输入账号”这样的文本提示,当用户输入内容之后,提示文本就会消失,这种提示功能使用placeholder属性就可以轻松的实现。还可以使用placeholderColor和placeholderFont分别设置提示文本的颜色和样式。
设置输入类型
使用type属性来设置输入框类型。例如密码输入框,内容会显示为“......”,针对这种场景,将type属性设置为InputType.Password就可以实现。
![](https://img-blog.csdnimg.cn/img_convert/0c5103ea84c65b87095075a660f22648.png)
输入类型
type的参数类型为InputType,包含以下几种输入类型:
Normal:基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。
Password:密码输入模式。
Email:e-mail地址输入模式。
Number:纯数字输入模式。
4.buttom
Button组件主要用来响应点击操作,可以包含子组件。
代码示例
![](https://img-blog.csdnimg.cn/img_convert/bbfa038250e3e1967c3dcaa4c641eff7.png)
设置按钮样式
type用于定义按钮样式,示例代码中ButtonType.Capsule表示胶囊形按钮;stateEffect用于设置按钮按下时是否开启切换效果,当状态置为false时,点击效果关闭,默认值为true。
![](https://img-blog.csdnimg.cn/img_convert/205447afe849bbdb3d8388b62e191ed2.png)
包含子组件
Button组件可以包含子组件,让您可以开发出更丰富多样的Button,下面的示例代码中Button组件包含了一个Image组件:
![](https://img-blog.csdnimg.cn/img_convert/3a4a6807cf0f283122fe28d5e5d5b6f3.png)
![](https://img-blog.csdnimg.cn/img_convert/4f99887d2495fd9d12efd40dbbc76938.png)
5. LoadingProgress
LoadingProgress组件用于显示加载进展,比如应用的登录界面,当我们点击登录的时候,显示的“正在登录”的进度条状态。LoadingProgress的使用非常简单,只需要设置颜色和宽高就可以了。
![](https://img-blog.csdnimg.cn/img_convert/15755a707d8f414ca7e73de467ecf823.png)
Column&Row组件的使用
布局容器概念
Column表示沿垂直方向布局的容器。
Row表示沿水平方向布局的容器。
主轴和交叉轴概念
在布局容器中,默认存在两根轴,分别是主轴和交叉轴,这两个轴始终是相互垂直的。不同的容器中主轴的方向不一样的。
主轴
在Column容器中的子组件是按照从上到下的垂直方向布局的,其主轴的方向是垂直方向;在Row容器中的组件是按照从左到右的水平方向布局的,其主轴的方向是水平方向。
交叉轴
与主轴垂直相交的轴线,如果主轴是垂直方向,则交叉轴就是水平方向;如果主轴是水平方向,则交叉轴是垂直方向。
组件使用
![](https://img-blog.csdnimg.cn/img_convert/37eb01ebc6c9ea1a92354f5892b60e1d.png)