في نافذة الطباعة اختر «حفظ كملف PDF» كوجهة.
نظم التشغيل 2 - المعمل 05
التخطيط، المعمارية ثلاثية الطبقات، السمات المركزية، نماذج البيانات، وطبقة المنطق
يفصل كل تطبيق Flutter احترافي المسؤوليات إلى ثلاث طبقات: الواجهة، ومنطق العمل، والبيانات
طبقة الواجهة (UI)
عناصر الواجهة، الشاشات، تفاعلات المستخدم، الحسابات البصرية
طبقة منطق العمل (Business Logic)
معالجة التواريخ، منطق البحث، الحسابات - الجسر بين الواجهة والبيانات
طبقة البيانات (Data)
النماذج، الأصناف، مصادر البيانات الخارجية
إذا أردت تغيير شيء ما ووجدت نفسك مضطرا لتغييره في أكثر من مكان، فإن كودك مكتوب بشكل سيء. الكود جيد الكتابة يتيح لك إجراء هذا التغيير في مكان واحد بالضبط.
// DRY - color defined once, reused everywhere
final primaryColor = Color(0xFF1565C0);
Container(color: primaryColor, child: Text('Header')),
Container(color: primaryColor, child: Text('Footer')),ThemeData، مرتبطة بـ MaterialAppTheme.of(context) بدلا من قيمة مرمزة ثابتةContainer(
color: Theme.of(context).primaryColor,
child: Text('Hello', style: TextStyle(color: Theme.of(context).colorScheme.onPrimary)),
)MaterialApp(
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
themeMode: ThemeMode.dark,
)themeMode وحده يبدل التطبيق بالكامل.| الحل | كيف يعمل |
|---|---|
SingleChildScrollView | يغلف Column بحيث يستطيع المستخدمون التمرير للوصول إلى كل المحتوى |
ListView | يستبدل Column تماما ويمرر بشكل أصلي - الأفضل للعناصر المتكررة |
Expanded | يجعل المحتوى يتقلص ويتكيف ليناسب المساحة بدلا من التمرير |
Dart يجمع القيم المترابطة بدلا من تمرير متغيرات منفصلةfinal، وتحدد مرة واحدة عبر الباني (constructor)class PersonModel {
final String name;
final int age;
final DateTime birthDate;
PersonModel({required this.name, required this.age, required this.birthDate});
}Dart هذا وقت التصريفbuild النتائج فقط؛ ولا تنفذ الحساب بنفسها إطلاقاint calculateDaysAlive() {
final today = DateTime.now();
return today.difference(person.birthDate).inDays;
}build تعرض النتيجة فقط، ولا تجري الحساب بنفسها.تحديد المنطق المطلوب
ابحث في pub.dev
قيم الحزمة
الشيوع، الصيانة، الترخيص
تحقق من التبعيات
ادمج الحزمة
اكتب منطقا مخصصا
المنطق مكتمل
flutter pub get هذه الاعتماديات تلقائياdependencies:
intl: ^0.19.0BuildContext - فقط مدخلات وحساباتclass DaysCalculator {
final DateTime birthDate;
DaysCalculator(this.birthDate);
int calculateDaysAlive() => DateTime.now().difference(birthDate).inDays;
bool isOver1000DaysOld() => calculateDaysAlive() > 1000;
}BuildContext.StatelessWidget أبدا بعد بنائه؛ بينما يمكن لـ StatefulWidget أن يتغير، عبر setStatesetState يخبر Flutter: تغيرت البيانات، أعد بناء هذا العنصر بالقيم الجديدةالمستخدم يضغط زر الحساب
الواجهة تقرأ الحالة
بناء نموذج بيانات
تمريره إلى المنطق
المنطق يرجع نتيجة
setState يحدث الواجهة
ThemeData وTheme.of(context) التغييرات الشاملة، مثل الوضع الداكن، تعديلا في سطر واحدSingleChildScrollView وListView وExpanded مشكلة فيضان الشاشة بطريقة مختلفةDart محددة النوع؛ وتنفذ طبقة المنطق الحسابات ويمكن عزلها والتحقق منها بشكل مستقلStatefulWidget مع setState هو ما يجعل واجهة Flutter تتفاعل مع البيانات المتغيرةMahmoud Abas|المعمل 05: بناء تطبيق Flutter متكامل - من المعمارية إلى منطق التشغيل