By using this site, you agree to the Privacy Policy and Terms of Use.
موافق
عرب فلاترعرب فلاتر
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
قراءة: شرح استخدام Scaffold في فلاتر
شارك
تسجيل الدخول
إشعار أظهر المزيد
Aa
عرب فلاترعرب فلاتر
Aa
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
Search

أقسام الموقع

استكشف جميع أقسام الموقع
قسم Dart في موقع عرب فلاتر

Dart

59 مقالات
قسم Widgets في موقع عرب فلاتر

Widgets

104 مقالات
قسم Packages في موقع عرب فلاتر

Packages

19 مقالات
قسم Tutorials في موقع عرب فلاتر

Tutorials

22 مقالات

أخر المواضيع

استكشف أخر المواضيع المنشورة
شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
Tutorials

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا

5
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
Tutorials

حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر

10
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
Tutorials

أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات

17
لديك حساب موجود؟ تسجيل الدخول
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
© جميع الحقوق محفوظة موقع عرب فلاتر 2023
عرب فلاتر > Widgets > شرح استخدام Scaffold في فلاتر
Widgets

شرح استخدام Scaffold في فلاتر

عبدالله يوسف
أخر تحديث 2024/11/15
بواسطة عبدالله يوسف اضف تعليق 6 دقيقة للقراءة 7.2 مشاهدات 9
شارك
شرح استخدام Scaffold في فلاتر
شرح استخدام Scaffold في فلاتر
شارك

خدماتنا البرمجية – عرب فلاتر🚀

خدماتنا البرمجية – عرب فلاتر

اليوم، سأشرح استخدام Scaffold في فلاتر Flutter. يمكن استخدام Scaffold في تطوير تطبيقات أجهزة الموبايل باستخدام Flutter و Dart. لا أقصد هذا بطريقة حرفية، ولكن Scaffold ضرورية للغاية عند إنشاء واجهة المستخدم الخاصة بك باستخدام Flutter SDK.

المحتويات
مفهوم استخدام Scaffold في فلاترشرح مكونات Scaffold في فلاترappBarbody جسم التطبيقFloatingActionButton الزر العائمFloatingActionButtonLocationdrawerbottomNavigationBarEndDrawerbackgroundColor

مفهوم استخدام Scaffold في فلاتر

عندما نتحدث عن Scaffold في غرفة مع الناس العاديين، من الممكن أن يعتقدوا أنها سقالات تستخدم للمباني. ومع ذلك، فإن فهم مفاهيم السقالات في البناء والتشييد يمكن أن يساعدنا على فهم أفضل ل Scaffold في فلاتر.

وفقًا لـ Wikipedia، فإن السقالة “هي هيكل مؤقت يستخدم لدعم طاقم العمل والمواد للمساعدة في بناء وصيانة وإصلاح المباني والجسور وجميع الهياكل الأخرى التي من صنع الإنسان”.

في تطوير تطبيقات أجهزة الموبايل باستخدام Flutter، تطبق فئة Scaffold بنية التخطيط المرئي لتصميم المواد الأساسية.بعبارات أبسط، تشبه Scaffold هيكلًا محددًا بواسطة إطار عمل (Flutter) يحتوي على العناصر الأساسية اللازمة لبناء واجهة مستخدم (UI).

تمنحنا Scaffold القدرة على إنشاء تطبيق جوال للأغراض العامة يتكون من عدة أجزاء فردية:

  • AppBar راس التطبيق
  • Body جسم التطبيق
  • Floating Action Bar شريط الإجراءات العائم
  • Bottom Navigation Bar شريط التنقل السفلي

عند استخدامها معًا، يمكن أن تكون هذه العناصر الفردية قوية لبناء وصياغة واجهة مستخدم فعالة ولكنها ممتعة من الناحية الجمالية.

“اقرأ أيضًا: الفرق بين MVC و MVVM في فلاتر“


شرح مكونات Scaffold في فلاتر

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

appBar

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

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Flutter Scaffold'),
    ),
شرح appBar في فلاتر
شرح استخدام Scaffold في فلاتر 14

body جسم التطبيق

body هي الخاصية الأساسية الأخرى المطلوبة عند استخدام Scaffold في فلاتر والتي تشير إلى المنطقة الواقعة أسفل شريط التطبيق appBar وخلف الزر العائم. يتم وضع أي عنصر واجهة مستخدم widget في جسم ال Scaffold في الزاوية العلوية اليسرى افتراضيًا.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Flutter Scaffold'),
    ),
    body: Center(
      child: Text("This is Homepage",
        style: TextStyle(
          color: Colors.black,
          fontSize: 40.0,
          fontStyle: FontStyle.italic,
        ),
      ),
    ),

