حاسبة الإكرامية: الإكرامية
جزء من قسم إضافة التفاعلية في رحلة Flutter على Coddy. الدرس 31 من 34.
بعد ذلك، الإكرامية. يختارها Slider من 0 إلى 30 بالمئة بخطوات مقدارها 5، ويعرض التطبيق مقدار المال الذي تمثله.
احتفظ بنسبة الإكرامية في الحالة كقيمة double تبدأ من 10. مبلغ الإكرامية ليس شيئًا تخزّنه؛ فهو يُستنتج من الفاتورة والنسبة، لذا احسبه في بداية build كقيمة final:
final double tip = _bill * _tipPercent / 100;كل استدعاء لـ setState، سواء أكان من الحقل أم من شريط التمرير، يعيد بناء الشاشة، ويُعاد حساب tip باستخدام القيم الجديدة.
التحدي
سهل- أسفل الفاتورة، اعرض
Tip: 10%وشريط تمريرSliderمن0إلى30مقسمًا إلى6أقسام، ويبدأ عند 10. - أسفل شريط التمرير، اعرض
Tip amount: 4.00لفاتورة مقدارها 40، مع منزلتين عشريتين.
جرّب بنفسك
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;
@override
Widget build(BuildContext context) {
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)}'),
],
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس إضافة التفاعلية
1الأزرار
زرّك الأولالطباعة في وحدة التحكمالأزرار النصية والمحددة بإطارأزرار الأيقوناتزر الإجراء العائم7مفاتيح التبديل وشرائح التمرير
التشغيل والإيقاف باستخدام مفتاححدّد مربع الاختياراختر قيمة باستخدام شريط التمرير5اتخاذ القرارات
bool والعامل ? :اتخاذ القرارات باستخدام if وelseAnd وOr وNot في Dartإظهار وإخفاء عنصر واجهةتعطيل زر بصريًا8مشروع: حاسبة الإكرامية
حاسبة الإكرامية: الفاتورةحاسبة الإكرامية: الإكراميةتدرّب بنفسك: مترجم Flutter عبر الإنترنت