برنامه‌نویسی گرافیکی آسان با چارچوب Qt-قسمت سوم

   
نام نویسنده:
|
دسته بندی:
|
در جلسه پیش با برنامه «سلام دنیا» در qml آشنا شدیم و کد آن را بررسی کردیم. همان‌طور که در جلسه قبل مشاهده کردید با کدهای‌ qml یک فرم گرافیکی طراحی کردیم که شامل یک برچسب بود که در آن «hello world» نوشته شده بود. در این جلسه می‌خواهیم لوگوی faceit را با کد بین چند کادر انتقال دهیم. برای این کار چون می‌خواهیم یک عکس را در پروژه استفاده کنیم ابتدا باید عکس را در دایرکتوری که فرم طراحی شده با qml که پسوند آن نیز qml است قرار دهیم (باید عکس و فرم کنار هم قرار گیرند). سپس در قسمت فایل‌های پروژه (projects) در qtcreator بر روی resources کلیک راست کرده گزینه «add existing files» را انتخاب کرده و فایل عکس مورد نظر را انتخاب کنید.

حال می‌خواهیم با استفاده از ابزار طراحی qtcreator کد qml را خودکار ایجاد کنیم. به شکل زیر دقت کنید:

qt111

با توجه به شکل بالا توضیحات زیر را بخوانید:
1.    برای دیدن محیط طراحی گرافیکی qtcreator ابتدا بر روی فایل با پسوند qml که در resources وجود دارد دو بار کلیک کنید تا در قسمت ویرایشگر باز شود و دکمه Design فعال شود سپس بر روی دکمه Design کلیک کنید فرمی شبیه شکل بالا را مشاهده خواهید کرد.
2.    در این قسمت کنترل هایی که بر روی فرم قرار داده‌اید را مشاهده می‌کنید. و برای دسترسی و انتخاب کنترل‌های اضافه شده به فرم از آن استفاده می‌کنید.
3.    در این قسمت کنترل‌های قابل استفاده را مشاهده می‌کنید که برای اضافه کردن آن‌ها به فرم باید آن‌ها را توسط ماوس بر روی فرم یا قسمت ۲ بکشید.
4.    با استفاده از این قسمت می‌توانید بین فرم‌های مختلف جابجا شوید.
5.    فرم شما در این قسمت وجود دارد. در‌واقع تغییراتی که اعمال می‌کنید را در این محل می‌بینید.
قسمت سمت راست مربوط به خصوصیات کنترل انتخاب شده است، خصوصیاتی چون رنگ، فونت، اندازه و غیره.

چون همچنان بر روی فرم ما hello world نوشته شده با انتخاب کنترل Text در قسمت navigation یا قسمت ۲ شکل بالا و سپس زدن کلید delete کنترل Text را حذف کنید زیرا در این پروژه نیازی به آن نداریم. حال می‌خواهیم رنگ پس زمینه فرم را تیره کنیم. برای تغییر رنگ فرم ابتدا در قسمت navigation کنترل Window را انتخاب کنید سپس در قسمت سمت راست یا properties در زیر قسمت color رنگ را به رنگی تیره تغییر می‌دهیم (برای مثال رنگ #343434). اکنون از قسمت library زبانه resources عکس را با ماوس گرفته و بر روی فرم می‌کشیم و رها می‌کنیم، با این کار ابتدا یک کنترل image به فرم اضافه شده سپس عکس مورد نظر ما در آن قرار می‌گیرد. کنترل image را انتخاب کرده و در قسمت خصوصیات مقدار x را ۱۰ و مقدار y را ۲۰ قرار دهید (البته اعداد را می‌توانید به دلخواه خود تغییر دهید). اگر اندازه عکس بزرگ است می‌توانید با تغییر دو خصوصیت w و h اندازه عکس را به اندازه دلخواه درآورید.
می‌خواهیم کادری به اندازه لوگو و توخالی درست کنیم، برای این کار از قسمت library کنترل rectangle را انتخاب و بر روی فرم می‌کشیم. باز در قسمت خصوصیات x را و y را ۲۰ و h وw را ۶۴ قرار می‌دهیم. اگر توجه کنید هنوز مستطیل ما توپر است برای تو خالی کردن آن بر روی دکمه مشخص شده در شکل زیر عمل می‌کنیم. همچنین رنگ مستطیل را به مقدار #808080 تغییر می‌دهیم. به شکل زیر توجه نمایید.

qt222

به شکل بالا دقت کنید متوجه می‌شوید در قسمت خصوصیات مقادیری را که تغییر داده‌ایم با رنگ متفاوتی (در اینجا آبی) مشخص شده‌اند. برای بهتر دیدن دکمه‌ای که با فلش مشخص شده می‌توانید شکل زیر را بنگرید.

 

qt333


دکمه فوق برای transparent یا شفاف کردن کنترل مستطیل به کار می‌رود. Border یا حاشیه را شفاف نکرده‌ایم و تنها رنگ آن را به #808080 تغییر داده‌ایم. شناسه مستطیل مذکور را از rectangle1 به topLeftRectangle تغییر می‌دهیم. این شناسه در قسمت خصوصیات با نام id وجود دارد.
تا اینجا هر تغییری که در حالت design مربوط به qtcreator ایجاد کرده‌ایم با تغییر دادن حالت از Design به Edit کد qml تولید شده را می‌توانیم ببینیم. لازم به ذکر است که هر کاری را که در حالت Design انجام می‌دهیم به صورت کد qml قابل پیاده‌سازی است و در صورت تمایل می‌توان تمام کارها را به صورت دستی انجام داد. کد را مشاهده کنید.

import QtQuick 2.3
import QtQuick.Window 2.2
Window {
    id: window1
    color: "#343434"
    visible: true
    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
    Image {
        id: faceit
        x: 10
        y: 20
        width: 64
        height: 64
        source: "faceit_logo.jpg"
    }
    Rectangle {
        id: topLeftRectangle
        x: 10
        y: 20
        width: 64
        height: 64
        color: "#00000000"
        radius: 6
        border.color: "#808080"
    }
}

با ما همراه باشید تا جلسه آینده انیمیشن ساده لوگوی فیسیت را کامل کنیم.

اخبار مرتبط

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

ارسال نظر


شخصی سازی Close
شما در این صفحه قادر به شخصی سازی نمیباشید