خصائص عنصر ستاك ويدجت في فلاتر Stack widget Properites
دليل شامل على استخدام ويدجت Stack وخصائصه في تطبيقات Flutter
مقدمة:
تُعتبر ويدجت Stack واحدة من أدوات ترتيب العناصر الأساسية في إطار عمل Flutter. توفر Stack إمكانية ترتيب العناصر بشكل مكدس، مما يسمح بتراكبها بطريقة مرنة وديناميكية.
في هذا الدرس، سنقوم باكتشاف كيفية استخدام ويدجت Stack بشكل شامل، بما في ذلك فهم الخصائص الرئيسية لهذا الويدجت وكيفية التحكم في تنظيم العناصر داخله. سنتعلم كيفية استخدام خصائص مثل التوجيه، وتناسب العناصر، والتعامل مع التجاوز. سيتيح لنا هذا الفهم الشامل تطبيق ترتيبات واجهة مستخدم مرنة وجذابة في تطبيقات Flutter الخاصة بنا.
خصائص stack widget
Widget Stack في Flutter هو عبارة عن عنصر واجهة مستخدم يسمح لك بترتيب عدة وجوه مستخدم بطريقة تكون العناصر متداخلة ببعضها.
بعض الخصائص الرئيسية لـ Widget Stack:
alignment: هذه الخاصية تحدد كيفية تمركز العناصر داخل Stack.
يمكنك تحديد توجيه محدد مثل الأعلى يسار أو الأسفل اليمين أو مركز الشاشة، أو يمكنك استخدام FractionalOffset لتحديد مواقع محددة بنسبة نسبية من العرض والارتفاع.
fit: هذه الخاصية تحدد كيفية تناسب العناصر داخل Stack.
يمكن أن تكون قيمتها StackFit.loose التي تسمح للعناصر بالتناسب مع حجمها الطبيعي، أو StackFit.expand التي تجعل العناصر تمتلئ بالكامل داخل Stack.
overflow: هذه الخاصية تحدد سلوك العناصر عندما تتجاوز حجم Stack.
يمكن أن تكون قيمتها Overflow.visible حيث تظل العناصر مرئية حتى لو تجاوزت حجم Stack،
أو Overflow.clip حيث تقتصر العناصر على الظهور فقط داخل حاوية Stack.
children: هذه هي العناصر الفرعية التي تظهر داخل Stack. يمكنك إضافة عناصر متعددة والتحكم في ترتيبها وتموضعها باستخدام هذه القائمة.
textDirection: هذه الخاصية تحدد اتجاه النصوص داخل Stack. يمكن أن تكون قيمتها TextDirection.ltr للنصوص من اليسار إلى اليمين، أو TextDirection.rtl للنصوص من اليمين إلى اليسار.
Widget Stack يُستخدم بشكل شائع لترتيب عناصر واجهة المستخدم بطريقة تتيح لك تراكب العناصر بطريقة مرنة، مما يجعلها مفيدة جداً في بناء تطبيقات Flutter ذات تصميم مرن وجذاب.
كيفي استخدام خصائص ستاك ويدجت
خطوة بخطوة سنتناول كيفية استخدام خصائص ستاك ويدجت
إنشاء ويدجت Stack:
نقم بإنشاء ويدجت Stack في شجرة واجهة المستخدم الخاصة بك. يمكنك فعل ذلك باستخدام كود مثل هذا:
Stack( children: <Widget>[ // أضف العناصر الفرعية هنا ], )
تحديد توجيه التمركز (alignment):
نقم بتحديد كيفية تمركز العناصر داخل Stack باستخدام خاصية alignment.
على سبيل المثال، إذا أردت وضع العناصر في الزاوية العلوية اليسرى، يمكنك فعل ذلك بهذا الشكل:
Stack( alignment: Alignment.topLeft, children: <Widget>[ // أضف العناصر الفرعية هنا ], )
تحديد كيفية تناسب العناصر (fit):
يمكنك تحديد كيفية تناسب العناصر داخل Stack باستخدام خاصية fit.
على سبيل المثال، إذا أردت أن تمتلئ العناصر بالكامل داخل Stack، يمكنك استخدام StackFit.expand:
Stack( fit: StackFit.expand, children: <Widget>[ // أضف العناصر الفرعية هنا ], )
تحديد سلوك التجاوز (overflow):
نقم بتحديد سلوك العناصر عندما تتجاوز حجم Stack باستخدام خاصية overflow.
على سبيل المثال، إذا أردت قص العناصر التي تتجاوز حجم Stack، يمكنك استخدام Overflow.clip:
Stack( overflow: Overflow.clip, children: <Widget>[ // أضف العناصر الفرعية هنا ], )
إضافة العناصر الفرعية (children):
نضيف العناصر الفرعية داخل الـ Stack باستخدام قائمة children. يمكنك تحديد ترتيب وتموضع العناصر بالطريقة التي تناسب تصميم واجهة المستخدم الخاص بك.
باستخدام هذه الخطوات، يمكننا الآن استخدام خصائص ويدجت Stack في Flutter لترتيب وتخطيط العناصر بطريقة مرنة وجذابة.
تطبيق 1: خطوة بخطوة على خصائص ستاك ويدجت
سنقوم بإنشاء تطبيق بسيط يستخدم خصائص ويدجت Stack في Flutter. سنقوم بعرض عنصرين على واجهة المستخدم، واحدة أعلى الأخرى، باستخدام خصائص Stack.
هذا التطبيق سيحتوي على صورتين، إحداهما ستكون خلفية والأخرى ستظهر فوق الخلفية.
سنستخدم Stack لترتيب الصور بطريقة تجعل إحداها خلفية للأخرى.
هاكم كود التطبيق:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Stack Widget Example'),
),
body: Center(
child: Stack(
alignment: Alignment.center,
children: <Widget>[
// الصورة الخلفية
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/background.jpg'),
fit: BoxFit.cover,
),
),
),
// الصورة الأمامية
Positioned(
top: 50.0,
child: Container(
width: 200.0,
height: 200.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20.0),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
child: Center(
child: Text(
'Foreground Image',
style: TextStyle(fontSize: 20.0),
),
),
),
),
],
),
),
),
);
}
}
هذا التطبيق يستخدم صورة كخلفية ومربع أبيض مستطيل الشكل كصورة أمامية.
سيتم عرض الصورة البيضاء فوق الصورة الخلفية.
يمكننا استخدام هذا المثال لفهم كيفية استخدام خصائص ويدجت Stack في تطبيقات Flutter الخاصة بنا. يمكننا تعديل الأبعاد والتخطيطات والصور والألوان وفقًا لاحتياجات مشروعك الخاص.
شرح الكود:
بالطبع، سأشرح الكود السابق سطرًا بسطر في أسطر منفصلة:
import و main():
يتم استيراد حزمة المكتبة material.dart التي تحتوي على مكونات Flutter الموادية. ثم يتم تعريف دالة main() التي تبدأ تطبيق Flutter الخاص بنا.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
MyApp class:
تعريف MyApp كفئة تمتد من StatelessWidget. في الدالة build()، يتم إرجاع MaterialApp مع تحديد الشريط والجسم.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Stack Widget Example'),
),
body: Center(
// الواجهة الرئيسية تحتوي على Stack
),
),
);
}
}
AppBar:
شريط التطبيق يحتوي على عنوان “Stack Widget Example”.
appBar: AppBar(
title: Text('Stack Widget Example'),
),Stack Widget:
تستخدم واجهة المستخدم الرئيسية Stack لترتيب العناصر. هنا، نستخدم Stack لعرض الصور بطريقة مكدسة.
body: Center( child: Stack( alignment: Alignment.center, children: <Widget>[ // الصور هنا ], ), ),
الصور الخلفية والأمامية:
هنا نستخدم Container و Positioned لعرض الصورة الخلفية والأمامية على التوالي داخل Stack.
// الصورة الخلفية
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/background.jpg'),
fit: BoxFit.cover,
),
),
),
// الصورة الأمامية
Positioned(
top: 50.0,
child: Container(
width: 200.0,
height: 200.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20.0),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
child: Center(
child: Text(
'Foreground Image',
style: TextStyle(fontSize: 20.0),
),
),
),
),
هذه الصورتين تمثل الصورة الخلفية والأمامية داخل Stack. الصورة الخلفية مرتبة كـ Container مع BoxDecoration لتعيين صورة كخلفية. الصورة الأمامية مرتبة كـ Positioned لتحديد موضعها والتي تحتوي على Container مع عنصر نصي داخلها.
هذا يشرح بالتفصيل كيفية استخدام خصائص ويدجت Stack في Flutter لترتيب العناصر بطريقة مكدسة ومرنة.
شجرة الويدجت
هذه هي شجرة الويدجت لتطبيقنا:
MyApp (MaterialApp)
└─ Scaffold
└─ AppBar
└─ Center
└─ Stack
├─ Container (صورة خلفية)
└─ Positioned
└─ Container (صورة أمامية)
└─ Center
└─ TextMyApp هو المدخل الرئيسي للتطبيق ويحتوي على MaterialApp.
Scaffold يقوم بتنظيم هيكل الصفحة بما في ذلك AppBar و Body.
AppBar يحتوي على العنوان الذي يعرض على شريط التطبيق.
Center يضع الـ Stack في الوسط الأفقي والعمودي للشاشة.
Stack يمكنه ترتيب العناصر في طبقات مكدسة.
Container تعرض الصورة الخلفية.
Positioned يمكن تحديد موقع وحجم الصورة الأمامية.
Container تعرض الصورة الأمامية.
Center يوضح النص في الصورة الأمامية.
هذه هي تركيبة الويدجتات التي تمثل تطبيقنا.
تطبيق 2: استخدام خصائص ستاك ويدجت
طبعًا، سنقوم بإنشاء تطبيق مختلف يستخدم ويدجت Stack بطريقة مختلفة. في هذا التطبيق، سنقوم بعرض عدة عناصر بطريقة متراصة باستخدام خصائص التمركز والمساحة الفارغة. سنقوم بعرض عدد من الصور والنصوص والأزرار.
هاكم الكود:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Stack Widget Example'),
),
body: Center(
child: Stack(
alignment: Alignment.center,
children: <Widget>[
// صورة
Container(
width: 300,
height: 300,
color: Colors.blue,
),
// نص
Positioned(
top: 100,
child: Text(
'Hello, World!',
style: TextStyle(fontSize: 30, color: Colors.white),
),
),
// زر
Positioned(
bottom: 50,
child: ElevatedButton(
onPressed: () {},
child: Text('Click Me'),
),
),
],
),
),
),
);
}
}
في هذا التطبيق، نستخدم ويدجت Stack لترتيب ثلاثة عناصر مختلفة:
الصورة:يتم تعريف واجهة المستخدم بشكل مربع الشكل وبلون أزرق.
النص:يتم تعريف النص “Hello, World!” ويتم تعيين حجم الخط ولون النص.
الزر: يتم تعريف زر مرتب في الأسفل ويعرض عليه “Click Me”.
كل عنصر مرتب في مكانه بفضل استخدام خصائص التمركز المختلفة في ويدجت Stack. هذا التطبيق يوضح كيف يمكن استخدام ويدجت Stack لترتيب العناصر بشكل مختلف ومبتكر في تطبيقات Flutter.
تطبيق 3: استخدام ستاك ويدجت وخصائصه خطوة بخطوة
لنقم بإنشاء تطبيق يستخدم ويدجت Stack بطريقة متقدمة. في هذا التطبيق، سنقوم بعرض مجموعة من البطاقات التي يمكن ترتيبها بشكل تكديسي داخل Stack. كل بطاقة ستحتوي على صورة وعنوان. سنستخدم خصائص ويدجت Stack بشكل كامل لترتيب وتنظيم هذه البطاقات.
هاكم الكود مع شرح خطوة بخطوة:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Stack Widget Advanced Example'),
),
body: Center(
child: Stack(
alignment: Alignment.center,
children: <Widget>[
// البطاقة 1
Positioned(
top: 50.0,
left: 50.0,
child: CardWidget(
title: 'Card 1',
image: AssetImage('assets/image1.jpg'),
),
),
// البطاقة 2
Positioned(
top: 100.0,
left: 100.0,
child: CardWidget(
title: 'Card 2',
image: AssetImage('assets/image2.jpg'),
),
),
// البطاقة 3
Positioned(
top: 150.0,
left: 150.0,
child: CardWidget(
title: 'Card 3',
image: AssetImage('assets/image3.jpg'),
),
),
],
),
),
),
);
}
}
class CardWidget extends StatelessWidget {
final String title;
final ImageProvider image;
const CardWidget({Key? key, required this.title, required this.image})
: super(key: key);
@override
Widget build(BuildContext context) {
return Container(
width: 200.0,
height: 200.0,
child: Card(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image(image: image, width: 100, height: 100),
SizedBox(height: 10),
Text(
title,
style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
),
],
),
),
);
}
}
شرح الكود خطوة بخطوة:
في دالة main() نقوم بتشغيل التطبيق عن طريق استدعاء runApp() وتمرير MyApp().
MyApp هو واجهة المستخدم الرئيسية للتطبيق. يحتوي على Scaffold مع AppBar و body المركزي.
في body نستخدم Stack لترتيب البطاقات المختلفة.
Positioned يحدد موقع كل بطاقة داخل Stack.
CardWidget هو ويدجت يمثل كل بطاقة. يستخدم لعرض الصورة والعنوان.
CardWidget هو ويدجت يحتوي على Container ويستخدم لتنظيم عرض بطاقة معينة.
يستخدم Card لإضافة تصميم البطاقة.
يحتوي على Column يحتوي على صورة وعنوان البطاقة.
تم تمرير الصور والعناوين لكل بطاقة من خلال معاملات البناء (title و image) في CardWidget.
هذا التطبيق يظهر كيف يمكن استخدام ويدجت Stack بشكل متقدم لتنظيم عناصر الواجهة.
شجرة الويدجت
هذه هي شجرة الويدجت للتطبيق الذي قمت بتوضيحه:
MyApp (MaterialApp)
└─ Scaffold
└─ AppBar
└─ Center
└─ Stack
├─ Positioned (بطاقة 1)
│ └─ CardWidget
├─ Positioned (بطاقة 2)
│ └─ CardWidget
└─ Positioned (بطاقة 3)
└─ CardWidgetMyApp هو المدخل الرئيسي للتطبيق ويحتوي على MaterialApp.
Scaffold يحتوي على هيكل التطبيق بما في ذلك الـ AppBar والـ Body.
AppBar يحتوي على العنوان الذي يعرض على شريط التطبيق.
Center يوضع في الوسط الأفقي والعمودي للصفحة.
Stack يستخدم لترتيب العناصر بطريقة مكدسة.
Positioned يحدد موقع كل بطاقة داخل Stack.
CardWidget يمثل بطاقة ويحتوي على صورة وعنوان.
تطبيق 4 عن استخدام ستاك ويدجت وخصائص ال ستاك ويدجت
لنقم بإنشاء تطبيق يستخدم ويدجت Stack بشكل شامل، حيث سنقوم بعرض مجموعة من العناصر بشكل مكدس ونستخدم خصائص ويدجت Stack بشكل متقدم. سيكون التطبيق عبارة عن شاشة لعرض صورة في الخلفية، وعنصر نصي في المقدمة.
هذا التطبيق سيستخدم الخصائص التالية لويدجت Stack:
alignment: لتحديد توجيه المحتوى داخل Stack.
fit: لتحديد كيفية تناسب العناصر داخل Stack.
overflow: لتحديد سلوك العناصر عندما تتجاوز حجم Stack.
هاكم كود التطبيق:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Stack Widget Comprehensive Example'),
),
body: Stack(
fit: StackFit.expand,
children: <Widget>[
// الصورة الخلفية
Image.asset(
'assets/background.jpg',
fit: BoxFit.cover,
),
// عنصر نصي في المقدمة
Positioned(
top: 50,
left: 50,
child: Container(
padding: EdgeInsets.all(10),
color: Colors.black.withOpacity(0.5),
child: Text(
'مرحبًا، هذا نص في المقدمة',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
],
),
),
);
}
}
في هذا التطبيق، قمنا بتضمين صورة كخلفية وعنصر نصي في المقدمة. وهذه شجرة الويدجت:
MyApp (MaterialApp)
└─ Scaffold
└─ AppBar
└─ Stack
├─ Image (صورة الخلفية)
└─ Positioned
└─ Container
└─ Text (عنصر نصي)هذا التطبيق يستخدم ويدجت Stack بشكل شامل، مع استخدام خصائص مختلفة لتحكم في تنظيم وتنسيق العناصر داخله.
اختبار مع الاجابات حول ستاك ويدجت وخصائصه في فلاتر
السؤال1: ما هو ويدجت Stack في Flutter وما هي وظيفته؟
الإجابة:
ويدجت Stack في Flutter هو واجهة مستخدم تُستخدم لترتيب العناصر بشكل مكدس، حيث يمكن وضع العناصر فوق بعضها البعض. يُستخدم Stack لتنظيم العناصر داخل واجهة المستخدم بطريقة تسمح بتراكبها بطريقة مرنة.
السؤال2: ما هي بعض الخصائص الرئيسية لويدجت Stack في Flutter؟
الإجابة:
بعض الخصائص الرئيسية لويدجت Stack تشمل:
alignment: لتحديد توجيه المحتوى داخل Stack.
fit: لتحديد كيفية تناسب العناصر داخل Stack.
overflow: لتحديد سلوك العناصر عندما تتجاوز حجم Stack.
السؤال 3: ما هو الفرق بين استخدام ويدجت Stack و Column/Row في Flutter؟
الإجابة:
ويدجت Stack يسمح بتراكب العناصر بطريقة مكدسة، بينما Column/Row يستخدم لترتيب العناصر بشكل خطي.
في Stack، يمكن تحديد ترتيب العناصر بشكل دقيق باستخدام Positioned، بينما في Column/Row يتم ترتيب العناصر بشكل تلقائي.
Stack يمكن استخدامه لترتيب العناصر بشكل مرن وتراكبها بطريقة ديناميكية، بينما Column/Row يستخدم لتنظيم العناصر بشكل خطي وثابت.
السؤال 4 : كيف يمكن استخدام خاصية الـalignment في ويدجت Stack؟
الإجابة:
يمكن استخدام خاصية الـalignment في ويدجت Stack لتحديد توجيه المحتوى داخل Stack. يمكن تحديد توجيه العناصر بشكل محدد مثل الأعلى يسار أو الأسفل اليمين، أو يمكن استخدام FractionalOffset لتحديد مواقع محددة بنسبة نسبية من العرض والارتفاع.
السؤال 5 : كيف يمكن التحكم في تناسب العناصر داخل Stack باستخدام خاصية الـfit؟
الإجابة:
يمكن استخدام خاصية الـfit في ويدجت Stack للتحكم في تناسب العناصر داخل Stack. يمكن أن تكون قيمتها StackFit.loose للسماح للعناصر بالتناسب مع حجمها الطبيعي، أو StackFit.expand لجعل العناصر تمتلئ بالكامل داخل Stack.
السؤال 5: متى يكون من المناسب استخدام ويدجت Stack بدلاً من Column/Row في Flutter؟
الإجابة:
يكون مناسبًا استخدام ويدجت Stack عندما تحتاج إلى ترتيب العناصر بشكل مكدس وتراكبها بطريقة مرنة.
عندما تحتاج إلى وضع العناصر فوق بعضها البعض بشكل دقيق ودوري، مثل وضع صورة كخلفية وعنصر نصي أو أي ترتيب تراكبي آخر.
عندما تحتاج إلى التحكم في ترتيب العناصر بشكل ديناميكي باستخدام Positioned.
السؤال 6: ما هو التأثير الذي يحدث عندما يتجاوز العنصر حجم Stack في Flutter؟
الإجابة:
عندما يتجاوز العنصر حجم Stack في Flutter، فإن التأثير يتم تحديده بواسطة خاصية الـoverflow. يمكن أن تكون قيمة Overflow.visible لجعل العناصر مرئية حتى لو تجاوزت حجم Stack، أو Overflow.clip لجعل العناصر تقتصر على الظهور فقط
مزيد
السؤال 7: ما هو الفرق بين استخدام خاصية الـoverflow في ويدجت Stack وفي ويدجت Container في Flutter؟
الإجابة:
في ويدجت Stack، تحدد خاصية الـoverflow سلوك العناصر داخل Stack نفسه. يمكن أن تكون قيم الـoverflow هي visible لتجاوز العناصر حدود Stack، أو clip لتقليم العناصر وعرضها فقط داخل حدود Stack.
في ويدجت Container، تحدد خاصية الـoverflow سلوك المحتوى داخل الحاوية نفسها. يمكن أن تكون قيم الـoverflow هي visible للسماح للمحتوى بالتجاوز خارج حدود الحاوية، أو clip لقص المحتوى وعرضه فقط داخل حدود الحاوية.