Qt QML Model, View & Delegate

Pada tulisan ini saya hanya akan berbagi kode sumber Qt Quick pertama. Ini adalah intro ke pemrograman model view dengan QML. Sebelumnya sudah saya posting model view untuk Qt C++.

Contoh proyek ini adalah Qt Quick UI, jika anda membuat New Project di Qt Creator. File kode sumber dibagi menjadi 3, ditambah satu file “Kepala” yang opsional.

Utama.qml

Ini adalah file utama yang dieksekusi dengan qmlscene.

import QtQuick 2.0

Rectangle {
    id: kotak
    width: 480
    height: 640

    ListView {
        width: 360
        height: 640
        model:mod
        header:Kepala{}
        delegate: Jubir{}
    }
    Model {
        id:mod
    }
}

Kepala.qml

File ini opsional, jika tidak mau membuat file ini, cukup letakkan kode berikut pada properti header di file Utama (ganti value Kepala{} ).

import QtQuick 2.0

Rectangle {
    width: kotak.width
    height: kotak.height/4
    color: "#C7C7C7"
    Text {
        text: "Buah"
        anchors.centerIn: parent
        font.pixelSize: parent.height/1.75
        font.bold: true
    }
}

Jubir.qml

Ini adalah file delegasi untuk model dan menampilkan data ke aplikasi.

import QtQuick 2.0

Item {
    width: kotak.width
    height: kotak.height/4
    Rectangle{
        id:baseRec
        width: kotak.width
        height: kotak.height/4
        color:wa
        Text {
            text:nama
            anchors.centerIn: baseRec
            font.pixelSize: 22
        }
        Text {
            text:ha
            font.pixelSize: 18
            anchors {
                right: parent.right
                rightMargin: 10
                bottom: parent.bottom
                bottomMargin: 10
            }
        }
    }
}

Model.qml

Untuk latihan pertama ini, model berisi data yang disediakan oleh ListModel sederhana.

import QtQuick 2.0

ListModel{
ListElement {
    nama: "Apel Batu"
    wa: "limegreen"
    ha: 2000
}
ListElement {
    nama: "Jeruk"
    wa: "orange"
    ha: 1000
}
ListElement {
    nama: "Pisang"
    wa: "yellow"
    ha: 1000
}
}

Jalankan perintah qmlscene Utama.qml untuk run aplikasi. Versi minimal Qt framework yang digunakan adalah 5.0, karena deklarasi impornya adalah import QtQuick 2.0.

Penampakannya seperti berikut:

qt qml app
Tampilan aplikasi QML

diambil dari tutorial di: http://www.youtube.com/watch?v=0tRdb6DGYBw dengan perubahan seperlunya

Advertisements

Published by

Badwi

A Muslim, sober, a Javanese

4 thoughts on “Qt QML Model, View & Delegate”

Share your idea here (markdown enabled)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s