خب در جلسه گذشته در مورد کنترل 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 اشاره می‌کند.