鸿蒙移动应用开发项目式教程课件 项目5-智能融媒展示页-5-1 基础布局_第1页
鸿蒙移动应用开发项目式教程课件 项目5-智能融媒展示页-5-1 基础布局_第2页
鸿蒙移动应用开发项目式教程课件 项目5-智能融媒展示页-5-1 基础布局_第3页
鸿蒙移动应用开发项目式教程课件 项目5-智能融媒展示页-5-1 基础布局_第4页
鸿蒙移动应用开发项目式教程课件 项目5-智能融媒展示页-5-1 基础布局_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

基础布局

基础布局

声明式UI提供了以下5种常见布局，开发者可根据实际应用场景选择合适的布局进行页面开发。

（1）线性布局：如果布局内子元素超过1个，且能够以某种方式线性排列，优先考虑此布局。

（2）层叠布局：组件需要有堆叠效果时，优先考虑此布局。层叠布局的堆叠效果不会占用或影响同容器内其他子组件的布局空间。例如，Panel作为子组件弹出时，将其他组件覆盖更为合理，则优先考虑在外层使用层叠布局。

（3）弹性布局：与线性布局类似，区别在于弹性布局默认能够使子组件压缩或拉伸。在子组件需要计算拉伸或压缩比例时优先使用此布局，能够使多个容器内的子组件有更好的视觉上的填充效果。任务导入知识解析学以致用课堂小结课后拓展1.1基础布局

基础布局

（4）相对布局：二维空间中的布局，不需要遵循线性布局的规则，布局方式更为自由。这种布局通过在子组件上设置锚点规则（AlignRule），使子组件能够将自己在横轴、纵轴中的位置与容器或容器内其他子组件的位置对齐。设置的锚点规则可以支持子元素压缩、拉伸、堆叠或形成多行效果。在页面元素分布复杂或通过线性布局会使容器嵌套层数过多时，推荐使用相对布局。

（5）栅格布局：栅格是多设备场景下通用的辅助定位工具，可将空间分割为有规律的栅格，栅格布局不同于网格布局固定的空间划分，它可以实现不同设备下不同的布局，空间划分更随心所欲，从而显著降低了适配不同尺寸屏幕的设计及开发成本，使得整体设计和开发流程更有秩序和有节奏感，同时保证了多设备上应用显示的协调性和一致性，提升了用户体验。推荐在内容相同但布局不同时使用栅格布局。任务导入知识解析学以致用课堂小结课后拓展1.1基础布局Grid组件进阶

前面学习了Grid组件的基础用法，为了提高开发能力，接下来学习Grid子组件的索引值计算规则。

1．计算规则Grid组件的索引值用于当前对象的唯一标识，开发者可以通过索引值进行许多操作。

（1）Grid子组件的索引值按子组件的顺序依次递增。

（2）在if/else语句中，只有条件成立，分支内的子组件才会参与索引值计算，条件不成立，分支内的子组件将不计算索引值。

（3）在ForEach/LazyForEach语句中，会计算展开的所有子节点索引值。

（4）if/else/ForEach/LazyForEach语句发生变化后，会更新子节点索引值。

（5）将Grid子组件的visibility属性的值设置为Hidden或None时依然会计算索引值。任务导入知识解析学以致用课堂小结课后拓展1.1基础布局Grid组件进阶

2．布局模式

根据rowsTemplate、columnsTemplate属性的设置情况，可将Grid组件分为以下3种布局模式。

（1）同时设置rowsTemplate、columnsTemplate。

（2）仅设置rowsTemplate、columnsTemplate中的一个。

（3）既不设置r

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论