HarmonyOS：利用Grid构建网格

一、概述

   网格布局是由“行”和“列”分割的单位格所构成，通过指定“项目”地点的单位格做出各种各样的布局。网格布局具有较强的页面均分本领，子组件占比控制本领，是一种紧张自顺应布局，其利用场景有九宫格图片展示、日历、盘算器等。

ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局。Grid用于设置网格布局相干参数，GridItem界说子组件相干特性。Grid组件支持利用条件渲染、循环渲染、懒加载等方式天生子组件。
  二、布局与束缚

   Grid组件为网格容器，此中容器内各条目对应一个GridItem组件，如下图所示。
    Grid与GridItem组件关系

    分析
Grid的子组件必须是GridItem组件。
    网格布局是一种二维布局。Grid组件支持自界说行列数和每行每列尺寸占比、设置子组件高出几行大概几列，同时提供了垂直和程度布局本领。当网格容器组件尺寸发生厘革时，全部子组件以及间距会等比例调解，从而实现网格布局的自顺应本领。根据Grid的这些布局本领，可以构建出差别样式的网格布局，如下图所示。

    如果Grid组件设置了宽高属性，则其尺寸为设置值。如果没有设置宽高属性，Grid组件的尺寸默认顺应其父组件的尺寸。

Grid组件根据行列数量与占比属性的设置，可以分为三种布局情况：
  

   

• 行、列数量与占比同时设置：Grid只展示固定行列数的元素，别的元素不展示，且Grid不可滚动。（保举利用该种布局方式）   
  
• 只设置行、列数量与占比中的一个：元素按照设置的方向举行排布，超出的元素可通过滚动的方式展示。   
  
• 行列数量与占比都不设置：元素在布局方向上排布，其行列数由布局方向、单个网格的宽高等多个属性共同决定。超出行列容纳范围的元素不展示，且Grid不可滚动。  
  

  三、设置分列方式

3.1 设置行列数量与占比

   通过设置行列数量与尺寸占比可以确定网格布局的团体分列方式。Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格布局行列数量与尺寸占比。

rowsTemplate和columnsTemplate属性值是一个由多个空格和’数字+fr’隔断拼接的字符串，fr的个数即网格布局的行或列数，fr前面的数值巨细，用于盘算该行或列在网格布局宽度上的占比，终极决定该行或列宽度。
    行列数量占比示例

    如上图所示，构建的是一个三行三列的网格布局，其在垂直方向上分为三等份，每行占一份；在程度方向上分为四等份，第一列占一份，第二列占两份，第三列占一份。

只要将rowsTemplate的值为’1fr 1fr 1fr’，同时将columnsTemplate的值为’1fr 2fr 1fr’，即可实现上述网格布局。

1. Grid() {
2.   ...
3. }
4. .rowsTemplate('1fr 1fr 1fr')
5. .columnsTemplate('1fr 2fr 1fr')

复制代码

  分析
当Grid组件设置了rowsTemplate或columnsTemplate时，Grid的layoutDirection、maxCount、minCount、cellLength属性不见效，属性分析可参考

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。