题目详情页面是艺考学习应用中的核心页面，它需要完整展示题目内容、选项、答案和解析。今天我们将详细介绍如何构建一个功能丰富的题目详情页面，包含答案选择、解析显示、收藏等功能。

页面结构设计

题目详情页面采用垂直布局，从上到下依次显示题目信息、题目内容、选项区域和操作按钮。这种布局方式符合用户的阅读习惯，确保信息层次清晰。

布局设计原则

题目详情页面的布局设计遵循以下原则：

• 信息层次：从概括到具体，层次分明
• 阅读流畅：符合从上到下的阅读习惯
• 操作便捷：常用操作按钮位置合理
• 视觉平衡：各区域大小比例协调

页面组件构成

页面主要由以下组件构成：

1. 题目头部：显示分类、难度、年份等元信息
2. 题目内容：展示题目的主要文本内容
3. 选项区域：根据题型显示不同的选项界面
4. 操作按钮：提供答案显示、收藏等操作
5. 答案解析：显示正确答案和详细解析

核心页面组件的初始化代码如下，主要实现两点核心设计：

• 接收外部传入的题目数据对象，保证页面数据来源的统一性
• 定义核心状态变量，分别管控用户答题选择和答案展示状态

class QuestionDetailPage extends StatefulWidget {
  final Question question; // 接收题目参数
  
  const QuestionDetailPage({Key? key, required this.question}) : super(key: key);

  @override
  State<QuestionDetailPage> createState() => _QuestionDetailPageState();
}

接着定义页面的核心状态管理变量，这两个变量是交互逻辑的核心：

• selectedAnswer：记录用户当前选中的选项内容，适配单选/多选不同场景
• showAnswer：控制答案和解析区域的显隐，避免用户提前看到答案影响答题体验

class _QuestionDetailPageState extends State<QuestionDetailPage> {
  String? selectedAnswer; // 用户选择的答案
  bool showAnswer = false; // 是否显示答案
}

题目头部信息

题目头部信息区域展示题目的分类、科目、难度和年份等关键信息。我们使用Container配合Row布局，确保信息紧凑且易于阅读。

头部信息设计要点

头部信息的设计考虑了：

• 信息密度：在有限空间内展示关键信息
• 视觉层次：使用不同字体大小区分重要性
• 颜色编码：使用颜色区分不同类型的信息
• 布局平衡：左右分布，保持视觉平衡

头部信息组件的核心实现逻辑分为以下几点：

1. 外层容器通过浅灰色背景和圆角设计，与其他区域形成视觉区分
2. 采用Row布局并设置两端对齐，让左右侧信息分布更均衡
3. 左侧聚焦题目归属信息，右侧展示难度和年份等参考信息

Widget _buildQuestionHeader() {
  return Container(
    padding: EdgeInsets.all(12.w),
    decoration: BoxDecoration(
      color: Colors.grey[100],
      borderRadius: BorderRadius.circular(8.r),
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,

头部信息的内容填充遵循"归类展示"原则：

• 左侧文本整合分类和科目，用浅灰色字体降低视觉权重，避免抢焦点
• 右侧拆分难度标签和年份文本，通过间距分隔提升可读性

      children: [
        Text(
          '${widget.question.category} - ${widget.question.subject}',
          style: TextStyle(fontSize: 14.sp, color: Colors.grey[600]),
        ),
        Row(
          children: [
            _buildDifficultyChip(widget.question.difficulty),
            SizedBox(width: 8.w),
            Text('${widget.question.year}年'),
          ],
        ),
      ],
    ),
  );
}

信息组织逻辑

头部信息按重要性组织：

1. 分类和科目：帮助用户理解题目背景
2. 难度标识：使用颜色编码快速识别
3. 年份信息：提供时间参考

这种组织方式让用户能够快速获取题目的基本背景信息。

题目内容展示

题目内容使用Text组件展示，设置合适的字体大小和粗细，确保文字清晰可读。对于较长的题目，Text组件会自动换行，保持良好的显示效果。

文本显示优化

题目内容的显示优化包括：

• 字体选择：使用系统默认字体，确保兼容性
• 大小设置：18sp保证可读性，不过大也不过小
• 粗体强调：使用FontWeight.bold突出重要性
• 自动换行：长文本自动换行，避免溢出
• 行高设置：适当的行高提升阅读体验

题目内容展示的核心代码设计重点：

