【Harmony OS】【ArkUI】ets开发 创建视图与构建布局_ets 布局剩下区域全部给一个容器

前言：在先前的鸿蒙ArkUI ets开发的学习中，笔者已经对基础的页面布局、数据连接、图片动画的绘制的知识进行了分享。这次我们同样来分享ets开发的学习基础UI知识，但这次我们返璞归真，从最基础的视图创建开始学习。夯实基础才能在今后的学习中融会贯通，相信通过这次的学习，对之前分享的内容能收获更多。

本篇是以HarmonyOS官网的基于TS扩展的声明式开发范式文档，体验声明式UI的创建简单视图为基础进行编写。所以笔者将原文进行整合，提取出其中的要点，以便通俗易懂地呈现给读者，希望能帮助你快速了解Harmony的ETS开发，学会简单的视图创建与布局构建的学习。本篇最后会贴上参考原文链接。

首先讲一下大致的思路，我们要创建视图，首先需要通过容器组件Stack、Flex和一些基本的组件进行构建，然后完成自定义的组件的创建。从容器组件的角度出发，本篇主要介绍的是Stack布局和Flex布局，其他的布局就由读者自行探索。所以笔者将整个功能的实现分为了两个步骤，构建Stack布局和构建Flex布局，这与原篇大致相同。

1.         构建Stack布局。

在之前的学习中，我们已经建立的项目，所以之前基础的创建项目就不详细写了，直接开始构建布局。

1)       创建Stack组件，将Text组件、Image组件放进Stack组件中，使其成为Stack组件的子组件。Stack组件为堆叠组件，可以包含一个或多个子组件，其特点是后一个子组件覆盖前一个子组件。

指定Image组件的url，图片资源放在resources下的rawfile文件夹内，引用rawfile下资源时使用“$rawfile('filename')”的形式，filename为rawfile目录下的文件相对路径。当前$rawfile仅支持Image控件引用图片资源。

@Entry
 
@Component
 
struct MyComponent {
 
  build() {
 
    Stack() {
 
      Image($rawfile('icon.png'))
 
      Text('Tomato')
 
        .fontSize(26)
 
        .fontWeight(500)
 
    }
 
  }
 
}

2)       除指定图片路径外，也可以使用引用媒体资源符$r引用资源，需要遵循resources文件夹的资源限定词的规则。将图片放到resources-base-media