You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多
文档控制台
免费开始使用

Flutter开发:如何在GridView每隔6个索引后插入其他Widget

实现GridView每隔6个项后插入自定义Widget的方案

这个需求很常见,咱们可以通过调整GridView.builderitemCountitemBuilder逻辑来实现,我帮你修改代码并解释关键部分:

修改后的完整代码

GridView.builder(
  shrinkWrap: true,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: MediaQuery.of(context).size.width / (MediaQuery.of(context).size.width * 0.9),
  ),
  physics: NeverScrollableScrollPhysics(),
  // 计算总条目数:原列表长度 + 插入的Widget数量(每6个原项插1个)
  itemCount: widget.dicovervehiclelist.length + (widget.dicovervehiclelist.length ~/ 6),
  itemBuilder: (BuildContext context, int index) {
    // 判断当前是否是插入位置:每7个位置的最后一个(对应6个原项之后)
    if ((index + 1) % 7 == 0) {
      // 替换成你需要展示的自定义Widget
      return Container(
        padding: EdgeInsets.all(8),
        child: Center(child: Text("自定义插入Widget")),
      );
    } else {
      // 计算对应的原列表索引:减去前面已经插入的Widget数量
      int originalIndex = index - (index ~/ 7);
      return vehicleview(
        widget.dicovervehiclelist[originalIndex],
        context,
        widget.dicovervehiclelist.length,
        originalIndex,
      );
    }
  },
)

关键逻辑说明

  1. 总条目数计算
    我们需要在原列表的基础上,每6个项插入1个自定义Widget,所以总条目数是原列表长度 + 原列表长度//6~/是整数除法,自动向下取整)。比如原列表有13个项,会插入2个Widget,总条目数就是15。

  2. 插入位置判断
    因为每6个原项+1个插入项组成一组(共7个位置),所以当(index +1) %7 ==0时,当前位置就是插入点(索引从0开始,第7个位置的index是6,刚好对应6个原项之后)。

  3. 原列表索引映射
    由于插入了额外的Widget,GridView的索引和原列表的索引不再一一对应。我们需要用index - (index ~/7)来计算原列表的真实索引:每7个位置会有1个插入项,所以用当前索引减去前面已经插入的Widget数量(index~/7就是前面插入的总数)。

如果你的需求是替换第6个项而不是插入,只需要调整判断条件为(index +1) %6 ==0,并且不需要修改itemCount,直接在命中时返回自定义Widget即可,但根据你的描述“每隔6个索引位置后展示另一个Widget”,插入的逻辑更符合需求。

内容的提问来源于stack exchange,提问作者Hitanshu Gogoi

火山引擎 最新活动