Flutter测验应用结果页样式失效问题排查求助

问题描述 #

开发基础测验应用时，结果页面展示用户答案与正确答案的字体、颜色样式未按预期生效，相关样式代码看似未起作用。

代码问题分析 #

从提供的SummaryItem代码中，能定位到几个关键错误：

1. 索引参数类型错误
   传给QuestionIdentifier的questionIndex用了itemData['question'] as int，但itemData['question']实际是字符串类型的题目内容，强行转int会引发运行时异常，导致组件渲染异常，样式无法正常应用。

2. 颜色类调用错误
   题目文本的颜色写为Color.white，正确写法应为Colors.white（Flutter中颜色常量在Colors类下，而非Color类）。

3. Google Fonts调用错误
   使用GoogleFont.lato而非正确的GoogleFonts.lato（注意复数形式），导致自定义字体样式不生效，会 fallback 到系统默认字体。

修正后的代码 #

import 'package:adv_basics/question_identifier.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class SummaryItem extends StatelessWidget {
  const SummaryItem(this.itemData, {super.key});

  final Map<String, Object> itemData;

  @override
  Widget build(BuildContext context) {
    final isCorrectAnswer =
        itemData['user_answer'] == itemData['correct_answer'];

    return Padding(
      padding: const EdgeInsets.symmetric(
        vertical: 8,
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          QuestionIdentifier(
            isCorrectAnswer: isCorrectAnswer,
            // 假设数据中存储索引的键是'question_index'，请根据实际数据结构调整
            questionIndex: itemData['question_index'] as int,
          ),
          const SizedBox(width: 20),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  itemData['question'] as String,
                  style: GoogleFonts.lato(
                    color: Colors.white, // 修正为Colors.white
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(
                  height: 5,
                ),
                Text(
                  itemData['user_answer'] as String,
                  style: const TextStyle(
                    color: Color.fromARGB(255, 202, 171, 252),
                  ),
                ),
                Text(
                  itemData['correct_answer'] as String,
                  style: const TextStyle(
                    color: Color.fromARGB(255, 181, 254, 246),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

额外注意事项 #

• 确认itemData中确实包含正确的题目索引字段（比如question_index），需与数据源的键名对应。
• 确保google_fonts依赖已正确添加到pubspec.yaml并执行flutter pub get。

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