هنا، يتم استخدام خاصية body لعرض نص “This is Homepage”. تُستخدم أداة Center لمحاذاة النص في الوسط ويتم استخدام أداة TextStyleوالتي تمنح النص لونًا وحجمًا ونمطًا للخط. لا تقلق، لا تتعلق هذه المقالة بالأدوات Center أو Text أو TextStyle، فسيتم تغطيتها لاحقًا.

استخدام appBar and body في فلاتر
شرح استخدام Scaffold في فلاتر 15

FloatingActionButton الزر العائم

FloatingActionButton هو زر يتم عرضه عائمًا فوق ال body في الركن الأيمن السفلي. إنه زر رمز دائري فوق المحتوى للترويج لإجراء أساسي في التطبيق مثل الذي يوجد في تطبيق واتساب.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      ...
      floatingActionButton: FloatingActionButton(
          elevation: 10.0,
          child: Icon(Icons.add),
          onPressed: (){
            print('I am Floating button');
          }
      ),
    );
  }

هنا، يتم استخدام خاصية elevation لـ FloatingActionButton والتي تعطي الظل للزر ويتم استخدام عنصر واجهة Icon لإعطاء رمز للزر. توفر خاصية onPressed رد اتصال يتم استدعاؤه عند النقر فوق الزر، عند النقر فوق الزر “I am Floating button” تتم طباعته في نافذة وحدة التحكم console.

استخدام FloatingActionButton في فلاتر
شرح استخدام Scaffold في فلاتر 16

FloatingActionButtonLocation

بشكل افتراضي، يتم وضع زر FloatingActionButton في الزاوية اليمنى السفلية من الشاشة، لذا فإن الاسم يقول FloatingActionButtonLocation يحدد موضع FloatingActionButton باستخدام الأماكن الثابتة المحددة مسبقًا مثل،

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, //centerDocked
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, //centerFloat
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked, //endDocked
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,   //endFloat
شرح FloatingActionButtonLocation في فلاتر
شرح استخدام Scaffold في فلاتر 17

drawer

drawer عبارة عن لوحة تُعرض على جانب الbody، وغالبًا ما تكون مخفية على الأجهزة المحمولة. عادة ما يتعين على المرء التمرير من اليسار إلى اليمين أو من اليمين إلى اليسار للوصول إلى body.
يستخدم خصائص عنصر واجهة المستخدم Drawer وهو عبارة عن لوحة تنزلق أفقيًا من حافة ال Scaffold لإظهار روابط التنقل في أحد التطبيقات.

drawer: Drawer(
  elevation: 16.0,
  child: Column(
    children: <Widget>[
      UserAccountsDrawerHeader(
        accountName: Text("xyz"),
        accountEmail: Text("xyz@gmail.com"),
        currentAccountPicture: CircleAvatar(
          backgroundColor: Colors.white,
          child: Text("xyz"),
        ),
        otherAccountsPictures: <Widget>[
          CircleAvatar(
            backgroundColor: Colors.white,
            child: Text("abc"),
          )
        ],
      ),
      ListTile(
        title: new Text("All Inboxes"),
        leading: new Icon(Icons.mail),
      ),
      Divider(
        height: 0.1,
      ),
      ListTile(
        title: new Text("Primary"),
        leading: new Icon(Icons.inbox),
      ),
      ListTile(
        title: new Text("Social"),
        leading: new Icon(Icons.people),
      ),
      ListTile(
        title: new Text("Promotions"),
        leading: new Icon(Icons.local_offer),
      )
    ],
  ),
),

هنا، يتم استخدام خاصية drawer داخل ال scaffold. استخدمنا العديد من الأدوات الأخرى داخل هذا لنصنع شكلا جذابًا قليلاً ولكن لا تقلق بشأن جميع الأدوات الأخرى، حيث سيتم شرحها في هذه السلسلة.

استخدام drawer في فلاتر
شرح استخدام Scaffold في فلاتر 18

“اقرأ أيضاً: شرح استخدام ويدجت SnackBar في فلاتر“

bottomNavigationBar

يتم استخدام bottomNavigationBar لعرض شريط تنقل أسفل ال scaffold.

