حاسبة الإكرامية: الأشخاص
جزء من قسم إضافة التفاعلية في رحلة Flutter على Coddy. الدرس 32 من 34.
غالبًا ما يُقسَّم مبلغ الفاتورة بين عدة أشخاص. أضف صفًا يتضمن عدد الأشخاص وزري أيقونات، أحدهما للطرح والآخر للجمع، مثل العداد الذي أنشأته في «عداد للأعلى وللأسفل».
يدفع شخص واحد على الأقل دائمًا، لذا يصبح زر الطرح رماديًا عند 1. يصبح IconButton رماديًا بالطريقة نفسها التي تصبح بها الأزرار الأخرى، باستخدام onPressed: null. عندما تكون الدالة قصيرة، يمكنك كتابتها مباشرةً داخل ? ::
onPressed: _people > 1
? () {
setState(() {
_people--;
});
}
: null,تُبقي SizedBox(width: 16) في الصف الأزرار بعيدة قليلًا عن النص.
التحدي
سهل- احتفِظ بعدد الأشخاص في
int _people = 1; - أضِف أسفل مبلغ الإكرامية عنصر
Rowيحتوي علىPeople: 1، وعنصرIconButtonمعIcons.removeوآخر معIcons.add. - يضيف زر الجمع شخصًا. ويُزيل زر الطرح شخصًا، ويظهر باللون الرمادي عندما يكون العدد 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;
@override
Widget build(BuildContext context) {
final double tip = _bill * _tipPercent / 100;
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)}'),
],
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس إضافة التفاعلية
1الأزرار
زرّك الأولالطباعة في وحدة التحكمالأزرار النصية والمحددة بإطارأزرار الأيقوناتزر الإجراء العائم7مفاتيح التبديل وشرائح التمرير
التشغيل والإيقاف باستخدام مفتاححدّد مربع الاختياراختر قيمة باستخدام شريط التمرير5اتخاذ القرارات
bool والعامل ? :اتخاذ القرارات باستخدام if وelseAnd وOr وNot في Dartإظهار وإخفاء عنصر واجهةتعطيل زر بصريًا8مشروع: حاسبة الإكرامية
حاسبة الإكرامية: الفاتورةحاسبة الإكرامية: الإكراميةتدرّب بنفسك: مترجم Flutter عبر الإنترنت