رفتن به مطلب
جامعهٔ برنامه‌نویسان ایران
کامبیز اسدزاده

نحوهٔ ایجاد رابط کاربری مدرن تحت Qt Quick و C++‎‎


امتیاز دادن به این موضوع:

پست های پیشنهاد شده

این تاپیک مخصوص نمونه مثال‌هایی از پروژه‌ها، ماژول‌ها، کامپوننت‌ها و افزونه‌هایی می‌باشد که به صورت استاندارد و مدرن توسط سی‌پلاس‌پلاس و جاوا‌اسکریپت تحت فناوری Qt Quick طراحی می‌شوند.

بدون هیچگونه تعارفی باید بگوییم هر نرم‌افزار (اپلیکیشن) و یا محصولی که ساخته می‌شود باید مطابق استاندارد‌هایی که مهندسین طراحی بر روی آن تاکید دارند توسعه یابد. این استاندارد‌ها ممکن است شامل اصول کُدنویسی، الگو‌های کد‌نویسی و یا قوانین روانشناسی رنگ‌ها، چیدمان اشیاء و هر موردی که می‌تواند در نتیجهٔ آن تاثیر مثبت داشته باشد مهم هستند.

با هدف اینکه می‌خواهیم نمونه مثال‌هایی را برای تازه واردین قرار دهیم تا بتوانند به درستی ونحوهٔ صحیح طراحی و پیاده سازی دو بخش بک‌اِند و فرانت‌اِند آشنا شوند، نمونه مثال‌های شما باید دارای شرایط زیر باشند

  • ساختار استاندارد کلاس‌ها و توابع در سمت سی‌پلاس‌پلاس
  • استفاده از اشاره گر‌های هوشمند و یا رعایت اصول مدیریت حافظه
  • استفاده از ماکرو‌های سفارشی iOS، Android، Windows، macOS و لینوکس جهت مدیریت بهتر بعضی از ویژگی‌های منحصربفرد سیستم‌عامل‌ها
  • تا جایی که می‌توانید سعی کنید از ابزار‌های qmake و qbs در این نمونه مثال‌ها استفاده کنید
  • رعایت رنگ‌بندی و همچنین اصول UX درست مهم است
  • مثال شما باید برگرفته و بر اساس استاندارد‌های توصیه شدهٔ doc.qt.io باشد.
  • استفادهٔ بهینه از لنگر‌ها و همچنین ترازبندی صحیح لایه‌ها و نگه‌دارنده‌ها در سمت QML
  • استفاده از تصاویر و یا قالب‌های استاندارد و سبک مانند SVG, PNG و base64
  • استفاده از فونت آیکونیک‌ها مانند (FontAwesome)

این پست ممکن است ویرایش و یا به روز‌رسانی شود. در ادامه شما می‌توانید بر اساس شرایطی که ذکر شده است و با توجه به استاندارد‌های Google Material، Microsoft Fluent و همچنین Apple Human Interface نمونه مثال‌های خود را ارائه دهید که برخی از مثال‌های استاندارد در زیر آمده اند.

 

event_listing_full.png attachment (1).png

shot__3___v.9.png attachment (1).jpg

intel-2_2x.png artboard_copy_7.png

trello_members_full.jpg mockup_hd_1.png

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

امروز می‌خوام برای شروع کار نمونه مثال ساده ای رو که بخشی از کامپوننت‌های پروژه Jupiter برای شرکتمون بود قرار بدم. این نمونه شامل یک کنترل ورودی InputBox و Button با یک افکت و انیمیشن ملایم سفارشی شده است که قابلیت‌های شناور ماوس، واکنش دادن به ورودی و وضعیت نتیجهٔ ورودی می‌باشد که ظاهری مشابه و حتی بهتر از Bootstrap 4.x را دارد. در این مثال فرم به صورت سفارشی به ورودی زبان، قالب ایمیل و تلفن حساس است.

 

فرم در حالت عادی

Jupiter-Inputbox-01.png

مقدار ورودی (نوع زبان) به غیر از فارسی نامعتبر تشخیص داده می‌شود.

Jupiter-Inputbox-02.png

تایید ورودی‌های معتبر

Jupiter-Inputbox-03.png

 

ویژگی‌های title، placeHolder، language، email و mobile در کنترل InputBox قابل تنظیم هستند. به عنوان مثال زمانی که شما مشخصهٔ email را برابر true قرار دهید می‌توانید مقدار ورودی پست الکترونیکی را ارزیابی کنید.

مثال :

Controls.InputBox { 

 id:email; title: "آدرس ایمیل";
 email: true;
 placeHolder: "info@iostream.ir"

}

مثال :

Controls.InputBox { id:firstname;
 title: "نام";
 language: true;
 placeHolder: "کامبیز"; 
}

Controls.InputBox { 
 id:lastname;
 title: "نام خانوادگی";
 language: true;
 placeHolder: "اسدزاده"
}

Controls.InputBox { 
id:mobile;
 title: "شماره تلفن همراه";
 mobile: true;
 placeHolder: "09140000000"
}

Controls.InputBox { 
id:email;
 title: "آدرس ایمیل";
 email: true;
 placeHolder: "info@iostream.ir"
}
  • مقادیر پرچم به صورت پیشفرض برابر با false هستند. زمانی که شما مقدار یکی از مشخصه‌های بالا را مشخص نکنید آن false در نظر گرفته می‌شود.
  • مشخصهٔ پست الکترونیکی شماره تلفن‌های همراه اول و ایرانسل را پشتیبانی می‌کند.

 

شما می‌توانید برای مشاهده منبع کُد و همچنین نحوهٔ برنامه‌نویسی این مثال فایل ضمیمه را دریافت کنید.?

Jupiter-Component(InputBox).zip

 

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

به گفتگو ملحق شوید

شما همین الآن می‌توانید مطلبی را ارسال و بعداً ثبت‌نام کنید. اگر حساب کاربری دارید، و با حساب کاربری خود مطلب ارسال کنید.
نکته: مطلب شما قبل از انتشار نیاز به بازبینی توسط میانجی‌گر‌ها دارد.

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از ۷۵ اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به عنوان یک لینک به جای

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.


  • کاربران آنلاین در این صفحه   0 کاربر

    هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.

×
×
  • جدید...