HarmonyOS Next开辟学习手册——UI开辟（组件布局）

组件介绍

组件（Component）是构建页面的焦点，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单位。组件之间相互独立，随取随用，也可以在需求雷同的地方重复使用。关于组件的详细参考文档请参见 组件 。
开辟者还可以通过组件间合理的搭配定义满足业务需求的新组件，减少开辟量，自定义组件的开辟方法请参见 自定义组件 。
组件分类

根据组件的功能，可以分为以下六大类：
组件类型主要组件容器组件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-colsvg组件svg、rect、circle、ellipse、path、line、polyline、polygon、text、tspan、textPath、animate、animateMotion、animateTransform 布局说明

设备的基准宽度为720px（px为逻辑像素，非物理像素），实际体现结果会根据实际屏幕宽度进行缩放。
其换算关系如下：
组件的width设为100px时，在宽度为720物理像素的屏幕上，实际体现为100物理像素；在宽度为1440物理像素的屏幕上，实际体现为200物理像素。
一个页面的基本元素包罗标题区域、文本区域、图片区域等，每个基本元素内还可以包罗多个子元素，开辟者根据需求还可以添加按钮、开关、进度条等组件。在构建页面布局时，需要对每个基本元素思考以下几个问题：

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

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

图2 留言区布局分解

添加标题行和文本区域

实现标题和文本区域最常用的是底子组件text。text组件用于展示文本，可以设置不同的属性和样式，文本内容需要写在标签内容区，完整属性和样式信息请参考 text 。在页面中插入标题和文本区域的示比方下：

1. <!-- xxx.hml -->
2. <div class="container">
3.   <text class="title-text">{{headTitle}}</text>
4.   <text class="paragraph-text">{{paragraphFirst}}</text>
5.   <text class="paragraph-text">{{paragraphSecond}}</text>
6. </div>

复制代码

---

1. .container {
2.   flex-direction: column;
3.   margin-top: 20px;
4.   margin-left: 30px;
5. }
6. .title-text {
7.   color: #1a1a1a;
8.   font-size: 50px;
9.   margin-top: 40px;
10.   margin-bottom: 20px;
11.   font-weight: 700;
12. }
13. .paragraph-text {
14.   width: 95%;
15.   color: #000000;
16.   font-size: 35px;
17.   line-height: 60px;
18. }

复制代码

---

1. export default {
2.   data: {
3.     headTitle: 'Capture the Beauty in Moment',
4.     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.',
5.     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.',
6.   },
7. }

复制代码

添加图片区域

添加图片区域通常用 image 组件来实现，使用的方法和text组件雷同。
图片资源发起放在js\default\common目次下，common目次需自行创建，详细的目次结构见 目次结构 。代码示比方下：

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

复制代码

---

1. /* xxx.css */
2. .img {  
3.   margin-top: 30px;
4.   margin-bottom: 30px;
5.   height: 385px;
6. }

复制代码

---

1. // xxx.js
2. export default {
3.   data: {
4.     middleImage: '/common/ice.png',
5.   },
6. }

复制代码

添加留言区域

留言框的功能为：用户输入留言后点击完成，留言区域即体现留言内容；用户点击右侧的删除按钮可删除当前留言内容并重新输入。
留言区域由div、text、input关联click事件实现。开辟者可以使用input组件实现输入留言的部分，使用text组件实现留言完成部分，使用commentText的状态标记此时体现的组件（通过if属性控制）。在包罗文本完成和删除的text组件中关联click事件，更新commentText状态和inputValue的内容。具体的实现示比方下：

1. <!-- xxx.hml -->
2. <div class="container">
3.   <text class="comment-title">Comment</text>
4.   <div if="{{!commentText}}">
5.     <input class="comment" value="{{inputValue}}" onchange="updateValue()"></input>
6.     <text class="comment-key" onclick="update" focusable="true">Done</text>
7.   </div>
8.   <div if="{{commentText}}">
9.     <text class="comment-text" focusable="true">{{inputValue}}</text>
10.     <text class="comment-key" onclick="update" focusable="true">Delete</text>
11.   </div>
12. </div>
13. /* xxx.css */
14. .container {
15.   margin-top: 24px;
16.   background-color: #ffffff;
17. }
18. .comment-title {
19.   font-size: 40px;
20.   color: #1a1a1a;
21.   font-weight: bold;
22.   margin-top: 40px;
23.   margin-bottom: 10px;
24. }
25. .comment {
26.   width: 550px;
27.   height: 100px;
28.   background-color: lightgrey;
29. }
30. .comment-key {
31.   width: 150px;
32.   height: 100px;
33.   margin-left: 20px;
34.   font-size: 32px;
35.   color: #1a1a1a;
36.   font-weight: bold;
37. }
38. .comment-key:focus {
39.   color: #007dff;
40. }
41. .comment-text {
42.   width: 550px;
43.   height: 100px;
44.   text-align: left;
45.   line-height: 35px;
46.   font-size: 30px;
47.   color: #000000;
48.   border-bottom-color: #bcbcbc;
49.   border-bottom-width: 0.5px;
50. }
51. // xxx.js
52. export default {
53.   data: {
54.     inputValue: '',
55.     commentText: false,
56.   },
57.   update() {
58.     this.commentText = !this.commentText;
59.   },
60.   updateValue(e) {
61.     this.inputValue = e.text;
62.   },
63. }

