Flutter / واجهات شاملة وأدلة الأهداف / الدرس 13

الإتاحة والترجمة واتجاه العرض

صمّم المعنى والتركيز وتمدد النص والاتجاهين بوصفها جزءا من عقد التفاعل.

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

في هذه الصفحة

أهداف الدرس

اجعل الإجراء مفهوما دون الرؤية
ترجم الرسائل كوحدات كاملة
استخدم هندسة تراعي الاتجاه

اجعل الإجراء مفهوما دون الرؤية

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

ترجم الرسائل كوحدات كاملة

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

استخدم هندسة تراعي الاتجاه

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

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

Widget messageCard(String message) => Padding(
  padding: const EdgeInsetsDirectional.only(start: 24, end: 8),
  child: Align(alignment: AlignmentDirectional.centerStart,
    child: Text(message)),
);

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

Leading padding and alignment follow the inherited TextDirection.

يحدد سلف Localizations أو Directionality الاتجاه. وتعبّر قيم اليسار واليمين المطلقة عن عقد مختلف.

سمّ إجراءات الأيقونات واحفظ أهدافا قابلة للاستخدام

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

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

Widget refreshAction(VoidCallback? onRefresh) => IconButton(
  tooltip: 'Refresh workshops',
  onPressed: onRefresh,
  icon: const Icon(Icons.refresh),
);

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

An enabled button exposes Refresh workshops; null onRefresh disables activation.

التسمية النصية مصطنعة. استبدلها برسالة مترجمة مولدة داخل تطبيق مجهز.

أعلن التغير دون إغراق المستخدم

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

ابن مصفوفة تحقق شاملة

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

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

يصطف النص العربي إلى الحافة الخطأ

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

لا يملك زر الأيقونة وصف إجراء منطوقا مفيدا

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

يُقص النص المكبّر لحفظ النموذج البصري

لماذا يحدث؟: افترضت أبعاد ثابتة حجما واحدا وطول نص واحدا.
كيف تصلحه؟: اسمح بالالتفاف أو النمو أو إعادة الترتيب المتجاوب.
كيف تتجنب تكراره؟: أدرج النص الكبير في مراجعة التخطيط المعتادة.

اختبر فهمك

1. هل يجب عكس كل أيقونات الأسهم في العربية؟

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

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

2. لماذا لا يعتمد على أجزاء كلمات مترجمة حول رقم؟