HarmonyOS构建漂亮的页面
一、页面基本元素介绍
- 常用基础组件
组件介绍:
组件(Component)是界面搭建与显示的最小单位,HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件,我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。
组件根据功能可以分为以下五大类:基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件是视图层的基本组成单元,包括Text、Image、TextInput、Button、LoadingProgress等
2.Text
Text组件用于在界面上展示一段文本信息,可以包含子组件Span。
文本样式
针对包含文本元素的组件,例如Text、Span、Button、TextInput等,可使用fontColor、fontSize、fontStyle、 fontWeight、fontFamily这些文本样式,分别设置文本的颜色、大小、样式、粗细以及字体
![](https://i-blog.csdnimg.cn/blog_migrate/b0669411d6b8161906b585eee986ba13.png)
设置文本对齐方式
使用textAlign属性可以设置文本的对齐方式
textAlign参数类型为TextAlign,定义了以下几种类型:
Start(默认值):水平对齐首部。
![](https://i-blog.csdnimg.cn/blog_migrate/a5510823e083c883388a65b0c3d694a6.png)
Center:水平居中对齐。
![](https://i-blog.csdnimg.cn/blog_migrate/6818acb4a7bc97441c30b97d84d18148.png)
End:水平对齐尾部。
![](https://i-blog.csdnimg.cn/blog_migrate/5cb4fb9e68afb2886de206295555f237.png)
设置文本超长显示
当文本内容较多超出了Text组件范围的时候,您可以使用textOverflow设置文本截取方式,需配合maxLines使用,单独设置不生效,maxLines用于设置文本显示最大行数。下面的示例代码将textOverflow设置为Ellipsis ,它将显示不下的文本用 “...” 表示:
![](https://i-blog.csdnimg.cn/blog_migrate/06fd2d898ecd1cbafa36cf04dcff7b26.png)
设置文本装饰线
使用decoration设置文本装饰线样式及其颜色,大家在浏览网页的时候经常可以看到装饰线,例如带有下划线超链接文本。decoration包含type和color两个参数,其中type用于设置装饰线样式,参数类型为TextDecorationTyp,color为可选参数。
下面的示例代码给文本设置了下划线,下划线颜色为黑色
3. Image
Image组件用来渲染展示图片,它可以让界面变得更加丰富多彩。只需要给Image组件设置图片地址、宽和高,图片就能加载出来
![](https://i-blog.csdnimg.cn/blog_migrate/8173ada76cea8bb4a2db1417723f5e7a.png)
4 .TextInput
TextInput组件用于输入单行文本,响应输入事件。TextInput的使用也非常广泛,例如应用登录账号密码、发送消息等。和Text组件一样,TextInput组件也支持文本样式设置,下面的示例代码实现了一个简单的输入框:
![](https://i-blog.csdnimg.cn/blog_migrate/3e4d0907f9b5a3797bb7b0663215ef98.png)
设置输入提示文本
当我们平时使用输入框的时候,往往会有一些提示文字。例如登录账号的时候会有“请输入账号”这样的文本提示,当用户输入内容之后,提示文本就会消失,这种提示功能使用placeholder属性就可以轻松的实现。您还可以使用placeholderColor和placeholderFont分别设置提示文本的颜色和样式
![](https://i-blog.csdnimg.cn/blog_migrate/efa31595f00fb00f3b2515bfd3046160.png)
5. Button
Button组件主要用来响应点击操作,可以包含子组件。下面的示例代码实现了一个“登录按钮”:
![](https://i-blog.csdnimg.cn/blog_migrate/e6375c588d4251bf7577b26743795e22.png)
二、Column&Row组件的使用
1 .概述
一个丰富的页面需要很多组件组成,那么,我们如何才能让这些组件有条不紊地在页面上布局呢?这就需要借助容器组件来实现。
容器组件是一种比较特殊的组件,它可以包含其他的组件,而且按照一定的规律布局,帮助开发者生成精美的页面。容器组件除了放置基础组件外,也可以放置容器组件,通过多层布局的嵌套,可以布局出更丰富的页面。
ArkTS为我们提供了丰富的容器组件来布局页面,本文将以构建登录页面为例,介绍Column和Row组件的属性与使用。
![](https://i-blog.csdnimg.cn/blog_migrate/7d2b0c54110f4d9d811ff261c11706de.png)
2 组件介绍
布局容器概念
线性布局容器表示按照垂直方向或者水平方向排列子组件的容器,ArkTS提供了Column和Row容器来实现线性布局。
Column表示沿垂直方向布局的容器。
Row表示沿水平方向布局的容器。
主轴和交叉轴概念
在布局容器中,默认存在两根轴,分别是主轴和交叉轴,这两个轴始终是相互垂直的。不同的容器中主轴的方向不一样的。
主轴:在Column容器中的子组件是按照从上到下的垂直方向布局的,其主轴的方向是垂直方向;在Row容器中的组件是按照从左到右的水平方向布局的,其主轴的方向是水平方向。
![](https://i-blog.csdnimg.cn/blog_migrate/7ff91c6c121c49821916687b012d1619.png)
交叉轴:与主轴垂直相交的轴线,如果主轴是垂直方向,则交叉轴就是水平方向;如果主轴是水平方向,则交叉轴是垂直方向。
![](https://i-blog.csdnimg.cn/blog_migrate/f9c8ac2b61f5894d2dec6d076e87e74b.png)
属性介绍
![](https://i-blog.csdnimg.cn/blog_migrate/5d46bd10ee2ea60c88d5fe34de76ef3f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/df56d039f0ff2e15f903060d7fd52c2d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8e6f2e8de6ecaffc5666e43078a193d6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a8a7de0aec6baf6e3d0efccda5e30f5e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ce1c118e0e59839ee03bea73af6130b4.png)
![](https://i-blog.csdnimg.cn/blog_migrate/40c2090a506b699975de987b58747310.png)
![](https://i-blog.csdnimg.cn/blog_migrate/12c6ad8cf202e652c8312e2abb5c7d12.png)
2. 交叉轴方向的对齐(alignItems)
子组件在交叉轴方向上的对齐方式使用alignItems属性来设置。
Column容器的主轴是垂直方向,交叉轴是水平方向,其参数类型为HorizontalAlign(水平对齐),HorizontalAlign定义了以下几种类型:
![](https://i-blog.csdnimg.cn/blog_migrate/49436502f6361f4276be994d93629372.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3a6ccba6d53d8164dabb9b7d0837bc22.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7b77fdd2d5305ea197f89deda5381401.png)
![](https://i-blog.csdnimg.cn/blog_migrate/01784485c3139efb14bf26b2b1e323a0.png)