Flutter中如何调用其他文件的函数绑定到InkWell的onTap事件？

Flutter中跨组件传递回调函数可以通过给子组件声明可接收的函数类型参数实现，具体步骤如下：

步骤1：修改answer.dart中的Answer组件，新增可接收的回调参数 #

首先你需要给自定义的Answer组件新增两个参数：

• 回调函数，用于接收父组件传递的onQuestionAnswered方法
• 布尔参数，标记当前选项是否为正确答案，用于触发回调时传参
  如果你的Answer组件已经声明过answerText、answerBackgroundColor等参数，不需要重复声明，只需要新增后面两个参数即可
  修改后的完整代码如下：

import 'package:flutter/material.dart';

class Answer extends StatelessWidget {
  // 原有参数
  final String answerText;
  final Color answerBackgroundColor;
  // 新增两个参数
  final bool isCorrectAnswer; // 标记当前答案是否正确
  final ValueChanged<bool> onAnswerSelected; // 接收父组件传的回调函数

  const Answer({
    super.key,
    required this.answerText,
    required this.answerBackgroundColor,
    required this.isCorrectAnswer,
    required this.onAnswerSelected,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      // 点击时触发回调，把当前答案的正误状态传出去
      onTap: () => onAnswerSelected(isCorrectAnswer),
      child: Padding(
        padding: const EdgeInsets.only(top: 20, left: 20, right: 20),
        child: Container(
          width: double.infinity,
          height: 50,
          decoration: BoxDecoration(
              border: Border.all(color: answerBackgroundColor),
              borderRadius: BorderRadius.circular(10)),
          child: Center(
              child: Text(answerText,
                  style: const TextStyle(
                      fontSize: 18, fontWeight: FontWeight.w500))),
        ),
      ),
    );
  }
}

步骤2：在questionsscreen.dart中使用Answer组件时，传入onQuestionAnswered方法 #

在你渲染Answer选项的位置，把当前选项的正误状态和onQuestionAnswered方法一起传给Answer组件即可，示例代码如下：

// 假设你在遍历题目选项列表渲染Answer组件
ListView.builder(
  itemCount: currentQuestion.answers.length,
  itemBuilder: (context, index) {
    final answer = currentQuestion.answers[index];
    return Answer(
      answerText: answer.content,
      answerBackgroundColor: Colors.blue, // 替换为你自己的业务配色
      isCorrectAnswer: answer.isCorrect, // 对应你业务中当前选项的正误属性
      onAnswerSelected: onQuestionAnswered, // 直接把父组件的方法传进去
    );
  },
)

核心逻辑说明 #

• ValueChanged<bool>是Flutter内置的类型，等价于void Function(bool value)，专门用于单参数的回调场景
• 点击Answer组件时，会直接把当前答案的正误状态作为参数传给父组件的onQuestionAnswered方法，触发父组件的setState更新逻辑

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