#2020颜文-TV#第三章“脸控”时代Harmonyos如何打造UI界面com/#zz为什么是第三章，前两章呢？本来，HarmonyOS的应用开发是零散的快速掌握，但是在准备六种布局组合的复杂UI界面demo时，很多组件之前并没有应用。因此，我们准备细化知识体系，希望以章节的形式，简化整个HarmonyOS应用的开发，降低学习的复杂度。为什么从第三章开始？因为前两章是一些理论知识，后面会抽空整理发表文章。一、本章主要内容一个优秀的APP，不仅仅在于其提供的业务功能，更重要的是拥有新颖、美观、易操作的UI界面，能够给用户全新、直观的可视化操作，所以应用程序的UI界面美学与功能一样重要。对于程序员来说，他们一般关注的是应用本身的功能点，这个功能是怎么实现的，那个功能很有特色，但是用户群体不仅仅是程序员。对于一般用户来说，他们关心的只是界面是否美观，交互操作是否流畅，操作过程是否简单，能否达到想要的效果。所以用户只关注UI界面。UI界面呈现在用户面前，显示屏上的图形用于向用户显示信息或提供交互方式。UI界面是由一个或多个元素组成的，比如HelloWorld例子，显示HelloWorld这个词的界面是由Text组件组成的，可以说这个UI界面是由一个元素组成的。再比如我们的登录页面，由用户账号输入框、密码输入框、验证码输入框、登录按钮组成。虽然它的UI界面上有两种类型的组件，但我们不能说它是由两种元素组成的，由四个元素组成，元素个数不能因为类型重复而减少。因此，我们需要在本章中掌握构成页面的元素。UI界面的元素统称为组件，组件按照一定的层次结构组合起来形成布局。组件不添加到任何布局中就不能显示和交互，所以一个UI界面必须至少包含一个显示状态的布局。所以下一节我们将详细介绍构成UI界面的布局和组件。2.HarmonyOS应用中的布局和组件HarmonyOS应用的能力会在屏幕上显示一个UI界面，用于显示用户可以查看和交互的内容。在HarmonyOS应用中，UI界面由Component（组件）和ComponentContainer（组件容器，也叫布局）组成。组件是绘制在屏幕上的对象（也称为元素），分为两类，一类是显示，一类是交互。布局是其他布局和组件的容器。它可以管理组件的排列等属性，也可以通过复杂的组合实现复杂的UI界面。在HarmonyOS应用中，ComponentContainer是Component类的子类，也就是说组件容器可以看作是一个特殊的组件，但它是由一个或多个布局或组件组成的。Component是UI界面中所有组件的基类。UI界面中的组件一般直接或间接继承自Component类或其子类。开发者可以为Component设置事件处理回调来创建一个交互组件。侦听器存在哪些功能，我们将在下一节中详细了解它。ComponentContainer将Component（组件）或ComponentContainer（组件容器）对象作为容器并对其进行布局。在UI界面中，首先有一个组件容器（布局），在组件容器中容纳一个或多个组件或组件容器，并为其定义样式，即完善了UI界面。组件结构（引用自官方文档）3.布局常用属性和参数每个布局都根据自己的特点提供了LayoutConfig内部类。该内部类继承了ComponentContainer.LayoutConfig类，其作用是为子组件设置布局属性和参数。通过指定布局属性，可以约束布局中子组件的显示效果。例如：设置布局的宽高为MATCH_PARENT（覆盖整个屏幕），设置子组件Text的宽高为MATCH_CONTENT（根据内容大小呈现），也可以给出固定的宽高值.在六大布局中，width和height是通用属性，也为不同场景的布局提供了特殊的属性。比如DirectionalLayout（线性布局）中提供了weight属性，用于设置权重，而其他布局则没有。重量声明。4.创建和声明布局HarmonyOS提供了两个基础类，Ability和AbilitySlice。能力可以理解为在用户交互发生后，需要渲染指定的view来响应。AbilitySlice可以理解为绘制UI界面，实现特定的逻辑，比如按钮点击事件等，是应用程序显示、操作、跳转的最小单元。AbilitySlice通过setUIContent()设置界面的布局。组件需要组合并添加到布局中。HarmonyOSJavaUI提供了两种方法。一种是直接在代码中创建布局，将组件添加到布局中，通过设置它们的属性来控制UI界面的显示效果。另一种是在XML中声明布局。这两种方式创建的布局没有本质区别。以XML声明的布局加载后可以修改，需要设置布局和组件的唯一标识。获取指定组件后需要编写组件监听事件和业务逻辑。根据组件的功能分为三种类型：布局类（布局中放置的布局是组件，是一种特殊的组件）、显示类和交互类。接下来，我将对常用的组件进行详细说明。以上章节暂时放在这里。本章是我们在UI界面中的组件和布局的理论知识。从下一节开始，我们将详细讨论各种组件和布局。免责声明：码字不易，转载请注明出处，系列图文仅供学习使用，请勿商用。如因转载作品引起知识产权或其他法律纠纷，一切后果由转载者自行承担，与本人无关！更多信息请访问：https://harmonyos，与华为共同建立的鸿蒙技术社区。51cto.com/#zz
