【ArkUI】使用 Grid/GridItem 组件构建网格显示
一、概述网格布局是由“行”和“列”分割的单元格所组成,通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力,子组件占比控制能力,是一种重要自适应布局,其使用场景有九宫格图片展示、日历、计算器等。ArkUI提供了Grid 容器组件和子组件 GridItem,用于构建网格布局。Grid 用于设置网格布局相关参数,GridItem 定义子组件相关特征。Grid 组件支持使用条件渲染、循环渲染、懒加载等方式生成子组件。Grid 组件为网格容器,其中容器内各条目对应一个 GridItem 组件。Grid 的子组件必须是 GridItem 组件。二、网格布局网格布局是一种二维布局。Grid 组件支持自定义行列数和每行每列尺寸占比、设置子组件横跨几行或者几列,同时提供了垂直和水平布局能力。如果 Grid 组件设置了宽高属性,则其尺寸为设置值。如果没有设置宽高属性,Grid 组件的尺寸默认适应其父组件的尺寸。当网格容器组件尺寸发生变化时,所有子组件以及间距会等比例调整,从而实现网格布局的自适应能力。Grid组件根据行列数量与占比属性的设置,可以分为三种布局情况:行、列数量与占比同时设置:Grid 只展示固定行列数的元素,其余元素不展示,且 Grid 不可滚动。(推荐使用该种布局方式)只设置行、列数量与占比中的一个:元素按照设置的方向进行排布,超出的元素可通过滚动的方式展示。行列数量与占比都不设置:元素在布局方向上排布,其行列数由布局方向、单个网格的宽高等多个属性共同决定。超出行列容纳范围的元素不展示,且 Grid 不可滚动。三、网格数据网格布局采用二维布局的方式组织其内部元素。Grid 组件可以通过二维布局的方式显示一组GridItem子 组件。对于内容结构相似的多个GridItem,通常更推荐使用 ForEach 语句中嵌套GridItem的形式,来减少重复代码。// 二维布局方式Grid(){GridItem(){Text('会议')// ···}GridItem(){Text('投票')// ···}GridItem(){Text('签到')// ···}GridItem(){Text('打印')// ···}}// ···.rowsTemplate('1fr 1fr').columnsTemplate('1fr 1fr')// ForEach语句方式content:Arraystriing=['会议','投票','签到','打印']Grid(){ForEach(this.content,(item:string)={GridItem(){Text(item)}// ···},(item:string):string=item)}.rowsTemplate(('1fr 1fr')asstring).columnsTemplate(('1fr 1fr'
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2550489.html
如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!