【HarmonyOS Next之旅】基于ArkTS开发(三) -＞兼容JS的类Web开发(四) -＞构建用户界面(一)

组件类型	主要组件
容器组件	badge、dialog、div、form、list、list-item、list-item-group、panel、popup、refresh、stack、stepper、stepper-item、swiper、tabs、tab-bar、tab-content
基础组件	button、chart、divider、image、image-animator、input、label、marquee、menu、option、picker、picker-view、piece、progress、qrcode、rating、richtext、search、select、slider、span、switch、text、textarea、toolbar、toolbar-item、toggle
媒体组件	video
画布组件	canvas
栅格组件	grid-container、grid-row、grid-col
svg组件	svg、rect、circle、ellipse、path、line、polyline、polygon、text、tspan、textPath、animate、animateMotion、animateTransform

2 -> 布局说明

设备的基准宽度为720px(px为逻辑像素，非物理像素)，实际显示效果会根据实际屏幕宽度进行缩放。

其换算关系如下：

组件的width设为100px时，在宽度为720物理像素的屏幕上，实际显示为100物理像素；在宽度为1440物理像素的屏幕上，实际显示为200物理像素。

一个页面的基本元素包含标题区域、文本区域、图片区域等，每个基本元素内还可以包含多个子元素，根据需求还可以添加按钮、开关、进度条等组件。在构建页面布局时，需要对每个基本元素思考以下几个问题：

该元素的尺寸和排列位置
是否有重叠的元素
是否需要设置对齐、内间距或者边界
是否包含子元素及其排列位置
是否需要容器组件及其类型

将页面中的元素分解之后再对每个基本元素按顺序实现，可以减少多层嵌套造成的视觉混乱和逻辑混乱，提高代码的可读性，方便对页面做后续的调整。以下图为例进行分解：

图1 页面布局分解

图2 留言区布局分解

3 -> 添加标题行和文本区域

实现标题和文本区域最常用的是基础组件text。text组件用于展示文本，可以设置不同的属性和样式，文本内容需要写在标签内容区。在页面中插入标题和文本区域的示例如下：

<!-- test.hml -->
<div class="container">
  <text class="title-text">{
  
  {headTitle}}</text>
  <text class="paragraph-text">{
  
  {paragraphFirst}}</text>
  <text class="paragraph-text">{
  
  {paragraphSecond}}</text>
</div>

/* test.css */
.container {
  flex-direction: column;
  margin-top: 20px;
  margin-left: 30px;
}
.title-text {
  color: #1a1a1a;
  font-size: 50px;
  margin-top: 40px;
  margin-bottom: 20px;
}
.paragraph-text {
  color: #000000;
  font-size: 35px;
  line-height: 60px;
}

// test.js
export default {
  data: {
    headTitle: 'Capture the Beauty in This Moment',
    paragraphFirst: 'Capture the beauty of light during the transition and fusion of ice and water. At the instant of movement and stillness, softness and rigidity, force and beauty, condensing moving moments.',
    paragraphSecond: 'Reflecting the purity of nature, the innovative design upgrades your visual entertainment and ergonomic comfort. Effortlessly capture what you see and let it speak for what you feel.',
  },
}

4 -> 添加图片区域

添加图片区域通常用image组件来实现，使用的方法和text组件类似。

图片资源建议放在jsdefaultcommon目录下，common目录需自行创建。代码示例如下：

<!-- test.hml -->
<image class="img" src="{
  
  {middleImage}}"></image>

/* test.css */
.img {  
  margin-top: 30px;
  margin-bottom: 30px;
  height: 385px;
}

// test.js
export default {
  data: {
    middleImage: '/common/ice.png',
  },
}

5 -> 添加留言区域

留言框的功能为：用户输入留言后点击完成，留言区域即显示留言内容；用户点击右侧的删除按钮可删除当前留言内容并重新输入。

