Flutter：如何在ListView.builder循环结束后添加多个静态Widget

方法一：直接判断索引值 #

修改itemCount为数据长度+3，再通过索引范围区分不同静态项：

var data = value;

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: data.length + 3, // 调整为数据长度+3
  itemBuilder: (context, index) {
    if (index < data.length) {
      // 渲染JSON数据中的项
      return Container(
        height: size.height,
        width: size.width,
        padding: sidePadding,
        margin: EdgeInsets.only(right: 10),
        child: Text('${data[index]['name']}'),
      );
    } else {
      // 根据索引匹配对应静态文本
      String staticText;
      if (index == data.length) {
        staticText = 'Arabic';
      } else if (index == data.length + 1) {
        staticText = 'German'; // 第二个静态项文本
      } else {
        staticText = 'Japanese'; // 第三个静态项文本
      }
      return Container(
        height: size.height,
        width: size.width,
        padding: sidePadding,
        margin: EdgeInsets.only(right: 10),
        child: Text(staticText),
      );
    }
  },
)

方法二：用静态列表存储额外项（更易维护） #

把静态文本存入列表，后续增减静态项只需修改列表，无需调整判断逻辑：

var data = value;
// 定义静态项文本列表
final staticItems = ['Arabic', 'German', 'Japanese'];

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: data.length + staticItems.length, // 数据长度+静态项数量
  itemBuilder: (context, index) {
    if (index < data.length) {
      // 渲染JSON数据中的项
      return Container(
        height: size.height,
        width: size.width,
        padding: sidePadding,
        margin: EdgeInsets.only(right: 10),
        child: Text('${data[index]['name']}'),
      );
    } else {
      // 从静态列表中取对应文本
      final staticText = staticItems[index - data.length];
      return Container(
        height: size.height,
        width: size.width,
        padding: sidePadding,
        margin: EdgeInsets.only(right: 10),
        child: Text(staticText),
      );
    }
  },
)

关键改动点 #

• itemCount：从data.length +1调整为对应数量，确保能容纳所有数据项和静态项。
• itemBuilder逻辑：扩展判断分支区分三个静态项；方法二通过列表管理静态文本，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者RAF Algowid