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

في Flutter ، يمكن استخدام العديد من المكونات لتصميم واجهات المستخدم ، بما في ذلك IndexedStack ، الذي يستخدم لإدارة عدة مكونات في Stack وتحديد الويدجت الظاهرة في الأعلى. يمكن استخدام IndexedStack في Flutter لتحسين تنظيم وتفاعل المستخدم مع التطبيق.

في هذا المقال ، سنشرح IndexedStack ونوضح جميع خصائصه بالتفصيل ونوضح كيفية استخدامه في تصميم واجهات المستخدم.

ما هو IndexedStack في فلاتر؟

IndexedStack هو واحد من المكونات الأساسية في Flutter والتي تستخدم لإدارة عدة مكونات في Stack وتحديد الويدجت الظاهرة في الأعلى. يمكن استخدام IndexedStack في Flutter لتحسين تنظيم وتفاعل المستخدم مع التطبيق.

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

خصائص IndexedStack

يمكن تحديد خصائص IndexedStack باستخدام العديد من الخصائص التي تحدد شكل ومظهر IndexedStack والتحكم في المحتوى. يمكن استخدام العديد من الخصائص في IndexedStack في Flutter.

1- children

تسمح هذه الخاصية بتحديد المكونات التي يتم عرضها في IndexedStack.

IndexedStack(
  index: 0,
  children: <Widget>[
    Container(
      color: Colors.red,
    ),
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.blue,
    ),
  ],
),

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

2- index

تسمح هذه الخاصية بتحديد الويدجت الظاهرة في الأعلى في IndexedStack.

IndexedStack(
  index: 0,
  children: <Widget>[
    Container(
      color: Colors.red,
    ),
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.blue,
    ),
  ],
),

3- alignment

تسمح هذه الخاصية بتحديد محاذاة العناصر داخل IndexedStack.

IndexedStack(
  alignment: Alignment.bottomCenter,
  index: 0,
  children: <Widget>[
    Container(
      color: Colors.red,
      height: 100,
      width: 100,
    ),
    Container(
      color: Colors.green,
      height: 150,
      width: 150,
    ),
    Container(
      color: Colors.blue,
      height: 200,
      width: 200,
    ),
  ],
),

4- sizing

تسمح هذه الخاصية بتحديد كيفية تحجيم العناصر داخل IndexedStack.

IndexedStack(
  sizing: StackFit.expand,
  index: 0,
  children: <Widget>[
    Container(
      color: Colors.red,
    ),
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.blue,
    ),
  ],
),

5- textDirection

تسمح هذه الخاصية بتحديد اتجاه النص داخل IndexedStack.

IndexedStack(
  textDirection: TextDirection.rtl,
  index: 0,
  children: <Widget>[
    Container(
      color: Colors.red,
    ),
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.blue,
    ),
  ],
),

6- key

تسمح هذه الخاصيةبتعيين مفتاح فريد لـ IndexedStack لإدارة حالته.

IndexedStack(
  key: UniqueKey(),
  index: 0,
  children: <Widget>[
    Container(
      color: Colors.red,
    ),
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.blue,
    ),
  ],
),

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