في تطبيقات Flutter، قد يكون من الضروري تحديد موقع العناصر في الاتجاه الثنائي، حيث يمكن تحديد الموقع الأفقي والرأسي للعنصر. يتيح لنا Flutter استخدام PositionedDirectional لتحديد موقع العناصر بالاتجاه الثنائي بشكل ديناميكي وسهل. في هذه المقالة، سنتعرف على PositionedDirectional ونشرح جميع خصائصه بالتفصيل.
ما هو PositionedDirectional؟
PositionedDirectional هو عنصر واجهة Flutter يُستخدم لتحديد موقع العنصر في الاتجاه الثنائي، حيث يمكن تحديد الموقع الأفقي والرأسي للعنصر. يمكن استخدام PositionedDirectional مع عنصر Stack لتحديد موقع العناصر بشكل ديناميكي.
“اقرأ أيضاً: شرح استخدام ويدجت AspectRatio في فلاتر“
خصائص PositionedDirectional
يحتوي PositionedDirectional على مجموعة من الخصائص التي يمكن تعيينها لتحديد موقع العنصر. يتم تفصيل الخصائص في الأسفل:
start
تحدد المسافة بين الحافة اليسرى للعنصر والحافة اليسرى للعنصر الأب. يمكن تعيين هذه الخاصية عبر الكود التالي:
start: 20.0,
“اقرأ أيضاً: شرح استخدام ويدجت PositionedTransition في فلاتر“
end
تحدد المسافة بين الحافة اليمنى للعنصر والحافة اليمنى للعنصر الأب. يمكن تعيين هذه الخاصية عبر الكود التالي:
end: 20.0,
top
تحدد المسافة بين الحافة العلوية للعنصر والحافة العلوية للعنصر الأب. يمكن تعيين هذه الخاصية عبر الكود التالي:
top: 20.0,
bottom
تحدد المسافة بين الحافة السفلية للعنصر والحافة السفلية للعنصر الأب. يمكن تعيين هذه الخاصية عبر الكود التالي:
bottom: 20.0,
width
تحدد عرض العنصر. يمكن تعيين هذه الخاصية عبر الكود التالي:
width: 100.0,
height
تحدد ارتفاع العنصر. يمكن تعيين هذه الخاصية عبر الكود التالي:
height: 100.0,
child
العنصر الذي يتم تحديد موقعه. يمكن تعيين هذه الخاصية عبر الكود التالي:
child: Text('Hello World'),
استخدام PositionedDirectional في Flutter
لإستخدام PositionedDirectional في تطبيقك، يجب أولاً استيراد العنصر من حزمة Flutter الرسمية. يمكنك فعل ذلك بإضافة السطر التالي إلى ملف الاستيرادات:
import 'package:flutter/material.dart';
ثم، يمكن استخدام PositionedDirectional داخل عنصر Stack لتحديد موقع العنصر. في المثال التالي، نستخدم PositionedDirectional لتحديد موقع نص داخل عنصر Stack:
Stack(
children: [
PositionedDirectional(
start: 20.0,
top: 20.0,
child: Text('Hello World'),
),
],
),
يتم تحديد موقع النص باستخدام خصائص start و top. يمكن تعديل هذه الخصائص لتحديد موقع العنصر بشكل ديناميكي.
“اقرأ أيضاً: شرح استخدام ويدجت CircleAvatar في فلاتر“
تستخدم PositionedDirectional في تطبيقات Flutter لتحديد موقع العناصر في الاتجاه الثنائي. يمكن استخدام PositionedDirectional مع عنصر Stack لتحديد موقع العناصر بشكل ديناميكي. يحتوي PositionedDirectional على مجموعة من الخصائص التي يمكن تعيينها لتحديد موقع العنصر، مثل start و end و top و bottom و width و height و child. يمكن تعديل هذه الخصائص لتحديد موقع العنصر بشكل ديناميكي.
