Flutter：如何获取列表行索引并传递给方法实现图标颜色区分

要实现按行索引设置图标颜色，核心是获取每行的索引值并传递给图标生成方法，具体修改如下：

1. 调整循环逻辑，获取每行索引 #

原代码用for (int i in list)只能拿到每行的图标数量，拿不到行的位置。改成带索引的循环，直接获取当前行的rowIndex：

List<Widget> _convertListItems(List<dynamic> list, bool isSecondList) {
  late List<Widget> children;
  if (isSecondList) {
    children = [
      // 改成带索引的循环，rowIndex就是当前行的索引（从0开始）
      for (int rowIndex = 0; rowIndex < list.length; rowIndex++)
        Padding(
          padding: const EdgeInsets.only(bottom: 10),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // 每行的图标数量是list[rowIndex]
              for (var j = 1; j <= list[rowIndex]; j++)
                Padding(
                  padding: const EdgeInsets.only(right: 3),
                  // 把行索引rowIndex传给_itemPicture
                  child: _itemPicture(rowIndex),
                ),
            ],
          ),
        )
    ];
  }
  return children;
}

2. 修改图标生成方法，根据索引设置颜色 #

修改_itemPicture的参数，接收行索引，根据索引判断颜色：

Widget _itemPicture(int rowIndex) {
  // 前3行（索引0、1、2）用紫色，第4-6行（索引3、4、5）用绿色
  Color iconColor = rowIndex < 3 
      ? constants.Colors.purpleMain 
      : constants.Colors.greenMain; // 替换为你项目中的绿色常量

  return SizedBox(
    height: 14,
    width: 9,
    child: Icon(Icons.bolt, color: iconColor),
  );
}

关键说明 #

• 行索引从0开始，所以前3行对应rowIndex < 3，第4到6行对应rowIndex >=3。
• 循环时通过list[rowIndex]拿到当前行需要显示的图标数量，保持原有每行的图标个数不变。
• 去掉了原方法中的const，因为颜色是动态判断的，无法使用常量组件。

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