复制代码

添加容器

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

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

1. <!-- xxx.hml -->
2. <list class="list">
3.   <list-item type="listItem" for="{{textList}}">
4.     <text class="desc-text">{{$item.value}}</text>
5.   </list-item>
6. </list>

复制代码

---

1. /* xxx.css */
2. .desc-text {
3.   width: 683.3px;
4.   font-size: 35.4px;
5. }

复制代码

---

1. // xxx.js
2. export default {
3.   data: {
4.     textList:  [{value: 'JS FA'}],
5.   },
6. }

复制代码

为制止示例代码过长，以上示例的list中只包罗一个list-item，list-item中只有一个text组件。在实际应用中可以在list中加入多个list-item，同时list-item下可以包罗多个其他子组件。
Tabs组件
当页面经常需要动态加载时，保举使用tabs组件。tabs组件支持change事件，在页签切换后触发。tabs组件仅支持一个tab-bar和一个tab-content。具体的使用示比方下：

1. <!-- xxx.hml -->
2. <tabs>
3.   <tab-bar>
4.     <text>Home</text>
5.     <text>Index</text>
6.     <text>Detail</text>
7.   </tab-bar>
8.   <tab-content>
9.     <image src="{{homeImage}}"></image>
10.     <image src="{{indexImage}}"></image>
11.     <image src="{{detailImage}}"></image>
12.   </tab-content>
13. </tabs>

复制代码

---

1. // xxx.js
2. export default {
3.   data: {
4.     homeImage: '/common/home.png',
5.     indexImage: '/common/index.png',
6.     detailImage: '/common/detail.png',
7.   },
8. }

复制代码

tab-content组件用来展示页签的内容区，高度默认布满tabs剩余空间。
鸿蒙全栈开辟全新学习指南

有许多小伙伴不知道学习哪些鸿蒙开辟技术？不知道需要重点把握哪些鸿蒙应用开辟知识点？而且学习时频繁踩坑，最终浪费大量时间。所以要有一份实用的鸿蒙（HarmonyOS NEXT）学习蹊径与学习文档用来跟着学习是非常有必要的。
针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开辟技术的学习蹊径，包罗了鸿蒙开辟必把握的焦点知识要点，内容有（ArkTS、ArkUI开辟组件、Stage模子、多端部署、分布式应用开辟、WebGL、元服务、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开辟、体系定制移植等等）鸿蒙（HarmonyOS NEXT）技术知识点。
本蹊径共分为四个阶段：

第一阶段：鸿蒙初中级开辟必备技能

第二阶段：鸿蒙南北双向高工技能底子：gitee.com/MNxiaona/733GH

第三阶段：应用开辟中高级就业技术

第四阶段：全网首发-工业级南向设备开辟就业技术：gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开辟学习手册》（共计892页）

怎样快速入门？

1.基本概念
2.构建第一个ArkTS应用
3.……

开辟底子知识:gitee.com/MNxiaona/733GH

1.应用底子知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私掩护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开辟

1.Ability开辟
2.UI开辟
3.公共事件与关照
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开辟
15.折叠屏系列
16.……

鸿蒙开辟口试真题（含参考答案）:gitee.com/MNxiaona/733GH

鸿蒙入门教学视频：

美团APP实战开辟教学：gitee.com/MNxiaona/733GH

写在最后

• 如果你觉得这篇内容对你还蛮有资助，我想邀请你帮我三个小忙：
  
• 点赞，转发，有你们的 『点赞和批评』，才是我创造的动力。
  
• 关注小编，同时可以等待后续文章ing