حاسبة الإكرامية: إعادة الضبط
جزء من قسم إضافة التفاعلية في رحلة Flutter على Coddy. الدرس 34 من 34.
اللمسة الأخيرة هي زر Reset يعيد كل شيء إلى البداية: حقل فارغ، وبقشيش بنسبة 10%، وشخص واحد.
الأرقام موجودة في الحالة، لذا يمكن لـ setState إعادتها إلى قيمها الأصلية. أما الحقل فهو الجزء الأصعب: فهو يحتفظ بنصه الخاص، وتعيين _bill إلى 0 لا يفرغه. سترى 40 في الحقل بينما يعمل التطبيق بالقيمة 0. لإفراغه، يحتاج الحقل إلى وحدة تحكم، كما في «قراءة حقل باستخدام وحدة تحكم»:
final TextEditingController _billController = TextEditingController();
void _reset() {
_billController.clear();
setState(() {
_bill = 0;
// والإكرامية وعدد الأشخاص
});
}يحتفظ الحقل بـ onChanged: وحدة التحكم موجودة فقط لكي يتمكن _reset من إفراغه. تذكّر التخلص منها.
التحدي
سهل- امنح الحقل
TextEditingControllerباسم_billController، وتخلّص منه. - أضف في الأسفل
TextButtonبعنوانResetيفرّغ الحقل ويعيد قيمة الفاتورة إلى 0، والإكرامية إلى 10، وعدد الأشخاص إلى 1.
جرّب بنفسك
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,
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
double _bill = 0;
double _tipPercent = 10;
int _people = 1;
@override
Widget build(BuildContext context) {
final double tip = _bill * _tipPercent / 100;
final double each = (_bill + tip) / _people;
return Scaffold(
appBar: AppBar(title: const Text('Tip Calculator')),
body: Padding(
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextField(
keyboardType: const TextInputType.numberWithOptions(decimal: true),
decoration: const InputDecoration(
labelText: 'Bill',
border: OutlineInputBorder(),
),
onChanged: (String value) {
setState(() {
_bill = double.tryParse(value) ?? 0;
});
},
),
const SizedBox(height: 8),
Text('Bill: ${_bill.toStringAsFixed(2)}'),
const SizedBox(height: 24),
Text('Tip: ${_tipPercent.round()}%', style: const TextStyle(fontSize: 20)),
Slider(
value: _tipPercent,
min: 0,
max: 30,
divisions: 6,
onChanged: (double value) {
setState(() {
_tipPercent = value;
});
},
),
Text('Tip amount: ${tip.toStringAsFixed(2)}'),
const SizedBox(height: 24),
Row(
children: [
Text('People: $_people', style: const TextStyle(fontSize: 20)),
const SizedBox(width: 16),
IconButton(
icon: const Icon(Icons.remove),
onPressed: _people > 1
? () {
setState(() {
_people--;
});
}
: null,
),
IconButton(
icon: const Icon(Icons.add),
onPressed: () {
setState(() {
_people++;
});
},
),
],
),
const SizedBox(height: 24),
Text(
'Each person pays \$${each.toStringAsFixed(2)}',
style: const TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
),
],
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس إضافة التفاعلية
1الأزرار
زرّك الأولالطباعة في وحدة التحكمالأزرار النصية والمحددة بإطارأزرار الأيقوناتزر الإجراء العائم7مفاتيح التبديل وشرائح التمرير
التشغيل والإيقاف باستخدام مفتاححدّد مربع الاختياراختر قيمة باستخدام شريط التمرير5اتخاذ القرارات
bool والعامل ? :اتخاذ القرارات باستخدام if وelseAnd وOr وNot في Dartإظهار وإخفاء عنصر واجهةتعطيل زر بصريًا8مشروع: حاسبة الإكرامية
حاسبة الإكرامية: الفاتورةحاسبة الإكرامية: الإكراميةتدرّب بنفسك: مترجم Flutter عبر الإنترنت