怎么样推广自己的网站,宁波网站建设公司比较好,手机网站淘宝客,网站设计详细设计鸿蒙开发-序言 鸿蒙开发-工具 鸿蒙开发-初体验 鸿蒙开发-运行机制 鸿蒙开发-运行机制-Stage模型 鸿蒙开发-UI 鸿蒙开发-UI-组件 鸿蒙开发-UI-组件-状态管理 鸿蒙开发-UI-应用-状态管理 鸿蒙开发-UI-渲染控制 文章目录 前言 一、布局概述 1.布局结构 2.布局元素组成 3.布局分类 … 鸿蒙开发-序言 鸿蒙开发-工具 鸿蒙开发-初体验 鸿蒙开发-运行机制 鸿蒙开发-运行机制-Stage模型 鸿蒙开发-UI 鸿蒙开发-UI-组件 鸿蒙开发-UI-组件-状态管理 鸿蒙开发-UI-应用-状态管理 鸿蒙开发-UI-渲染控制 文章目录 前言 一、布局概述 1.布局结构 2.布局元素组成 3.布局分类 4.布局位置 5.布局子元素的约束 总结 前言
上文我们学习记录鸿蒙开发中的UI渲染相关的知识点深入学习了条件渲染、循环渲染的使用方法以及数据懒加载。本文学习鸿蒙开发UI布局相关的知识。 一、布局概述
在声明式UI中所有的页面都是由自定义组件构成组件按照布局的要求依次排列最终构成UI页面。
布局指用特定的组件或者属性来管理用户页面所放置UI组件的大小和位置。
页面布局的合理流程 1.布局结构
布局的结构通常是分层级的代表了用户界面中的整体架构。
一个常见的页面结构如下所示 Page表示页面的根节点Column/Row等元素为系统组件。针对不同的页面结构ArkUI提供了不同的布局组件来实现对应布局的效果
2.布局元素组成
布局相关的容器组件可形成对应的布局效果
布局元素组成图如下所示 组件区域蓝区方块组件区域表明组件的大小width、height属性设置该区域的大小。
组件内容区黄色方块组件区域大小减去组件的border值组件内容区大小会作为组件内容或者子组件进行大小测算时的布局测算限制。
组件内容绿色方块组件内容本身占用的大小比如文本内容占用的大小。组件内容和组件内容区不一定匹配比如设置了固定的width和height此时组件内容的大小就是设置的width和height减去padding和border值但文本内容则是通过文本布局引擎测算后得到的大小可能出现文本真实大小小于设置的组件内容区大小。当组件内容和组件内容区大小不一致时align属性生效定义组件内容在组件内容区的对齐方式如居中对齐。
组件布局边界虚线部分组件通过margin属性设置外边距时组件布局边界就是组件区域加上margin的大小。
做过UI开发的同学应该对这几个属性margin border padding应该非常好理解考虑到开发的通用性以及便于技术栈转型这里UI布局相关的属性都是CSS布局中保持一致的对于没有前端开发经验的同学把组件占用的区域使用盒子模型能更好理解。 3.布局分类
声明式UI提供了以下8种常见布局 4.布局位置
布局容器相对于自身或其他组件的位置通过position、offset等属性控制 定位能力 使用场景 实现方式 绝对定位 对于不同尺寸的设备使用绝对定位的适应性会比较差在屏幕的适配上有缺陷。 使用position实现绝对定位设置元素左上角相对于父容器左上角偏移位置。在布局容器中设置该属性不影响父容器布局仅在绘制时进行位置调整。 相对定位 相对定位不脱离文档流即原位置依然保留不影响元素本身的特性仅相对于原位置进行偏移。 使用offset可以实现相对定位设置元素相对于自身的偏移量。设置该属性不影响父容器布局仅在绘制时进行位置调整。
绝对定位案例 注根据组件定义的顺序使用position定位的组件会覆盖在其前面定义的组件但是对其后定义的组件没有影响。
相对定位案例 5.布局子元素的约束 对子元素的约束能力 使用场景 实现方式 拉伸 容器组件尺寸发生变化时增加或减小的空间全部分配给容器组件内指定区域。 flexGrow和flexShrink属性 flexGrow基于父容器的剩余空间分配来控制组件拉伸。flexShrink设置父容器的压缩尺寸来控制组件压缩。 缩放 子组件的宽高按照预设的比例随容器组件发生变化且变化过程中子组件的宽高比不变。 aspectRatio属性指定当前组件的宽高比来控制缩放公式为aspectRatiowidth/height。 占比 占比能力是指子组件的宽高按照预设的比例随父容器组件发生变化。 基于通用属性的两种实现方式 1. 将子组件的宽高设置为父组件宽高的百分比。 2. layoutWeight属性使得子元素自适应占满剩余空间。 隐藏 隐藏能力是指容器组件内的子组件按照其预设的显示优先级随容器组件尺寸变化显示或隐藏其中相同显示优先级的子组件同时显示或隐藏。 通过displayPriority属性来控制页面的显示和隐藏。 总结
本文学习了鸿蒙开发UI布局相关的知识鸿蒙开发的UI布局技术栈基本与目前前端开发主流技术栈是一致的这样可以易化前端开发的技术转型。本文简单了解了鸿蒙开发中使用频率最高的布局分类后面会详细学习每种布局容器的使用。
