Flutter/Dart开发千题级Quiz学习应用的技术问题咨询

1. 构建支持多选项、多正确答案的题目列表 #

先设计灵活的数据模型，无需刻意区分4/5选项类型，让模型动态兼容即可：

class QuizQuestion {
  final String id;
  final String questionText;
  final List<QuizOption> options;
  final bool isMultipleChoice; // 标记是否为多选题，按需启用

  QuizQuestion({
    required this.id,
    required this.questionText,
    required this.options,
    this.isMultipleChoice = false,
  });

  // 从JSON解析的构造方法，适配批量导入
  factory QuizQuestion.fromJson(Map<String, dynamic> json) {
    var optionsList = json['options'] as List;
    List<QuizOption> options = optionsList.map((i) => QuizOption.fromJson(i)).toList();
    
    return QuizQuestion(
      id: json['id'],
      questionText: json['questionText'],
      options: options,
      isMultipleChoice: json['isMultipleChoice'] ?? false,
    );
  }
}

class QuizOption {
  final String text;
  final bool isCorrect;

  QuizOption({required this.text, required this.isCorrect});

  factory QuizOption.fromJson(Map<String, dynamic> json) {
    return QuizOption(
      text: json['text'],
      isCorrect: json['isCorrect'],
    );
  }
}

初始化题目时，直接传入对应数量的选项即可：

// 4选项示例
final singleChoiceQ = QuizQuestion(
  id: "q1",
  questionText: "Dart属于哪种类型的语言？",
  options: [
    QuizOption(text: "静态类型", isCorrect: true),
    QuizOption(text: "动态类型", isCorrect: false),
    QuizOption(text: "脚本语言", isCorrect: false),
    QuizOption(text: "标记语言", isCorrect: false),
  ],
);

// 5选项多选题示例
final multiChoiceQ = QuizQuestion(
  id: "q2",
  questionText: "以下属于Flutter状态管理方案的是？",
  options: [
    QuizOption(text: "Riverpod", isCorrect: true),
    QuizOption(text: "Provider", isCorrect: true),
    QuizOption(text: "Bloc", isCorrect: true),
    QuizOption(text: "SQLite", isCorrect: false),
    QuizOption(text: "Hive", isCorrect: false),
  ],
  isMultipleChoice: true,
);

批量导入建议：1250道题绝对不要硬编码，用Excel整理后导出为JSON/CSV，再通过rootBundle加载解析：

Future<List<QuizQuestion>> loadAllQuestions() async {
  final jsonStr = await rootBundle.loadString('assets/questions.json');
  final jsonList = jsonDecode(jsonStr) as List;
  return jsonList.map((json) => QuizQuestion.fromJson(json)).toList();
}

2. 便捷创建题目卡片 #

核心是封装可复用组件+动态渲染，避免重复劳动：

步骤1：封装QuizCard组件 #

class QuizCard extends StatelessWidget {
  final QuizQuestion question;
  final void Function(QuizOption) onOptionTap;

  const QuizCard({
    super.key,
    required this.question,
    required this.onOptionTap,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              question.questionText,
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 16),
            // 动态渲染选项，自动适配4/5个选项
            ...question.options.map((option) {
              return Padding(
                padding: const EdgeInsets.only(bottom: 8),
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: option.isCorrect ? Colors.green.shade100 : null,
                  ),
                  onPressed: () => onOptionTap(option),
                  child: Text(option.text),
                ),
              );
            }).toList(),
          ],
        ),
      ),
    );
  }
}

步骤2：批量渲染所有卡片 #

用ListView.builder实现懒加载，避免一次性加载1250个组件导致性能问题：

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

  @override
  State<QuizListPage> createState() => _QuizListPageState();
}

class _QuizListPageState extends State<QuizListPage> {
  late Future<List<QuizQuestion>> _questionsFuture;

  @override
  void initState() {
    super.initState();
    _questionsFuture = loadAllQuestions();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("学习Quiz")),
      body: FutureBuilder<List<QuizQuestion>>(
        future: _questionsFuture,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                return QuizCard(
                  question: snapshot.data![index],
                  onOptionTap: (option) {
                    // 处理选项点击逻辑，比如判断对错、记录答案
                  },
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('加载失败: ${snapshot.error}'));
          }
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

3. Dart/Flutter是否为合适选择？ #

Dart+Flutter是这个场景下的最优选择之一，理由如下：

• 跨平台：一套代码覆盖iOS、Android、Web，节省开发和维护成本，适合学习类工具的大范围推广。
• 性能：Dart的JIT/AOT编译模式保证应用流畅运行，1250道题的本地解析、渲染完全无压力。
• 开发效率：热重载功能极大提升调试速度，能快速迭代题目卡片的UI和交互逻辑。
• 生态：有大量成熟第三方包简化开发，比如状态管理（Riverpod/Provider）、本地存储（Hive/SQLite）等。

替代方案对比：

• 原生开发（Swift/Kotlin）：需要维护两套代码，开发周期长，不适合1250道题的快速迭代。
• React Native：虽跨平台，但JavaScript性能略逊于Dart，且Flutter的UI一致性更好，无原生组件适配烦恼。

除非你有极强的原生依赖需求，否则Dart+Flutter完全能满足需求。

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