Flutter：选中GridView项后通过悬浮按钮跳转对应页面问题咨询

你的问题核心是数据模型错误存储了页面的字符串表示，且悬浮按钮的跳转逻辑未实现。以下是具体修正步骤：

1. 修正数据模型 #

把Selectclass里的字符串类型quizdetails改成Widget类型，直接存储目标页面实例，而非字符串：

class Selectclass {
  final String selectedclasse;
  final String quizimage;
  final Widget quizPage; // 改为Widget类型，直接存页面实例
  Selectclass({
    required this.selectedclasse,
    required this.quizimage,
    required this.quizPage,
  });
}

final List<Selectclass> quizclasses = [
  Selectclass(
    selectedclasse: "title",
    quizimage: "assets/virus.png",
    quizPage: const ViralQuiz(), // 传入实际页面实例
  ),
  Selectclass(
    selectedclasse: "title1",
    quizimage: "assets/virus.png",
    quizPage: const ViralQuiz(),
  ),
];

2. 简化GridView参数传递 #

原代码中serviceContainer的第四个参数传错了，且该参数在当前逻辑中无用，直接简化：

// 修改GridView的itemBuilder调用
itemBuilder: (context, index) {
  return serviceContainer(
    quizclasses[index].quizimage,
    quizclasses[index].selectedclasse,
    index,
  );
}

// 简化serviceContainer函数参数
serviceContainer(String image, String name, int index) {
  return GestureDetector(
    onTap: () {
      setState(() {
        selectedService = selectedService == index ? -1 : index;
      });
    },
    // 原有AnimatedContainer代码保持不变...
  );
}

3. 实现悬浮按钮跳转逻辑 #

在FloatingActionButton的onPressed中，根据选中的索引获取目标页面，通过Navigator完成跳转：

floatingActionButton: selectedService >= 0 
    ? FloatingActionButton(
        onPressed: () {
          // 获取选中项对应的页面
          final targetPage = quizclasses[selectedService].quizPage;
          // 执行页面跳转
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => targetPage),
          );
        },
        child: const Icon(Icons.arrow_forward_ios, size: 20),
      ) 
    : null,

可选优化：支持带参数的页面跳转 #

如果目标页面需要传递参数，可以把quizPage改成页面构造函数类型：

class Selectclass {
  final String selectedclasse;
  final String quizimage;
  final Widget Function(BuildContext) pageBuilder;
  Selectclass({
    required this.selectedclasse,
    required this.quizimage,
    required this.pageBuilder,
  });
}

// 初始化列表时传入带参数的页面构造
final List<Selectclass> quizclasses = [
  Selectclass(
    selectedclasse: "title",
    quizimage: "assets/virus.png",
    pageBuilder: (context) => ViralQuiz(quizTitle: "病毒知识测试"),
  ),
];

// 跳转时调用构造函数
Navigator.push(
  context,
  MaterialPageRoute(builder: quizclasses[selectedService].pageBuilder),
);

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