QML Temelleri: Ögeler, Anchor Düzeni ve Property Binding

Geleneksel C++ Qt Widgets mimarisi kurumsal masaüstü yazılımlarında mükemmel olsa da, akıllı telefonlar, dokunmatik gömülü ekranlar (IoT cihazları) ve akıcı animasyonlar söz konusu olduğunda yerini bildirimsel (declarative) Qt Quick mimarisine bırakır. JSON ve JavaScript benzeri modern sözdizimiyle QML temelleri ve property binding yapısı, arayüz tasarımını bir HTML/CSS sayfası yazar gibi zahmetsiz ve reaktif (reactive) hale getirir.

Bu rehberde; QML sözdizimini, en temel görsel bileşenleri (Item, Rectangle, Text, MouseArea), mutlak piksel konumlandırma yerine esnek anchors sistemini ve QML’in kalbi olan otomatik özellik bağlama (Property Binding) mantığını keşfedeceğiz.

QML Nedir ve Bildirimsel (Declarative) Mantık Nasıl Çalışır?

Klasik C++’ta bir butonun boyutunu ve rengini değiştirmek için emir kipinde (imperative) kod yazarız (button->setText("OK"); button->resize(100, 40);). QML’de ise neyin nasıl çizileceğini bildirimsel (declarative) olarak tarif ederiz:

import QtQuick 2.15

Rectangle {
    width: 200
    height: 60
    color: "#2980b9"
    radius: 8

    Text {
        anchors.centerIn: parent
        text: "Giriş Yap"
        color: "white"
        font.pixelSize: 16
        font.bold: true
    }
}

Arka planda Qt Quick motoru (QML Scene Graph), bu nesneleri GPU tabanlı (OpenGL, Vulkan veya Metal) bir sahne ağacına dönüştürerek doğrudan ekran kartında 60 FPS hızında render eder.

Temel QML Ögeleri (Primitives)

Öge	Açıklama
`Item`	Tüm görsel ögelerin temel sınıfıdır. Ekranda görünmez; gruplama ve geometri sağlar.
`Rectangle`	Arka plan rengi, kenarlık (`border`) ve köşe yuvarlatma (`radius`) olan dikdörtgen.
`Text`	Metin gösterme ögesi. Yazı tipi, boyutu ve renk ayarları içerir.
`Image`	PNG, JPEG veya SVG formatında resimleri yükler ve ölçeklendirir.
`MouseArea`	Tıklama (`onClicked`), basılı tutma ve sürükleme gibi dokunmatik olayları yakalar.

Anchor Düzeni (Anchors): Esnek ve Duyarlı Yerleşim

Pencerelerin farklı ekran çözünürlüklerinde veya telefonların yatay/dikey modlarında düzgün görünmesi için kesin koordinatlar (x: 50, y: 100) yerine anchors (çapalar) kullanılır:

import QtQuick 2.15

Rectangle {
    id: root
    width: 400
    height: 300
    color: "#1e1e1e"

    // 1. Ekranın tam ortasına yerleştirme
    Rectangle {
        id: centerBox
        width: 150
        height: 150
        color: "#e74c3c"
        anchors.centerIn: parent
    }

    // 2. Başka bir nesneye göre hizalama (centerBox'ın üstüne ve ortasına koy)
    Text {
        text: "Merkezdeki Kutu"
        color: "white"
        anchors.bottom: centerBox.top
        anchors.horizontalCenter: centerBox.horizontalCenter
        anchors.bottomMargin: 10 // 10 piksel boşluk bırak
    }

    // 3. Kenarlara yaslama
    Rectangle {
        height: 40
        color: "#34495e"
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
    }
}

Property Binding (Özellik Bağlama) ve Reaktivite

QML’in en güçlü yönü, bir özelliğin değerini başka bir özelliğe veya matematiksel ifadeye bağlayabilmenizdir. Kaynak özellik her değiştiğinde, bağlı olan tüm hedef özellikler otomatik olarak yeniden hesaplanır.

import QtQuick 2.15

Rectangle {
    width: 300
    height: 200
    color: "#2c3e50"

    Rectangle {
        id: dynamicBox
        // dynamicBox'ın genişliği her zaman ana pencerenin yarısı kadardır!
        width: parent.width / 2
        height: 80
        color: mouseHandler.pressed ? "#27ae60" : "#e67e22" // Basıldığında yeşil, normalde turuncu
        radius: 6
        anchors.centerIn: parent

        MouseArea {
            id: mouseHandler
            anchors.fill: parent
        }

        Text {
            anchors.centerIn: parent
            text: "Genişlik: " + Math.round(dynamicBox.width) + "px"
            color: "white"
        }
    }
}

Yukarıdaki örnekte pencereyi fare ile yeniden boyutlandırdığınızda veya kutuya tıkladığınızda:

width: parent.width / 2 otomatik güncellenir.
color anında reaktif şekilde renk değiştirir.
text içindeki genişlik yazısı sıfır C++ koduyla canlı olarak ekranda yenilenir.

Kritik Hata Uyarısı (Binding Loop): Eğer bir JavaScript fonksiyonu içinde dynamicBox.width = 100 şeklinde doğrudan değer atarsanız, QML’in oluşturduğu otomatik parent.width / 2 bağını kırmış (break) olursunuz. Yeniden bağlamak için Qt.binding() kullanmanız gerekir.

Tıklama ve Etkileşim: MouseArea ile Özel Buton

QML’de basit ögeleri birleştirerek göz alıcı özel butonlar üretmek saniyeler sürer:

import QtQuick 2.15

Rectangle {
    id: customBtn
    width: 140
    height: 45
    radius: 22
    color: clickArea.containsMouse ? "#2ecc71" : "#27ae60"
    scale: clickArea.pressed ? 0.95 : 1.0 // Tıklanınca küçülme mikro-animasyonu

    // Akıcı animasyon davranışı
    Behavior on scale { NumberAnimation { duration: 100 } }
    Behavior on color { ColorAnimation { duration: 150 } }

    Text {
        anchors.centerIn: parent
        text: "Başlat"
        color: "white"
        font.bold: true
    }

    MouseArea {
        id: clickArea
        anchors.fill: parent
        hoverEnabled: true
        onClicked: {
            console.log("Butona tıklandı!");
        }
    }
}

Özet

QML, modern arayüz geliştiriciliği için benzersiz bir çeviklik sağlar. Bildirimsel bileşen hiyerarşisi, esnek anchors yerleşimi ve otomatik property binding mekanizması sayesinde kod karmaşasına girmeden şık ve duyarlı uygulamalar geliştirebilirsiniz.

arayuz-tasarimi, gui, qml, qt, qt-quick