测验：问题

本课属于 Coddy Flutter 学习旅程的“项目”单元。第 10 课，共 36 课。

第二个应用是一个关于 Flutter 本身的测验：一道问题、四个可点击的答案，答对显示绿色，答错显示红色，还有分数和结果页面。

初始代码中已经包含这些问题。每个问题都是一个 Question，包含问题文本、四个答案，以及正确答案的位置：

Question('Which language do you write Flutter apps in?',
    ['Kotlin', 'Swift', 'Dart', 'JavaScript'], 2),

位置从 0 开始，所以 2 对应 'Dart'。状态会保存 _index，也就是当前问题的索引，而 questions[_index] 就是当前问题。

答案通过 for 集合放在 Column 中：每个答案对应一个按钮。FilledButton.tonal 是一个采用主题色的柔和填充按钮，适合用于一组选项。设置 crossAxisAlignment: CrossAxisAlignment.stretch 后，列中的每个子项都会延伸到和列一样宽，因此四个按钮会并排对齐，边缘相接。

挑战

简单

显示第一个问题：

在状态中添加 int _index = 0;
将 Center 替换为 Column，并添加 24 像素的内边距，让子项横向拉伸
在其中，使用主题的 headlineSmall 样式显示问题文本，留出 24 像素的间距，然后为每个答案添加一个 FilledButton.tonal，按钮内部有 16 像素的内边距，每个按钮下方留出 12 像素的间距

亲手试试

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const QuizScreen(),
    );
  }
}

class Question {
  const Question(this.text, this.answers, this.correct);

  final String text;
  final List<String> answers;
  final int correct;
}

const List<Question> questions = [
  Question('Which widget stacks its children from top to bottom?', ['Row', 'Column', 'Stack', 'Wrap'], 1),
  Question('Which language do you write Flutter apps in?', ['Kotlin', 'Swift', 'Dart', 'JavaScript'], 2),
  Question('What does setState do?', ['Rebuilds the widget', 'Saves the app', 'Closes the screen', 'Plays a sound'], 0),
  Question('Which widget shows a list you can scroll?', ['Container', 'SizedBox', 'Padding', 'ListView'], 3),
  Question('Which widget adds space around its child?', ['Padding', 'Center', 'Icon', 'Text'], 0),
];

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

  @override
  State<QuizScreen> createState() => _QuizScreenState();
}

class _QuizScreenState extends State<QuizScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Quiz')),
      body: const Center(
        child: Text('Your quiz goes here'),
      ),
    );
  }
}