留言区域由div、text、input关联click事件实现。开发者可以使用input组件实现输入留言的部分，使用text组件实现留言完成部分，使用commentText的状态标记此时显示的组件(通过if属性控制)。在包含文本完成和删除的text组件中关联click事件，更新commentText状态和inputValue的内容。具体的实现示例如下：

<!-- test.hml -->
<div class="container">
  <text class="comment-title">Comment</text>
  <div if="{
  
  {!commentText}}">
    <input class="comment" value="{
  
  {inputValue}}" onchange="updateValue()"></input>
    <text class="comment-key" onclick="update" focusable="true">Done</text>
  </div>
  <div if="{
  
  {commentText}}">
    <text class="comment-text" focusable="true">{
  
  {inputValue}}</text>
    <text class="comment-key" onclick="update" focusable="true">Delete</text>
  </div>
</div>

/* test.css */
.container {
  margin-top: 24px;
  background-color: #ffffff;
}
.comment-title {
  font-size: 40px;
  color: #1a1a1a;
  font-weight: bold;
  margin-top: 40px;
  margin-bottom: 10px;
}
.comment {
  width: 550px;
  height: 100px;
  background-color: lightgrey;
}
.comment-key {
  width: 150px;
  height: 100px;
  margin-left: 20px;
  font-size: 32px;
  color: #1a1a1a;
  font-weight: bold;
}
.comment-key:focus {
  color: #007dff;
}
.comment-text {
  width: 550px;
  height: 100px;
  text-align: left;
  line-height: 35px;
  font-size: 30px;
  color: #000000;
  border-bottom-color: #bcbcbc;
  border-bottom-width: 0.5px;
}

// test.js
export default {
  data: {
    inputValue: '',
    commentText: false,
  },
  update() {
    this.commentText = !this.commentText;
  },
  updateValue(e) {
    this.inputValue = e.text;
  },
}

6 -> 添加组件

要将页面的基本元素组装在一起，需要使用容器组件。在页面布局中常用到三种容器组件，分别是div、list和tabs。在页面结构相对简单时，可以直接用div作为容器，因为div作为单纯的布局容器，可以支持多种子组件，使用起来更为方便。

6.1 -> List组件

当页面结构较为复杂时，如果使用div循环渲染，容易出现卡顿，因此推荐使用list组件代替div组件实现长列表布局，从而实现更加流畅的列表滚动体验。需要注意的是，list仅支持list-item作为子组件，具体的使用示例如下：

<!-- test.hml -->
<list class="list">
  <list-item type="listItem" for="{
  
  {textList}}">
    <text class="desc-text">{
  
  {$item.value}}</text>
  </list-item>
</list>

/* test.css */
.desc-text {
  width: 683.3px;
  font-size: 35.4px;
}

// test.js
export default {
  data: {
    textList:  [{value: 'JS FA'}],
  },
}

为避免示例代码过长，以上示例的list中只包含一个list-item，list-item中只有一个text组件。在实际应用中可以在list中加入多个list-item，同时list-item下可以包含多个其他子组件。

6.2 -> Tabs组件

当页面经常需要动态加载时，推荐使用tabs组件。tabs组件支持change事件，在页签切换后触发。tabs组件仅支持一个tab-bar和一个tab-content。具体的使用示例如下：

<!-- test.hml -->
<tabs>
  <tab-bar>
    <text>Home</text>
    <text>Index</text>
    <text>Detail</text>
  </tab-bar>
  <tab-content>
    <image src="{
  
  {homeImage}}"></image>
    <image src="{
  
  {indexImage}}"></image>
    <image src="{
  
  {detailImage}}"></image>
  </tab-content>
</tabs>

// test.js
export default {
  data: {
    homeImage: '/common/home.png',
    indexImage: '/common/index.png',
    detailImage: '/common/detail.png',
  },
}

tab-content组件用来展示页签的内容区，高度默认充满tabs剩余空间。

感谢各位大佬支持！！！

互三啦！！！