Flutter中InkWell的onTap事件无响应问题求助

我是Flutter新手，正在学习InkWell组件，但它无法正常工作，点击后没有任何响应。尝试点击卡片跳转到其他页面也失败了，以下是相关代码片段：

main.dart #

import 'package:flutter/material.dart';

import 'package:google_fonts/google_fonts.dart';
import 'package:wtpa/screens/categories.dart';

final theme = ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    brightness: Brightness.dark,
    seedColor: const Color.fromARGB(255, 131, 57, 0),
  ),
  textTheme: GoogleFonts.latoTextTheme(),
);

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: theme,
      home: const CategoriesScreen(),
    );
  }
}

categories.dart #

import 'package:flutter/material.dart';

import 'package:wtpa/Data/dummy_data.dart';
import 'package:wtpa/screens/meals.dart';
import 'package:wtpa/widgets/category_grid_item.dart';
import 'package:wtpa/models/category.dart';

class CategoriesScreen extends StatelessWidget {
  const CategoriesScreen({super.key});

  void _selectCategory(BuildContext context, Category category) {
    final filteredMeals = dummyMeals
        .where((meal) => meal.categories.contains(category.id))
        .toList();

    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (ctx) => MealsScreen(
          title: category.title,
          meals: filteredMeals,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Pick your category'),
      ),
      body: GridView(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 3 / 2,
          crossAxisSpacing: 20,
          mainAxisSpacing: 20,
        ),
        children: [
          for (final category in availableCategories)
            CategoryGridItem(
              category: category,
              onSelectCategory: () {
                _selectCategory(context, category);
              },
            )
        ],
      ),
    );
  }
}

category.dart #

import 'package:flutter/material.dart';

class Category {
  const Category({
    required this.id,
    required this.title,
    this.color = Colors.orange,
  });

  final String id;
  final String title;
  final Color color;
}

category_grid_item.dart #

import 'package:flutter/material.dart';

import 'package:wtpa/models/category.dart';

class CategoryGridItem extends StatelessWidget {
  const CategoryGridItem({
    super.key,
    required this.category,
    required this.onSelectCategory,
  });

  final Category category;
  final void Function() onSelectCategory;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {},
      splashColor: Theme.of(context).primaryColor,
      borderRadius: BorderRadius.circular(48),
      child: Container(
        padding: const EdgeInsets.all(24),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(48),
          gradient: LinearGradient(
            colors: [
              category.color.withOpacity(0.55),
              category.color.withOpacity(0.9),
            ],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        child: Text(
          category.title,
          style: Theme.of(context).textTheme.titleLarge!.copyWith(
                color: Theme.of(context).colorScheme.onSurface,
              ),
        ),
      ),
    );
  }
}

问题出在category_grid_item.dart的InkWell组件里，你给onTap传了空的匿名函数() {}，没有调用父组件传入的onSelectCategory方法。修改这部分代码即可：

return InkWell(
  onTap: onSelectCategory, // 直接传入回调函数
  splashColor: Theme.of(context).primaryColor,
  borderRadius: BorderRadius.circular(48),
  // 其余代码保持不变
);

修改后，点击卡片会触发CategoriesScreen里的_selectCategory方法，完成页面跳转，同时InkWell的水波纹效果也会正常生效。

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