Flutter / Dart والعناصر والملكية المحلية / الدرس 2

وصف العناصر وتركيبها وسياقها

ابن أوصافا صغيرة ثابتة، واعثر على الخدمات الموروثة عبر الموضع الصحيح في الشجرة.

وقت القراءة التقريبي: 5 دقيقةتاريخ مراجعة المحتوى 2026-10-28

في هذه الصفحة

أهداف الدرس

صِف الواجهة بدلا من تعديلها مباشرة
امنح العنصر القابل لإعادة الاستخدام عقدا مفهوما
مرّر المدخلات صراحة

صِف الواجهة بدلا من تعديلها مباشرة

العنصر وصف ثابت لجزء من الواجهة. توفّق Flutter بين الأوصاف المتعاقبة وعناصر الشجرة المستمرة وكائنات الرسم. لذلك لا يعني استدعاء build إنشاء شاشة أصلية جديدة أو محو كل كائنات الحالة. صِف النتيجة المطلوبة للمدخلات الحالية ودع الإطار ينسق التحديثات. قد تتكرر build كثيرا، وينبغي ألا ترسل طلبات أو تغيّر بيانات التطبيق أو تسجّل مستمعين. تحتاج تلك الأفعال إلى مالك ضمن دورة الحياة أو معالجة الأحداث. يمنع هذا الفصل تحول إعادة العرض إلى عملية تجارية إضافية.

امنح العنصر القابل لإعادة الاستخدام عقدا مفهوما

استخرج عنصرا عندما يسمّي مسؤولية أو يعزل شجرة مرئية ذات معنى أو يوضح المدخلات. يسهل مراجعة مكوّن يستقبل تسمية وعددا أكثر من آخر يقرأ قيما غير موثقة من خريطة عامة. ينبغي لوسائط المنشئ إظهار المعلومات المطلوبة والقيم الافتراضية المناسبة. أبق تفسير قواعد العمل خارج الأغلفة الزخرفية؛ فلا ينبغي لمربع ملون أن يقرر خفية هل دُفع الحجز. يحفظ التركيب أيضا حدود الاختبار لأن الابن يمكن عرضه بقيم مصطنعة. وتجنب تحويل كل تعبير حشو إلى تجريد لا يشرح اسمه شيئا.

مرّر المدخلات صراحة

يعرّف المقتطف الأول ملخصا صغيرا وثابتا للعدد. يملك الأب العدد، بينما يصف الابن طريقة عرضه فقط. يُمرّر الوسيط key ليتمكن المستدعي من حفظ الهوية عند استعمال العنصر ضمن مجموعة متغيرة. تتاح const حين تكون وسائط المنشئ ثوابت وقت الترجمة؛ لكنها لا تجمّد خدمة خارجية ولا تمنع كل إعادة بناء للأب. الناتج تسمية مرئية متوقعة بافتراض وضع العنصر تحت بيئة تطبيق Flutter توفر اتجاه النص وتقاليد Material. ولا يمثل المقتطف تطبيقا كاملا لملف main.dart.

dart مقتطف توضيحي من Dart أو Flutter؛ يتطلب بيئة SDK المبيّنة.

import 'package:flutter/material.dart';
class SeatSummary extends StatelessWidget {
  const SeatSummary({super.key, required this.available});
  final int available;
  @override
  Widget build(BuildContext context) => Text('Seats: $available');
}
// Parent expression: const SeatSummary(available: 4)

الناتج المتوقع

Seats: 4

الحقل final مدخل للقراءة فقط. تحديث مدخل الأب ينشئ وصفا جديدا للموضع المنطقي نفسه.

اقرأ القيم الموروثة أسفل مزوّدها

يمثل BuildContext موقعا في شجرة العناصر. تبحث Theme.of والعمليات المشابهة في أسلاف ذلك الموقع؛ فلا ترى مزوّدا وضعته build نفسها تحته للتو. يستخدم المقتطف الثاني Builder للحصول على سياق ابن داخل Theme محلية. يوضح تسمية السياق الداخلي هذه العلاقة. ليس البحث الموروث متغيرا عاما ولا صلاحية دائمة منفصلة عن الشجرة. إذا انتقل العنصر أو تغيرت الاعتماديات، فقد يعيد الإطار بناء الأوصاف التابعة لقراءة المعلومات الموروثة الحالية.

