Flutter：如何通过VoidCallBack的onTap获取点击项索引值

1. 优化自定义GridView组件的参数与回调 #

调整GridViewSelection的回调类型，将VoidCallback改为支持传递参数的类型，同时建议直接传入List<OldMenu>替代分散的menuList、imageList、nameList，避免数据拆分带来的潜在错误：

class GridViewSelection extends StatelessWidget {
  GridViewSelection({
    super.key,
    required this.menuItems,
    required this.onItemTap,
  });

  final List<OldMenu> menuItems;
  // 改为带索引的回调类型
  final ValueChanged<int> onItemTap;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(15),
      child: GridView.builder(
        physics: const NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          mainAxisSpacing: 10,
          crossAxisSpacing: 10,
        ),
        itemCount: menuItems.length,
        itemBuilder: (BuildContext context, int index) {
          final menuItem = menuItems[index];
          return GestureDetector(
            // 点击时传递当前项的索引
            onTap: () => onItemTap(index),
            child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10),
              ),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    SvgPicture.asset(
                      menuItem.image,
                      fit: BoxFit.contain,
                      width: MediaQuery.of(context).size.width * 0.15,
                    ),
                    const SizedBox(height: 10),
                    Text(
                      textAlign: TextAlign.center,
                      menuItem.name,
                      style: TextStyle(
                        fontSize: 14,
                        color: AppTheme.colors.greyFontColor,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

2. 使用组件时获取点击项信息 #

调用GridViewSelection时直接传入oldMenu列表，在回调中通过索引获取对应菜单项并打印名称：

GridViewSelection(
  menuItems: oldMenu,
  onItemTap: (index) {
    print(oldMenu[index].name);
  },
)

可选：直接传递菜单对象的简化方式 #

如果不想通过索引间接获取数据，可将回调类型改为直接传递OldMenu对象：

修改组件内的回调定义：

final ValueChanged<OldMenu> onItemTap;

在GestureDetector中传递对象：

onTap: () => onItemTap(menuItem),

使用时直接接收对象并打印：

GridViewSelection(
  menuItems: oldMenu,
  onItemTap: (menuItem) {
    print(menuItem.name);
  },
)

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