HarmonyOS建立一个漂亮的页面_4·构建漂亮的页面·课后作业

1.常用基础组件

基础组件是视图层的基本组成单元，包括Text、Image、TextInput、Button、LoadingProgress等。

（1）Text组件用于在界面上展示一段文本信息，可以包含子组件Span。

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

（3）TextInput组件用于输入单行文本，响应输入事件。TextInput的使用也非常广泛，例如应用登录账号密码、发送消息等。和Text组件一样，TextInput组件也支持文本样式设置，下面的示例代码实现了一个简单的输入框：

（4）Button组件主要用来响应点击操作，可以包含子组件。

2.构建简单的页面

线性布局容器表示按照垂直方向或者水平方向排列子组件的容器，ArkTS提供了Column和Row容器来实现线性布局。

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

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

主轴和交叉轴的概念

在布局容器中，默认存在两根轴，分别是主轴和交叉轴，这两个轴始终是相互垂直的。不同的容器中主轴的方向不一样的。

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

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

在Column容器里，依次是Image、Text、TextInput、Button等基础组件，还有两组组件是使用Row容器组件来实现的，主要代码如下：