در این جلسه باید صفحه نمایش ماشین حساب را تکمیل کنیم و از جاوا اسکریپت برای منطق برنامه استفاده کنیم. Qml یک زبان شبیه css است که برای ساخت ظاهر برنامهها به کار میرود. اما چارچوب Qt برای منطق این زبان از جاوااسکریپت استفاده میکند که میتوان توسط این دو یک برنامه را کامل نوشت. ترکیب جاوااسکریپت و Qml به گونهای صورت گرفته که نیازی به جداسازی این دو از یکدیگر نیست و هر دو را در یک فایل میتوان نوشت. حتی مقادیر هر خصوصیت Qml را نیز میتوان با جاوااسکریپت محاسبه کرد و به خصوصیت مورد نظر اضافه کرد.
خب در جلسه گذشته در مورد کنترل Image صحبت کردیم و از ListView نیز استفاده کردیم. کد مربوط به صفحه نمایش ماشین حساب به صورت زیر میشود.
import QtQuick 2.0 import QtQuick.Window 2.0 Item { id: display Item { id: theItem width: parent.width + 32 height: parent.height Rectangle { id: rect x: 16 color: "white" height: parent.height width: display.width - 16 } Image { anchors.right: rect.left source: "images/paper-edge-left.png" height: parent.height fillMode: Image.TileVertically } Image { anchors.left: rect.right source: "images/paper-edge-right.png" height: parent.height fillMode: Image.TileVertically } Image { id: grip source: "images/paper-grip.png" anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: parent.bottom anchors.bottomMargin: 20 } ListView { id: listView x: 16; y: 30 width: display.width height: display.height - 50 - y delegate: Item { height: display.fontSize * 1.1 width: parent.width Text { id: operator x: 6 font.pixelSize: display.fontSize color: "#6da43d" text: model.operator } Text { id: operand font.pixelSize: display.fontSize anchors.right: parent.right anchors.rightMargin: 22 text: model.operand } } model: ListModel { } } }
اگر به کد بالا توجه نمایید متوجه میشوید که مقادیر width یا height اکثراً با مقادیر ثابت مقداردهی نشدهاند و مقادیر ابتدا محاسبه شده و بعد مقدار دهی صورت گرفته است. مانند:
height: display.fontSize * 1.1
حال برمیگردیم به کنترل Button و آن را تکمیل میکنیم. کنترل Button نیاز به رخدادی دارد که وقتی با نشانهگر ماوس روی آن کلیک شد فعال شود. برای این کار از کنترل MouseArea در آن استفاده میکنیم و این کنترل باید زیرمجموعه کنترل ریشه قرار گیرد تا در صورت کلیک شدن در هر جای آن دکمه فعال شود. سپس در رخداد کلیک آن باید کدی نوشته شود که تابعی را فراخوانی نماید. برای این کار باید یک سری متغیر تعریف کنیم که این متغیرها در جاوااسکریپت قابل استفاده هستند. تعریف این متغیرها با کلمه کلیدی property شروع شده و پس از آن نوع متغیر میآید و سپس نام متغیر و در آخر در صورتی که مقدار دهی اولیه نیاز باشد مقدار پس از کالن(:) نوشته میشود. به مثالهای زیر توجه نمایید:
property color color: "#eceeea" property bool operator: false
همانطور که میبینید متغیر از نوع رنگ با color و متغیر از نوع منطقی با bool تعریف شدهاند. از طریق نامهای color و operator میتوان به این متغیرها دسترسی داشت.
در صورتی که بخواهیم به یکی از خصوصیات یک کنترل دسترسی داشته باشیم ولی به جای استفاده از شناسه آن نامی مستعار برای آن تعیین کنیم که از طریق آن دسترسی داشته باشیم باید به صورت زیر متغیر را تعریف کنیم.
property alias text: textItem.text Text { id: textItem }
بعد از کلمه کلیدی property از کلمه کلیدی alias استفاده میکنیم و سپس نام مستعار را میآوریم. همانطور که مشاهده میکنید پس از تعریف نام مستعار text از این به بعد text به خصوصیت text مربوط به textItem یا کنترل Text اشاره میکند.
ثبت نظر