• 字体大小设置为18sp，是经过多设备验证的最佳阅读尺寸
• 启用粗体强调，让题目内容在视觉上与选项、解析区分开
• 依赖Text组件的默认换行特性，适配长题目内容展示

Widget _buildQuestionTitle() {
  return Text(
    widget.question.title,
    style: TextStyle(
      fontSize: 18.sp,
      fontWeight: FontWeight.bold,
    ),
  );
}

响应式文本处理

为了确保在不同设备上的显示效果：

• 自适应字体：使用flutter_screenutil插件
• 最大宽度限制：避免在宽屏上文字过长
• 文本对齐：使用左对齐符合阅读习惯
• 边距控制：合适的左右边距避免贴边

特殊内容处理

对于特殊题目内容：

• 数学公式：预留公式渲染接口
• 图片内容：支持图片显示和缩放
• 富文本：支持不同颜色和样式的文本
• 多语言：考虑中英文混排的显示效果

选项区域实现

选项区域是题目详情的核心部分，需要支持单选、多选和填空等不同题型。我们使用ListView.builder构建选项列表，每个选项都是一个可点击的卡片。

题型适配设计

选项区域需要适配不同题型：

• 单选题：圆形选择器，只能选择一个选项
• 多选题：方形选择器，可以选择多个选项
• 填空题：文本输入框，支持自由输入
• 判断题：对错选项，简化选择界面

选项区域的核心分支逻辑设计：

• 优先判断题型是否为填空，单独渲染输入框组件
• 单选/多选题复用基础选项列表布局，降低代码冗余
• 通过asMap()遍历选项，同时获取索引和选项内容

