Flutter测验应用：题型组件切换逻辑实现求助

一、实现组件切换与子父组件通信 #

核心是通过回调函数让子组件通知主页面答题结果，主页面维护当前显示的测验组件索引，根据结果更新索引完成组件切换。

1. 主页面（LearnView）逻辑改造 #

主页面需要完成三个核心动作：维护当前组件索引、定义结果回调函数、根据结果切换组件：

class LearnView extends StatefulWidget {
  const LearnView({super.key});

  @override
  State<LearnView> createState() => _LearnViewState();
}

class _LearnViewState extends State<LearnView> {
  // 按顺序存放你的5个测验组件
  final List<Widget> _quizComponents = [
    LearnImageTestView(onAnswerCheck: _handleAnswerResult),
    // 替换为你的其他4个题型组件
    // TextFieldQuizView(onAnswerCheck: _handleAnswerResult),
    // ...
  ];

  int _currentQuizIndex = 0;

  // 处理子组件传来的答题结果
  void _handleAnswerResult(bool isCorrect) {
    if (isCorrect) {
      setState(() {
        // 切换到下一个组件，循环测验就用取模：_currentQuizIndex = (_currentQuizIndex + 1) % _quizComponents.length;
        _currentQuizIndex = _currentQuizIndex < _quizComponents.length - 1 
            ? _currentQuizIndex + 1 
            : 0; // 所有题做完重置到第一题
      });
    } else {
      // 错误提示，比如弹出SnackBar
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('答案错误，再试一次！')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('测验应用')),
      body: _quizComponents[_currentQuizIndex], // 渲染当前测验组件
    );
  }
}

2. 子组件（LearnImageTestView）改造 #

子组件接收主页面的回调函数，在用户选择正确选项时触发回调：

class LearnImageTestView extends StatelessWidget {
  // 接收主页面的回调函数
  final Function(bool isCorrect) onAnswerCheck;

  const LearnImageTestView({super.key, required this.onAnswerCheck});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 你的图片题目区域
        const Image(image: AssetImage('assets/quiz_image.png')),
        // 选项按钮示例
        ElevatedButton(
          onPressed: () {
            // 替换为你的实际答案判断逻辑
            bool isCorrect = true;
            onAnswerCheck(isCorrect); // 通知主页面结果
          },
          child: const Text('正确选项'),
        ),
        ElevatedButton(
          onPressed: () {
            onAnswerCheck(false);
          },
          child: const Text('错误选项'),
        ),
      ],
    );
  }
}

二、组件改页面是否合理？ #

分两种场景判断：

• 适合改成页面（Route）的情况：

  • 每个题型需要独立的AppBar、底部导航等页面级元素
  • 题型布局差异极大，几乎没有复用部分
  • 需要支持返回上一题的操作
    这种情况下用Navigator.push/pushReplacement切换页面更合适，每个页面带自己的Scaffold，状态可以通过路由传参或全局状态管理传递。

• 适合保留组件切换的情况：

  • 所有题型共享统一的页面框架（比如顶部进度条、底部提交栏），仅答题区域不同
  • 希望保持流畅的切换动画，减少页面跳转的开销
  • 不需要返回上一题，仅线性推进测验
    这种场景下用组件切换更高效，代码结构更集中。

额外优化建议 #

• 把测验题目、选项、正确答案等数据抽成独立的模型类，通过数据驱动UI，避免硬编码组件列表，后续新增题型更方便。
• 如果项目复杂度提升，可改用Riverpod或Provider替代回调函数，更方便跨组件传递状态。

内容的提问来源于stack exchange，提问作者Furkan Balcı