استفاده از این محتوا رایگان میباشد

چارا برای خلق ارزش و توسعه مهارت های درونی و رشد استعدادها و جایی برای انجام پروژهای برنامه نویسی هست، هدف ما پیاده سازی ایده شما و توسعه مهارت های فردی کاربران برای ارتقا و اجرای هدفمندانه کسب و کارها میباشد بیشتر آموزش های سایت به صورت رایگان در اختیار شما هستند اما برای دسترسی به همه آموزش ها نیازمند تهیه عضویت ویژه سایت ما میباشید.

کاربرد mediaquery در فلاتر ❤️

سایت مرجع فلاتر

کاربرد mediaquery در فلاتر

کاربرد mediaquery در فلاتر

وارد محیط کد نویسی میشیم برای اینکه با مفهوم mediaquery آشنا بشیم من میام از دوتا Textfield استفاده میکنم و به صورت زیر کد نویسی میکنم :

خب دوستان Container و Text هامون رو هم ایجاد کردیم

حالا میخوایم با mediaquery کار کنیم اول یه توضیح بدم این mediaquery برای ما چی کار میکنه

اگه دقت کرده باشید هر دیوایس و دستگاه موبایل یه اندازه خاصی داره

حالا ما برای اینکه بتونیم اندازه های این ویجت ها مثلا container و Textfield هامون و یا دکمه هایی که داریم رو تنظیم کنیم

که برای هر دیوایس یه اندازه خاصی رو بگیرن میتونیم از این mediaquery استفاده کنیم

به عنوان مثال من میام داخل continer یه width دستی بهش میدم و به صورت زیر کد نویسی میکنم :

توی فیلم بالا من دستی بهش مقدار میدم

اما وقتی اسکرین و چرخوندم سایز این container من تغییر نکرد برای اینکه این سایز تغییر کنه

و مطابق با سایز اسکرین دیوایس ها بشه به صورت زیر از Mediaquery استفاده میکنیم و کد نویسی میکنیم.

خب الان میبینید که سایز Container من با چرخوندن اسکرین تغییر میکنه و متناسب با عرض صفحه خودش رو ست میکنه !

حالا اگه من بخوام یه سایز خاص رو بهش بدم به صورت زیر کد نویسی میکنیم.

توضیحات تکمیلی

توی فیلم بالا دیدید که در حالت کلی گفتم بیا این width رو نگاه کن اگه سایزش مثلا از 550 بیشتربود اندازه صفحه باشه مثلا 500 در غیر این صورت ضربدر 95 !

و بعد بهش Target و پاس میدیم خب دوستان دیدید که تونستیم ویجت های مختلف و کاربرد mediaquery در فلاتر رو داخل دیوایس ها با هر اندازه ای و کنترل کنیم و به صورت ریسپانسیو نمایش بدیم.

اگه توی درک کد نویسی بالا کمی دچار مشکل شدید حتما چند بار از اول آموزش رو ببینید و با دقت خودتون هم کد نویسی کنید کاملا ساختار mediaquery دستتون میاد و خیلی ساده میشه ازش استفاده کرد.

توی بخش بعدی میبینمتون.

آموزش کار با Textfield در فلاتر ❤️
آموزش کار با ویجت Gesture-detector ❤️
, , , ,

دیدگاهتان را بنویسید

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

این قسمت نباید خالی باشد
این قسمت نباید خالی باشد
لطفاً یک نشانی ایمیل معتبر بنویسید.
شما برای ادامه باید با شرایط موافقت کنید

فهرست