鸿蒙HarmonyOS(ArkUI基础-4）

（今天更新的内容是通用布局属性与层叠布局）
ArkUI（方舟UI框架）

1.简介

ArkUI（方舟UI框架）为应用的UI开辟提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互变乱），以及实时界面预览工具等，可以支持开辟者举行可视化界面开辟。

2.基本概念

• UI： 即用户界面。开辟者可以将应用的用户界面设计为多个功能页面，每个页面举行单独的文件管理，并通过页面路由API完成页面间的调理管理如跳转、回退等操作，以实现应用内的功能解耦。
  
• 组件： UI构建与显示的最小单位，如列表、网格、按钮、单选框、进度条、文本等。开辟者通过多种组件的组合，构建出满足自身应用诉求的完整界面。
  

3.概述

(将根据概述的点举行总结)

• ArkTS
  ArkTS是优选的主力应用开辟语言，围绕应用开辟在TypeScript（简称TS）生态基础上做了进一步扩展。扩展本事包罗声明式UI描述、自界说组件、动态扩展UI元素、状态管理和渲染控制。状态管理作为基于ArkTS的声明式开辟范式的特色，通过功能不同的装饰器给开辟者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用步调状态，两者协作可以使开辟者完整地构建整个应用的数据更新和UI渲染。ArkTS语言的基础知识请参考初识ArkTS语言。
  
• 布局
  布局是UI的必要元素，它界说了组件在界面中的位置。ArkUI框架提供了多种布局方式，除了基础的线性布局、层叠布局、弹性布局、相对布局、栅格布局外，也提供了相对复杂的列表、宫格、轮播。
  
• 组件
  组件是UI的必要元素，形成了在界面中的样子，由框架直接提供的称为系统组件，由开辟者界说的称为自界说组件。系统内置组件包括按钮、单选框、进度条、文本等。开辟者可以通过链式调用的方式设置系统内置组件的渲染效果。开辟者可以将系统内置组件组合为自界说组件，通过这种方式将页面组件化为一个个独立的UI单位，实现页面不同单位的独立创建、开辟和复用，具有更强的工程性。
  
• 页面路由和组件导航
  应用大概包罗多个页面，可通过页面路由实现页面间的跳转。一个页面内大概存在组件间的导航如典型的分栏，可通过导航组件实现组件间的导航。
  
• 图形
  方舟开辟框架提供了多种类型图片的显示本事和多种自界说绘制的本事，以满足开辟者的自界说绘图需求，支持绘制形状、填充颜色、绘制文本、变形与裁剪、嵌入图片等。
  
• 动画
  动画是UI的重要元素之一。优秀的动画设计能够极大地提拔用户体验，框架提供了丰富的动画本事，除了组件内置动画效果外，还包括属性动画、显式动画、自界说转场动画以及动画API等，开辟者可以通过封装的物理模型大概调用动画本事API来实现自界说动画轨迹。
  
• 交互变乱
  交互变乱是UI和用户交互的必要元素。方舟开辟框架提供了多种交互变乱，除了触摸变乱、鼠标变乱、键盘按键变乱、核心变乱等通用变乱外，还包括基于通用变乱举行进一步识别的手势变乱。手势变乱有单一手势如点击手势、长按手势、拖动手势、捏合手势、旋转手势、滑动手势，以及通过单一手势变乱举行组合的组合手势变乱。
  
• 自界说本事
  自界说本事是UI开辟框架提供给开辟者对UI界面举行开辟和定制化的本事。包括：自界说组合、自界说扩展、自界说节点和自界说渲染。
  

4.布局

1.概述

（与前端的基本布局差不多,有前端基础的小同伴很好上手的）
布局通常为分层布局，一个常见的页面布局如下所示：

为实现上述效果，开辟者需要在页面中声明对应的元素。其中，Page表示页面的根节点，Column/Row等元素为系统组件。针对不同的页面布局，ArkUI提供了不同的布局组件来帮助开辟者实现对应布局的效果，例如Row用于实现线性布局。
2.布局元素的组成
布局相干的容器组件可形成对应的布局效果。例如，List组件可构成线性布局。
布局元素组成图

• 组件区域（蓝区方块）：组件区域表示组件的巨细，width、height属性用于设置组件区域的巨细。
  
• 组件内容区（黄色方块）：组件内容区巨细为组件区域巨细减去组件的border值，组件内容区巨细会作为组件内容（大概子组件）举行巨细测算时的布局测算限制。
  
• 组件内容（绿色方块）：组件内容本身占用的巨细，好比文本内容占用的巨细。组件内容和组件内容区不一定匹配，好比设置了固定的width和height，此时组件内容的巨细就是设置的width和height减去padding和border值，但文本内容则是通过文本布局引擎测算后得到的巨细，大概出现文本真实巨细小于设置的组件内容区巨细。当组件内容和组件内容区巨细不一致时，align属性见效，界说组件内容在组件内容区的对齐方式，如居中对齐。
  
• 组件布局边界（虚线部分）：组件通过margin属性设置外边距时，组件布局边界就是组件区域加上margin的巨细。
  

3.所有布局样式
布局应用场景线性布局（Row、Column）如果布局内子元素高出1个时，且能够以某种方式线性排列时优先考虑此布局。层叠布局（Stack）组件需要有堆叠效果时优先考虑此布局。层叠布局的堆叠效果不会占用或影响其他同容器内子组件的布局空间。例如Panel作为子组件弹出时将其他组件覆盖更为合理，则优先考虑在外层使用堆叠布局。弹性布局（Flex）弹性布局是与线性布局雷同的布局方式。区别在于弹性布局默认能够使子组件压缩或拉伸。在子组件需要盘算拉伸或压缩比例时优先使用此布局，可使得多个容器内子组件能有更好的视觉上的填充效果。相对布局（RelativeContainer）相对布局是在二维空间中的布局方式，不需要依照线性布局的规则，布局方式更为自由。通过在子组件上设置锚点规则（AlignRules）使子组件能够将本身在横轴、纵轴中的位置与容器或容器内其他子组件的位置对齐。设置的锚点规则可以天然支持子元素压缩、拉伸、堆叠或形成多行效果。在页面元素分布复杂或通过线性布局会使容器嵌套层数过深时保举使用。栅格布局（GridRow、GridCol）栅格是多装备场景下通用的辅助定位工具，可将空间分割为有规律的栅格。栅格不同于网格布局固定的空间划分，可以实现不同装备下不同的布局，空间划分更随心所欲，从而明显降低适配不同屏幕尺寸的设计及开辟成本，使得整体设计和开辟流程更有秩序和节奏感，同时也保证多装备上应用显示的和谐性和一致性，提拔用户体验。保举内容相同但布局不同时使用。媒体查询（@ohos.mediaquery）媒体查询可根据不同装备类型或同装备不同状态修改应用的样式。例如根据装备和应用的不同属性信息设计不同的布局，以及屏幕发生动态改变时更新应用的页面布局。列表（List）使用列表可以高效地显示布局化、可滚动的信息。在ArkUI中，列表具有垂直和水平布局本事和自适应交叉轴方向上排列个数的布局本事，超出屏幕时可以滚动。列表得当用于呈现同类数据类型或数据类型集，例如图片和文本。网格（Grid）网格布局具有较强的页面均分本事、子元素占比控制本事。网格布局可以控制元素所占的网格数量、设置子元素横跨几行大概几列，当网格容器尺寸发生变化时，所有子元素以及间距等比例调解。保举在需要按照固定比例大概匀称分配空间的布局场景下使用，例如盘算器、相册、日历等。轮播（Swiper）轮播组件通常用于实现广告轮播、图片预览等。选项卡（Tabs）选项卡可以在一个页面内快速实现视图内容的切换，一方面提拔查找信息的效率，另一方面精简用户单次获取到的信息量。 3.对子元素的约束
约束使用场景实现方式拉伸容器组件尺寸发生变化时，增加或减小的空间全部分配给容器组件内指定区域。flexGrow和flexShrink属性：1. flexGrow基于父容器的剩余空间分配来控制组件拉伸。2. flexShrink设置父容器的压缩尺寸来控制组件压缩。缩放子组件的宽高按照预设的比例，随容器组件发生变化，且变化过程中子组件的宽高比稳定。aspectRatio属性指定当前组件的宽高比来控制缩放，公式为：aspectRatio=width/height。占比占比本事是指子组件的宽高按照预设的比例，随父容器组件发生变化。基于通用属性的两种实现方式：1. 将子组件的宽高设置为父组件宽高的百分比。2. layoutWeight属性，使得子元素自适应占满剩余空间。隐藏隐藏本事是指容器组件内的子组件，按照其预设的显示优先级，随容器组件尺寸变化显示或隐藏，其中相同显示优先级的子组件同时显示或隐藏。通过displayPriority属性来控制组件的显示和隐藏。 2.通用布局属性