dart مقتطف توضيحي من Dart أو Flutter؛ يتطلب بيئة SDK المبيّنة.

Widget localPanel() => Theme(
  data: ThemeData(colorSchemeSeed: Colors.teal),
  child: Builder(builder: (innerContext) {
    final colors = Theme.of(innerContext).colorScheme;
    return ColoredBox(color: colors.primaryContainer,
      child: const Text('Local panel'));
  }),
);

الناتج المتوقع

A panel uses the local teal-derived theme.

ينشئ Builder موضع الابن اللازم لـ Theme.of. وتعتمد القيم اللونية المولدة الدقيقة على إعداد السمة المختار.

احفظ المعنى الدلالي أثناء التركيب

لا يصبح صف مرئي يحوي أيقونة ونصا إجراء ميسّرا تلقائيا. استخدم تحكما مناسبا مثل زر عندما يكون المطلوب تفعيل إجراء، واحفظ تسمية مفهومة إذا كانت الأيقونة وحدها غامضة. تساعد السمة والتركيب على الاتساق، لكنهما لا يضمنان وحدهما التباين أو حجم الهدف أو سلوك التركيز. اختبر النصوص الطويلة والاتجاه من اليمين إلى اليسار مبكرا، فهما يكشفان افتراضات تخفيها النصوص الإنجليزية القصيرة. تكون إعادة الاستخدام أقوى حين تحمل السلوك والمعنى معا، لا مجرد ترتيب أشكال ملونة.

راجع الملكية عند حدود الشجرة

ينبغي أن يوضح العنصر الذي يستقبل دالة رد نداء المعلومات التي يرسلها وهل يسمح بتكرار التفعيل. يبقى الأب مسؤولا عن حالة المجال، والابن مسؤولا عن عرض التفاعل بصورة صحيحة. لا تخزّن BuildContext في مستودع طويل العمر ولا تحتفظ به بدلا من الاعتماديات الصريحة. لا تحتاج البنية التحتية إلى معرفة الزر الذي أنشأ الطلب. يسمح هذا الفصل باستعمال الحالة نفسها لتخطيط آخر دون إعادة كتابة الوصول إلى البيانات، ويساعد الاختبار على تمييز القيمة المعروضة الخاطئة من القيمة المصدرية الخاطئة.

الأخطاء الشائعة وإصلاحها

تقرأ Theme.of السمة الخارجية

لماذا يحدث؟: ينتمي السياق إلى موضع أعلى من Theme المعادة حديثا.
كيف تصلحه؟: استخدم عنصرا ابنا أو Builder أسفل Theme.
كيف تتجنب تكراره؟: ارسم مواقع المزوّد والمستهلك عند تشخيص القيم الموروثة.

تبدأ إعادة البناء عملا مكررا

لماذا يحدث؟: تحتوي build طلبا أو اشتراكا.
كيف تصلحه؟: انقل العملية إلى مالك الحدث أو دورة الحياة.
كيف تتجنب تكراره؟: اجعل العرض وصفا محدد النتائج.

تستجيب الأيقونة للمس لكن معناها غير واضح للتقنيات المساعدة

لماذا يحدث؟: يفتقر غلاف الإيماءة إلى دلالة التحكم أو التسمية.
كيف تصلحه؟: استخدم زرا ذا دلالة وتلميح أو تسمية مفيدة.
كيف تتجنب تكراره؟: راجع التركيز والدلالات مع المظهر.

اختبر فهمك

1. أين تُملك قيمة المقاعد المتاحة إذا عرضها ملخصان؟

اعرض الحل المشروح

ضع القيمة المعتمدة لدى أقرب مالك مشترك مناسب، أو لدى مالك لحالة التطبيق إذا كان عمرها أوسع. مرّر القيمة نفسها إلى الملخصين. الاحتفاظ بنسختين قابلتين للتعديل بصورة مستقلة يحتاج إلى مزامنة معرضة للأخطاء.

2. لماذا لا يمثل العنصر const ضمانا عاما للأداء؟