Grid组件核心参数解析：控制器与布局选项详解

平平不平凡2025-12-01 10:02

一、控制器 (scroller)

核心作用与使用限制 控制器用于实现Grid与滚动行为的深度绑定，通过scroller参数可精确控制滚动位置与交互状态。该参数需传入Scroller实例对象，支持动态调整滚动偏移量、监听滚动事件等场景。

重要特性：

独占性绑定：Grid的scroller不可与其他滚动组件（List/Scroll/WaterFlow等）共享控制器
滚动方向适配：当仅设置columnsTemplate时默认垂直滚动，仅设置rowsTemplate时默认水平滚动
交互控制：可配合scrollTo方法实现精准定位，或通过onScrollIndex事件监听可视区域变化

典型应用场景：

typescript 复制代码

// 创建滚动控制器实例
const gridScroller = new Scroller()

Grid({ scroller: gridScroller }) {
  // GridItem子组件...
}
.onScrollIndex((first, last) => {
  console.log(`当前可视起始项：${first}, 结束项：${last}`)
})

二、布局选项 (layoutOptions)

高级布局配置能力

GridLayoutOptions类型参数专为复杂布局设计，需搭配columnsTemplate或rowsTemplate使用（两者不可同时设置）。该对象包含三个关键属性：

1. regularSize

定义常规GridItem的占位规则：

固定值[1, 1]表示每个常规项占据1行1列
该参数为必填项，系统需以此为基础计算布局结构

2. irregularIndexes

指定需特殊处理的子项索引数组：

typescript 复制代码

irregularIndexes: [0, 3, 5] // 索引为0/3/5的项将触发不规则布局

3. onGetIrregularSizeByIndex 动态计算不规则项占位尺寸：

typescript 复制代码

onGetIrregularSizeByIndex: (index) => {
  if (index === 0) return [2, 1] // 首项跨2行1列
  if (index === 5) return [1, 3] // 第5项跨1行3列
  return [1, 1]
}

使用注意事项

回调触发 ：仅当子项索引包含在irregularIndexes数组时才会执行尺寸计算回调

三、开发实践建议

控制器与布局选项的组合使用能显著提升复杂网格布局的实现效率。建议在商品橱窗、仪表盘等需要动态适配不同尺寸内容的场景中优先采用该方案。实际开发时需注意滚动控制器的生命周期管理，对于不规则布局项建议预先计算尺寸避免布局抖动。这两个参数的灵活运用将使Grid组件突破传统布局限制，实现真正响应式的二维界面设计。