Kalau pada artikel sebelumnya kita sudah membahas posisi column dan row pada Qt, maka kita akan membahas posisi Grid. Posisi Grid ini mirip seperti tabel yang memuat columns dan rows.

Untuk mencobanya berikut langkah-langkahnya

  1. Silahkan mengedit project yang ada di http://www.proweb.co.id/articles/mobile_development/row_qt.html .
    Edit main.qml menjadi seperti berikut ini:
    import QtQuick 2.4
    import QtQuick.Window 2.2
    Window {
        visible: true
        Grid {
            rows: 2
            columns: 2
            spacing: 10

            Image {
                source: “../pic/pesawat1.jpg”
            }

            Rectangle {
                    y: 30
                    width: 100; height: 100
                    color: “blue”
            }

            Text {
                    text:”Pesawatku”
            }

            Text {
                    text:”Kotak biru”
            }
        }
    }

  2. Jika kita Run maka hasilnya seperti gambar di bawah ini:

Informasi lebih lanjut silahkan mengunjungi:
1. http://doc.qt.io/qt-5/qml-qtquick-grid.html .
2. http://qmlbook.github.io/en/ch04/index.html#positioning-elements .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

Posisi Grid pada Qt