الاختبار القصير: احتساب النقاط
جزء من قسم المشاريع في رحلة Flutter على Coddy. الدرس 13 من 36.
يكون الاختبار أكثر متعة عندما تتمكن من معرفة أدائك. احتفظ بالنتيجة في الحالة، وأضف نقطة لكل إجابة صحيحة، واعرضها في الشريط العلوي.
أفضل مكان للعد هو _pick، داخل setState نفسها التي تحفظ الإجابة. قارن الإجابة التي تلقيتها، answer، بالإجابة الصحيحة:
setState(() {
_picked = answer;
if (answer == _question.correct) {
_score++;
}
});يمنع الحارس في بداية _pick النقر مرة ثانية، لذا يمكن لكل سؤال أن يضيف نقطة واحدة كحد أقصى.
يأخذ AppBar الخاصية actions:، وهي قائمة من العناصر المرئية في طرفه الأيمن. ضع النتيجة هناك، داخل Center لتكون في منتصف ارتفاع الشريط، مع حشوة مقدارها 16 بكسل من اليمين.
التحدي
متوسطاحتفظ بالنتيجة:
- أضف
int _score = 0;إلى الحالة - في
_pick، أضف واحدًا إليها عندما تكون الإجابة صحيحة - اعرض
Score: 0(مع النتيجة الفعلية) فيactionsللشريط العلوي، بنمطtitleMediumالخاص بالسمة، مع توسيطه وإضافة مساحة داخلية بمقدار 16 بكسل إلى اليمين
جرّب بنفسك
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> {
int _index = 0;
int? _picked;
Question get _question => questions[_index];
bool get _answered => _picked != null;
bool get _isLast => _index == questions.length - 1;
void _pick(int answer) {
if (_answered) return;
setState(() {
_picked = answer;
});
}
void _next() {
setState(() {
_index++;
_picked = null;
});
}
Color? _colorFor(int answer) {
if (!_answered) return null;
if (answer == _question.correct) return Colors.green;
if (answer == _picked) return Colors.red;
return null;
}
@override
Widget build(BuildContext context) {
final question = _question;
final textTheme = Theme.of(context).textTheme;
return Scaffold(
appBar: AppBar(title: const Text('Flutter Quiz')),
body: Padding(
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
'Question ${_index + 1} of ${questions.length}',
style: textTheme.labelLarge,
),
const SizedBox(height: 24),
Text(question.text, style: textTheme.headlineSmall),
const SizedBox(height: 24),
for (int i = 0; i < question.answers.length; i++)
Padding(
padding: const EdgeInsets.only(bottom: 12),
child: FilledButton.tonal(
style: FilledButton.styleFrom(
backgroundColor: _colorFor(i),
foregroundColor: _colorFor(i) == null ? null : Colors.white,
padding: const EdgeInsets.all(16),
),
onPressed: () => _pick(i),
child: Text(question.answers[i]),
),
),
if (_answered && !_isLast)
FilledButton(
onPressed: _next,
child: const Text('Next'),
),
],
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس المشاريع
تدرّب بنفسك: مترجم Flutter عبر الإنترنت