bottomNavigationBar: BottomNavigationBar(
  currentIndex: 0,
  fixedColor: Colors.teal,
  items: [
    BottomNavigationBarItem(
      title: Text("Home"),
      icon: Icon(Icons.home),
    ),
    BottomNavigationBarItem(
      title: Text("Search"),
      icon: Icon(Icons.search),
    ),
    BottomNavigationBarItem(
      title: Text("Add"),
      icon: Icon(Icons.add_box),
    ),
  ],
  onTap: (int index){
    setState(() {
      _currentIndex = index;
    });
  },
),
شرح استخدام bottomNavigationBar في فلاتر
شرح استخدام Scaffold في فلاتر 19

EndDrawer

EndDrawer يشبه خاصية Drawer ولكن في EndDrawer يتم عرضه افتراضيًا في الجانب الأيمن من الشاشة.

“اقرأ أيضاً: شرح استخدام ويدجت AbsorbPointer في فلاتر“

backgroundColor

تحدد هذه الخاصية لون خلفية ال scaffold.

backgroundColor: Colors.white,

“اقرأ أيضاً: شرح استخدام ويدجت AnimatedList في فلاتر“


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

Arab Flutter Community 🚀

انضم إلى مجتمع Arab Flutter
شارك هذا المقال
فيسبوك تويتر Whatsapp Whatsapp لينكد ان تلغرام نسخ الرابط
Avatar of عبدالله يوسف
بواسطة عبدالله يوسف Founder and CEO at ArabFlutter
تابع:
أنا عبدالله يوسف، مهندس مصري ومؤسس موقع عرب فلاتر، ملهم بشغف التكنولوجيا والإبداع. كمصمم مواقع ومبرمج تطبيقات موبايل باستخدام Flutter، أستمتع بخلق عوالم رقمية فريدة ومبتكرة. تتجلى مواهبي في تصميم وتطوير واجهات مستخدم تفاعلية، حيث يمزج الجانب الجمالي بالدقة الهندسية. ما يميزني هو إلمامي الواسع بتقنيات البرمجة والتصميم، ومقدرتي على تطوير تطبيقات متنوعة عبر منصات مختلفة. أعتبر نفسي مبدعًا وملتزمًا، حيث أسعى دائمًا لتحقيق تحسين مستمر في مهاراتي وتقنياتي. أستمتع بتحديات العمل الجماعي وأؤمن بأهمية الابتكار والتطور. بفضل إبداعي والتزامي، أسعى لتقديم حلول فعّالة تلبي توقعات العملاء وتفوق عن المألوف.
اترك تعليقا اترك تعليقا

اترك تعليقاً إلغاء الرد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
Tutorials
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
Tutorials
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
Tutorials
طريقة انشاء المجلدات باستخدام Dart
طريقة انشاء المجلدات باستخدام كود Dart تلقائيًا
Tutorials

مقالات ذات الصلة

اطلع على المزيد من المقالات المتعلقة بهذا الموضوع!
شرح استخدام ThemeData في فلاتر
Widgets

شرح استخدام ThemeData في فلاتر

37 2
شرح استخدام ويدجت SingleChildScrollView في فلاتر
Widgets

شرح استخدام SingleChildScrollView في فلاتر

26 1
شرح استخدام ويدجت WillPopScope في فلاتر
Widgets

شرح استخدام ويدجت WillPopScope في فلاتر

19 1
شرح استخدام ويدجت RichText في فلاتر 
Widgets

شرح استخدام ويدجت RichText في فلاتر 

20
شرح استخدام ويدجت TextButton في فلاتر
Widgets

شرح استخدام ويدجت TextButton في فلاتر

20
شرح استخدام ويدجت OutlinedButton في فلاتر
Widgets

شرح استخدام ويدجت OutlinedButton في فلاتر

28 1
أظهر المزيد
شعار موقع عرب فلاتر شعار موقع عرب فلاتر

About US

Quick Links

  • خدماتنا
  • من نحن
  • اتصل بنا
  • اتفاقية استخدام
  • سياسة الخصوصية
© جميع الحقوق محفوظة موقع عرب فلاتر 2023
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
adbanner
تم اكتشاف مانع إعلانات
مرحبًا، يرجى إيقاف مانع الإعلانات. الإعلانات تُساهم في دعم موقعنا وتغطية جزء من تكاليف الاستضافة وتطوير المحتوى. شكرًا لتفهمك ودعمك.
Okay, I'll Whitelist
Welcome Back!

Sign in to your account

هل نسيت كلمة المرور؟