ویجت Stack

تعداد بازدید ها : 958 بازدید
 ویجت Stack

ویجت Stack ، فرزندان خود را به ترتیب بر روی هم قرار می دهد . این ویجت در زمانی کاربرد دارد که شما مایل باشید ، چندین ویجت را با ترتیبی خاص بر روی هم دیگر قرار دهید . ( به عنوان مثال عکس های پشت سر هم یا دکمه ای بر روی عکس کاربر )

Stack_Sampel

در کد زیر ، شکل کلی پیاده سازی این ویجت نشان داده شده است :

  1. Stack(
  2. alignment: Alignment.bottomRight,
  3. children: <Widget>[
  4. Container(
  5. width: 40.0,
  6. height: 40.0,
  7. margin: EdgeInsets.symmetric(horizontal: 5.0),
  8. decoration: BoxDecoration(
  9. shape: BoxShape.circle,
  10. image: DecorationImage(
  11. image: NetworkImage(
  12. 'https://javareshkian.ir/wp-content/uploads/2020/04/fakhr-Small-100x100.png'),
  13. fit: BoxFit.cover,
  14. ),
  15. ),
  16. ),
  17. CircleAvatar(
  18. radius: 10.0,
  19. backgroundColor: Colors.blueAccent,
  20. child: Icon(
  21. Icons.add,
  22. size: 14.0,
  23. color: Colors.white,
  24. ),
  25. )
  26. ],
  27. )
Stack(
  alignment: Alignment.bottomRight,
  children: <Widget>[
    Container(
      width: 40.0,
      height: 40.0,
      margin: EdgeInsets.symmetric(horizontal: 5.0),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        image: DecorationImage(
          image: NetworkImage(
              'https://javareshkian.ir/wp-content/uploads/2020/04/fakhr-Small-100x100.png'),
          fit: BoxFit.cover,
        ),
      ),
    ),
    CircleAvatar(
      radius: 10.0,
      backgroundColor: Colors.blueAccent,
      child: Icon(
        Icons.add,
        size: 14.0,
        color: Colors.white,
      ),
    )
  ],
)

استفاده از کلاس Positioned

همانطور که در خط ۲ کد فوق مشاهده می نمایید جهت تعیین موقعیت تصویر ترسیم شده توسط ویجت CircleAvatar از خصوصیت alignment: Alignment.bottomRight استفاده شده است . در صورتی که مایلید موقعیت دهی انعطاف پذیرتری داشته باشید می توانید از کلاس Positioned  نیز استفاده نمایید . این کلاس با خصوصیت های top , right , button , left به شما این امکان را می دهد تا کنترل شخصی سازی شده ای را بر روی موقعیت ویجت های Stack ، اعمال نمایید .

قطعه کد زیر توسط کلاس Positioned مجدد پیاده سازی شده است :

  1. Stack(
  2. children: <Widget>[
  3. Container(
  4. width: 40.0,
  5. height: 40.0,
  6. margin: EdgeInsets.symmetric(horizontal: 5.0),
  7. padding: EdgeInsets.all(2.0),
  8. decoration: BoxDecoration(
  9. shape: BoxShape.circle,
  10. image: DecorationImage(
  11. image: NetworkImage(
  12. 'https://javareshkian.ir/wp-content/uploads/2020/04/fakhr-Small-100x100.png'),
  13. fit: BoxFit.cover,
  14. ),
  15. ),
  16. ),
  17. Positioned(
  18. right: 1.0,
  19. top: 5.0,
  20. child: CircleAvatar(
  21. radius: 10.0,
  22. backgroundColor: Colors.blueAccent,
  23. child: Icon(
  24. Icons.add,
  25. size: 14.0,
  26. color: Colors.white,
  27. ),
  28. ),
  29. )
  30. ],
  31. )
Stack(
      children: <Widget>[
        Container(
          width: 40.0,
          height: 40.0,
          margin: EdgeInsets.symmetric(horizontal: 5.0),
          padding: EdgeInsets.all(2.0),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            image: DecorationImage(
              image: NetworkImage(
                  'https://javareshkian.ir/wp-content/uploads/2020/04/fakhr-Small-100x100.png'),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Positioned(
          right: 1.0,
          top: 5.0,
          child: CircleAvatar(
            radius: 10.0,
            backgroundColor: Colors.blueAccent,
            child: Icon(
              Icons.add,
              size: 14.0,
              color: Colors.white,
            ),
          ),
        )
      ],
)

جهت کسب اطلاعات بیشتر از این آدرس به سایت اصلی فلاتر مراجعه نمایید .

می خوانم   روش دریافت مقدار از TextField

امیدوارم این مطلب برای شما مفید باشد .

3+
محمدمجتبی جوارشکیان

محمدمجتبی جوارشکیان

من محمدمجتبی جوارشکیان ، کارشناس IT و فعال اجتماعی هستم و در حوزه معماری ، طراحی ، تحلیل گری ، مدلسازی و توسعه ی محیط های نرم افزاری فعالیت دارم. همانند سایر کارشناسان IT در تلاشم تا دنیا جای زیباتری برای زندگی باشد. بسیار خوشحال می شوم من را از انتقادات ، پیشنهادات و نظرات خود مطلع فرمایید. آدرس ایمیل : mjfakhr@yahoo.com

ارسال یک پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

14 + بیست =