Widget _buildOptions() {
  if (widget.question.type == '填空') {
    return _buildFillInBlankOption();
  }

  return Column(
    children: widget.question.options.asMap().entries.map((entry) {
      final index = entry.key;
      final option = entry.value;
      final optionLetter = String.fromCharCode(65 + index);

填空题组件的设计重点围绕输入体验优化：

• 外层容器添加边框和圆角，明确输入区域范围
• 输入框取消默认边框，避免视觉重复
• 实时监听输入内容，同步更新选中答案状态

Widget _buildFillInBlankOption() {
  return Container(
    padding: EdgeInsets.all(16.w),
    decoration: BoxDecoration(
      border: Border.all(color: Colors.grey[300]!),
      borderRadius: BorderRadius.circular(8.r),
    ),
    child: TextField(
      decoration: InputDecoration(
        hintText: '请填写答案...',
        border: InputBorder.none,
      ),
      style: TextStyle(fontSize: 16.sp),
      onChanged: (value) {
        setState(() {
          selectedAnswer = value;
        });
      },
    ),
  );
}

选项卡片的交互设计核心要点：

• 点击事件添加前置判断，显示答案后禁止修改选择
• 容器通过边框颜色和背景色反馈选中状态
• 左侧圆形指示器展示选项字母（A/B/C/D），强化视觉标识

Widget _buildOptionCard(String option, String optionLetter, int index) {
  return GestureDetector(
    onTap: () {
      if (!showAnswer) {
        _handleOptionSelection(option);
      }
    },
    child: Container(
      margin: EdgeInsets.only(bottom: 12.h),
      padding: EdgeInsets.all(16.w),
      decoration: BoxDecoration(
        border: Border.all(
          color: _getOptionColor(option),
          width: 2.w,
        ),
        borderRadius: BorderRadius.circular(8.r),
        color: _getOptionBackgroundColor(option),
      ),

选项选择的核心处理逻辑，区分单选和多选场景：

• 单选题直接覆盖选中答案，保证唯一选择
• 多选题通过字符串分割/拼接实现多选项管理
• 空选择时置空selectedAnswer，避免空字符串干扰判断

void _handleOptionSelection(String option) {
  setState(() {
    if (widget.question.type == '单选') {
      selectedAnswer = option;
    } else if (widget.question.type == '多选') {
      _handleMultipleSelection(option);
    }
  });
}

void _handleMultipleSelection(String option) {
  final currentAnswers = selectedAnswer?.split(',') ?? [];
  if (currentAnswers.contains(option)) {
    currentAnswers.remove(option);
  } else {
    currentAnswers.add(option);
  }
  selectedAnswer = currentAnswers.isEmpty ? null : currentAnswers.join(',');
}

选项状态管理

选项的状态管理是题目详情页面的关键功能。我们需要根据用户的选择和答案显示状态来动态调整选项的颜色和样式。

状态管理逻辑

选项状态管理包含以下状态：

• 未选择状态：默认状态，灰色边框
• 已选择状态：蓝色边框，蓝色背景
• 正确答案：绿色边框，绿色背景（显示答案后）
• 错误答案：红色边框，红色背景（显示答案后）

选项边框颜色的动态计算逻辑：

1. 未显示答案时，仅区分选中/未选中状态（蓝色/灰色）
2. 显示答案后，优先判断是否为正确答案（绿色）
3. 若用户选错，标记为红色，其余未选选项恢复灰色

Color _getOptionColor(String option) {
  if (!showAnswer) {
    return selectedAnswer == option ? Colors.blue : Colors.grey[300]!;
  }
  
  if (option == widget.question.correctAnswer) {
    return Colors.green;
  } else if (selectedAnswer == option && option != widget.question.correctAnswer) {
    return Colors.red;
  }
  return Colors.grey[300]!;
}

选项背景色的设计遵循"弱对比"原则：

• 选中状态仅使用浅色系背景，避免遮挡文字
• 正确/错误答案的背景色与边框色同色系，强化视觉关联
• 未选中状态保持透明，减少视觉干扰

Color _getOptionBackgroundColor(String option) {
  if (!showAnswer) {
    return selectedAnswer == option ? Colors.blue[50] : Colors.transparent;
  }
  
  if (option == widget.question.correctAnswer) {
    return Colors.green[50];
  } else if (selectedAnswer == option && option != widget.question.correctAnswer) {
    return Colors.red[50];
  }
  return Colors.transparent;
}

状态转换流程

选项状态的转换流程：

1. 初始状态：所有选项都是灰色未选择状态
2. 用户选择：被选中的选项变为蓝色
3. 显示答案：根据正确性显示对应颜色
4. 重置状态：可以重新选择，恢复到初始状态

多选题特殊处理

多选题的状态管理需要特殊处理：

• 多选逻辑：支持选择多个选项
• 答案验证：需要检查所有选中的选项
• 部分正确：显示部分正确和部分错误的状态

这种状态管理确保用户能够清楚地了解自己的选择情况和答案的正确性。

操作按钮设计

操作按钮区域提供显示答案和收藏功能。我们使用Row布局将两个按钮并排显示，确保操作便捷且视觉平衡。

按钮设计原则

操作按钮的设计遵循以下原则：

• 功能明确：按钮文字和图标清晰表达功能
• 视觉区分：主要操作使用实心按钮，次要操作使用空心按钮
• 布局合理：按钮大小适中，间距合理
• 状态反馈：按钮状态变化有明确的视觉反馈

操作按钮的布局设计核心：

• 两个按钮通过Expanded均分宽度，保证视觉平衡
• 显示答案按钮使用实心样式（ElevatedButton），突出主要操作
• 收藏按钮使用空心样式（OutlinedButton），作为次要操作

Widget _buildActionButtons() {
  return Row(
    children: [
      Expanded(
        child: ElevatedButton(
          onPressed: () {
            setState(() {
              showAnswer = !showAnswer;
            });
          },
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.blue,
            padding: EdgeInsets.symmetric(vertical: 12.h),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8.r),
            ),
          ),

显示答案按钮的文本动态切换设计：

• 根据showAnswer状态切换按钮文字，提升交互直观性
• 收藏按钮点击后触发 SnackBar 提示，给用户明确的操作反馈
• 收藏逻辑预留扩展接口，可后续对接本地存储或后端接口

          child: Text(
            showAnswer ? '隐藏答案' : '显示答案',
            style: TextStyle(fontSize: 16.sp),
          ),
        ),
      ),
      SizedBox(width: 16.w),
      Expanded(
        child: OutlinedButton(
          onPressed: () {
            _handleFavoriteAction();
          },

收藏操作的反馈设计要点：

• 点击后弹出绿色背景的 SnackBar，视觉上传递"成功"的信号
• 提示文本简洁明了，时长控制在2秒，避免干扰用户操作
• 函数内部预留逻辑扩展空间，可添加收藏状态判断、接口调用等

void _handleFavoriteAction() {
  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(
      content: Text('已收藏'),
      backgroundColor: Colors.green,
      duration: Duration(seconds: 2),
    ),
  );
}

按钮交互体验

按钮的交互体验设计：

• 点击反馈：按下时有颜色变化和阴影效果
• 状态切换：显示答案按钮文字动态变化
• 操作确认：收藏操作有Toast提示
• 防误操作：重要操作可以添加确认对话框

响应式按钮设计

按钮的响应式设计：

• 自适应宽度：使用Expanded确保按钮等宽
• 触摸区域：设置合适的最小触摸目标
• 可访问性：添加语义描述支持屏幕阅读器

答案解析区域

答案解析区域在用户点击"显示答案"后出现，展示正确答案和详细解析。我们使用绿色主题色突出显示正确答案，增强视觉反馈。

解析区域设计要点

答案解析区域的设计考虑：
突出显示：正确答案使用绿色突出
层次清晰：答案和解析分层显示
可读性：合适的字体大小和行距
视觉引导：使用颜色和图标引导注意力

解析区域的容器设计核心：

• 浅绿色背景+绿色边框，与正确答案的视觉风格统一
• 内边距和圆角设计，提升区域的视觉舒适度
• 采用Column垂直布局，按"答案-解析-操作"的逻辑分层展示

Widget _buildAnswerExplanation() {
  return Container(
    padding: EdgeInsets.all(16.w),
    decoration: BoxDecoration(
      color: Colors.green[50],
      borderRadius: BorderRadius.circular(8.r),
      border: Border.all(color: Colors.green[200]!),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildCorrectAnswerDisplay(),
        SizedBox(height: 12.h),
        Text(
          '解析：',
          style: TextStyle(
            fontSize: 16.sp,
            fontWeight: FontWeight.bold,
          ),
        ),

正确答案展示的视觉强化设计：

• 左侧添加绿色对勾图标，直观传递"正确"的视觉信号
• 文字使用粗体+深绿色，与普通文本形成视觉区分
• 答案文本直接拼接，保证信息展示的完整性

Widget _buildCorrectAnswerDisplay() {
  return Row(
    children: [
      Icon(
        Icons.check_circle,
        color: Colors.green[700],
        size: 20.w,
      ),
      SizedBox(width: 8.w),
      Text(
        '正确答案：${widget.question.correctAnswer}',
        style: TextStyle(
          fontSize: 16.sp,
          fontWeight: FontWeight.bold,
          color: Colors.green[700],
        ),
      ),
    ],
  );
}

解析内容的排版优化设计：

• 字体大小设置为14sp，略小于题目内容，突出主次关系
• 行高设置为1.5，提升大段文本的阅读舒适度
• 文字颜色使用黑色87%透明度，降低视觉冲击力

Widget _buildExplanationContent() {
  return Text(
    widget.question.explanation,
    style: TextStyle(
      fontSize: 14.sp,
      height: 1.5,
      color: Colors.black87,
    ),
  );
}

解析区域的扩展功能设计：

• 提供复制和分享两个常用功能，提升学习效率
• 按钮使用TextButton.icon样式，图标+文字组合更直观
• 字体大小设置为12sp，作为次要操作弱化视觉权重

Widget _buildExplanationActions() {
  return Container(
    margin: EdgeInsets.only(top: 12.h),
    child: Row(
      children: [
        TextButton.icon(
          onPressed: () {
            _copyExplanation();
          },
          icon: Icon(Icons.copy, size: 16.w),
          label: Text('复制解析', style: TextStyle(fontSize: 12.sp)),
        ),
      ],
    ),
  );
}

解析内容优化

解析内容的显示优化：
格式化显示：支持富文本和Markdown格式
图片支持：解析中的图片能够正常显示
链接处理：解析中的链接可以点击
代码高亮：编程题目的代码高亮显示

用户交互增强

解析区域的用户交互增强：
复制功能：一键复制解析内容
分享功能：分享到社交媒体或学习群
收藏解析：单独收藏优质解析
相关题目：显示相关题目推荐

这种设计让答案解析不仅是简单的文本显示，而是一个功能丰富的学习工具。

响应式设计

题目详情页面需要适配不同屏幕尺寸。我们使用flutter_screenutil插件确保在不同设备上都有良好的显示效果。字体大小、间距等都使用相对单位，保证布局的一致性。

屏幕适配策略

屏幕适配的策略包括：
相对单位：使用sp、w、h等相对单位
断点设计：针对不同屏幕尺寸的断点设计
布局调整：小屏幕上的布局优化
字体缩放：支持系统字体大小设置

通过以上实现，我们创建了一个功能完善、交互友好的题目详情页面。这个页面不仅满足了基本的题目展示需求，还提供了丰富的交互功能和良好的视觉效果。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net