Flutter中点击GridView不同项跳转至同一页面加载对应列表的实现方法

你只需要做3处调整即可实现需求，后续新增科目无需再单独创建页面：

1. 整合科目-题目映射关系 #

先把已定义的各科目题目列表统一放到Map中管理，后续新增科目仅需在映射表中新增对应配置即可：

// 你原有的题目列表定义保持不变
final first = const [
  {
    'question': '新西兰九十英里滩的实际长度是多少？',
    'answers': [
      {'answerText': '88公里，即55英里', 'score': true},
      {'answerText': '55公里，即34英里', 'score': false},
      {'answerText': '90公里，即56英里', 'score': false},
    ],
  },
  // 剩余题目内容不变
];

final second = const [
  {
    'question': '在美国佐治亚州，用叉子吃以下哪种食物是违法的？',
    'answers': [
      {'answerText': '汉堡', 'score': false},
      {'answerText': '炸鸡', 'score': true},
      {'answerText': '披萨', 'score': false},
    ],
  },
  // 剩余题目内容不变
];

// 新增科目与题目对应的映射表
final Map<String, List<Map<String, dynamic>>> subjectQuestionMap = {
  "常识科目": first,
  "趣味冷知识": second,
  // 后续新增科目直接在这里加键值对即可，无需修改页面逻辑
};

2. 开发通用题目列表页面 #

新建统一的题目页面，接收传入的科目标识，自动加载对应题目，所有科目复用这一个页面：

import 'package:flutter/material.dart';

class CommonQuestionPage extends StatelessWidget {
  // 接收点击的科目名称
  final String subjectName;
  const CommonQuestionPage({super.key, required this.subjectName});

  @override
  Widget build(BuildContext context) {
    // 根据传入的科目名称获取对应题目列表
    final questionList = subjectQuestionMap[subjectName] ?? [];
    
    return Scaffold(
      appBar: AppBar(
        title: Text(subjectName),
      ),
      body: ListView.builder(
        padding: const EdgeInsets.all(16),
        itemCount: questionList.length,
        itemBuilder: (context, index) {
          final questionItem = questionList[index];
          // 直接复用你之前单科目页面的题目、选项渲染逻辑即可
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                "${index+1}. ${questionItem['question']}",
                style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 12),
              ...List.generate(questionItem['answers'].length, (answerIndex) {
                final answer = questionItem['answers'][answerIndex];
                return ListTile(
                  title: Text(answer['answerText']),
                  onTap: () {
                    // 原有选项点击、判分逻辑直接复用
                  },
                );
              }),
              const SizedBox(height: 24),
            ],
          );
        },
      ),
    );
  }
}

3. 修改网格项跳转逻辑 #

调整GridView每个item的点击事件，跳转到通用页面时传入当前点击的科目名称即可：

// 假设你的GridView数据源是科目名称列表，比如List<String> subjects = ["常识科目", "趣味冷知识", ...]
GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
  itemCount: subjects.length,
  itemBuilder: (context, index) {
    final currentSubject = subjects[index];
    return GestureDetector(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => CommonQuestionPage(subjectName: currentSubject),
          ),
        );
      },
      child: Card(
        child: Center(child: Text(currentSubject)),
      ),
    );
  },
)

扩展说明 #

如果你的题目数据是从后端接口获取而非本地硬编码，也可以在点击网格项时先请求对应科目的题目数据，再把拿到的题目列表直接作为参数传给CommonQuestionPage，无需本地维护映射表，逻辑完全一致。

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