Flutter自定义可复用GridView组件报错：Undefined name 'index'

错误根源 #

你调用GridViewHzTop时使用了topsixoptions[index]，但此处的index在当前代码上下文完全未定义。更核心的问题是你的GridViewHzTop组件设计逻辑错误——它只能接收单个文本和图标路径，无法渲染包含多条不同数据的列表。

修正步骤与完整代码 #

1. 修正TopSixOptions类 #

构造函数中多了onPress参数但未定义对应属性，先补上：

class TopSixOptions {
  final String iconPath;
  final String text;
  final VoidCallback? onPress; // 补上缺失的属性

  TopSixOptions(this.iconPath, this.text, this.onPress);

  static List<TopSixOptions> topsixoptions = [
    TopSixOptions('assets/icons/noticepin.png', 'notice', null),
    TopSixOptions('assets/icons/leave.png', 'Leave', null),
    TopSixOptions('assets/icons/schedule.png', 'Schedule', null),
    TopSixOptions('assets/icons/upload.png', 'Upload', null),
    TopSixOptions('assets/icons/leave.png', 'Leave', null),
    TopSixOptions('assets/icons/leave.png', 'Leave', null),
  ];
}

final topsixoptions = TopSixOptions.topsixoptions;

2. 重构GridViewHzTop组件 #

将组件参数改为接收整个数据列表，移除单个文本、图标路径参数，直接在itemBuilder中使用列表对应项的数据：

class GridViewHzTop extends StatelessWidget {
  const GridViewHzTop({
    Key? key,
    required this.items, // 改为接收整个数据列表
  }) : super(key: key);

  final List<TopSixOptions> items;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: GridView.builder(
            scrollDirection: Axis.horizontal,
            gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 110,
              mainAxisSpacing: 10,
              crossAxisSpacing: 10,
            ),
            itemCount: items.length, // 用列表长度作为itemCount
            itemBuilder: (context, index) {
              final item = items[index]; // 获取当前索引对应的项
              return Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: aWhiteColor,
                  boxShadow: const [
                    BoxShadow(
                      color: aSecondryColor,
                      blurRadius: 0.1,
                      spreadRadius: 0.25,
                      offset: Offset(0, 0.5),
                    ),
                  ],
                ),
                padding: const EdgeInsets.all(0.5),
                child: Column(
                  children: [
                    Flexible(
                      flex: 3,
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(10),
                        child: Image.asset(
                          item.iconPath, // 使用当前项的图标路径
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                    Flexible(
                      child: LargeText(
                        text: item.text, // 使用当前项的文本
                        size: 14,
                      ),
                    )
                  ],
                ),
              );
            },
          ),
        )
      ],
    );
  }
}

3. 正确调用组件 #

直接传递整个数据列表，无需再处理index：

SizedBox(
  height: 240,
  child: GridViewHzTop(items: topsixoptions),
)

关键说明 #

• 重构后的组件真正实现了可复用性：它可以接收任意符合TopSixOptions格式的列表数据，渲染出对应的水平GridView
• 移除了原组件中硬编码的单个数据依赖，改为从列表中动态获取每个格子的内容，解决了index未定义的错误

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