Pemrograman Qt 8 – QVBoxLayout, QHBoxLayout, QGridLayout dan Sifat-Sifatnya


Bismillahirrahmanirrahim.

qt-creator-logoKelebihan pemrograman visual adalah adanya layout yang secara otomatis akan mengatur penataan apa pun objek yang kita tuliskan di jendela. Pendek kata, kita tidak perlu lagi mengatur ukuran matematis (X,Y) dari setiap objek GUI satu per satu karena sudah diotomatisasi oleh layout. Di Java SWING, saya menemukan FreeLayout, GridLayout, BoxLayout, AbsoluteLayout, dan lain-lain. Di Qt Framework ini, saya menemukan QVBoxLayout, QHBoxLayout, QGridLayout, QFormLayout, dan lain-lain pula. Saya akan membahas 3 layout Qt yang sudah saya gunakan dalam latihan-latihan saya kemarin dan ini bisa Anda pakai dalam program apa pun. Penting, bisa diletakkan lebih dari 1 jenis layout dalam 1 jendela. Semoga bermanfaat untuk Anda.

Manfaat Nyata Layout

Misalkan Anda ingin membuat program dengan empat tombol berjajar ke samping seperti gambar ini:

ngite-kedelapan

maka tidak perlulah Anda menulis kode peletakan x sekian y sekian untuk masing-masing tombol dan sampai berjam-jam memosisikan ukurannya biar simetris seperti gambar. Tidak perlu. Cukup buat objek layout horizontal lalu masukkan kode tombol-tombol ke dalam layout itu. Otomatis si layout horizontal akan mengatur tombol-tombol Anda berjajar ke samping. Setiap Anda masukkan satu tombol ke dalam layout, ia akan diletakkan persis di sebelah kanan tombol sebelumnya. Otomatis. Begitu pula dengan kebutuhan penataan tombol yang vertikal, atau kebutuhan penataan yang seperti keramik-keramik lantai (grid), atau malah ingin bebas menentukan ukuran secara manual semuanya, juga bisa. Gambar ini contoh program yang memakai layout vertikal:

ngite-kedelapan1

Nah, sangat praktis, bukan? Layout di Qt (maupun di framework lain) itu berguna sekali. Dan apakah hanya untuk tombol? Tentu tidak. Seluruh objek GUI (QWidget) seperti QComboBox akan diperlakukan sama seperti tombol. Maka jadi makin praktislah memrogram GUI dengan layout di Qt. Pasti lebih praktis.

Ke Mana Arah Tulisan Ini?

Kita akan latihan saja kali ini. Pokoknya kita akan:

  1. memilih dan membuat layout
  2. memasang tombol ke dalam layout
  3. melihat hasilnya secara normal dan maximized
  4. memodifikasi ukuran-ukuran yang tersedia pada layout
  5. menggabung 3 jenis layout dalam 1 jendela

Satu :: Menggunakan Layout Horizontal

Ini dilakukan dengan kelas QHBoxLayout. Kita akan membuat program seperti gambar pertama di atas.

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

Dialog::Dialog()
{
    QHBoxLayout *layoututama       =       new     QHBoxLayout;
    QPushButton *tombolsatu        =       new     QPushButton("SATU");
    QPushButton *tomboldua         =       new     QPushButton("DUA");
    QPushButton *tomboltiga        =       new     QPushButton("TIGA");
    QPushButton *tombolempat       =       new     QPushButton("EMPAT");

    tombolsatu->setFixedSize(55,55);
    tomboldua->setFixedSize(55,55);
    tomboltiga->setFixedSize(55,55);
    tombolempat->setFixedSize(55,55);

    layoututama->addWidget(tombolsatu);
    layoututama->addWidget(tomboldua);
    layoututama->addWidget(tomboltiga);
    layoututama->addWidget(tombolempat);

    setLayout(layoututama);

}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include

class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog();

private:

};

#endif // MAINWINDOW_H

Qt Creator dalam Kode

ngite-kedelapan3

Hasil Layout Horizontal

ngite-kedelapan

Maximized

ngite-kedelapan4

Perhatikan, tombol-tombol itu jadi renggang dan otomatis centered ketika jendela maximized. Ini sifat QHBoxLayout yang pertama.

Dua :: Menggunakan Layout Vertikal

Ini dilakukan dengan kelas QVBoxLayout. Kita akan membuat program seperti gambar dua.

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

Dialog::Dialog()
{
    QVBoxLayout *layoututama       =       new     QVBoxLayout;
    QPushButton *tombolsatu        =       new     QPushButton("SATU");
    QPushButton *tomboldua         =       new     QPushButton("DUA");
    QPushButton *tomboltiga        =       new     QPushButton("TIGA");
    QPushButton *tombolempat       =       new     QPushButton("EMPAT");

    tombolsatu->setFixedSize(55,55);
    tomboldua->setFixedSize(55,55);
    tomboltiga->setFixedSize(55,55);
    tombolempat->setFixedSize(55,55);

    layoututama->addWidget(tombolsatu);
    layoututama->addWidget(tomboldua);
    layoututama->addWidget(tomboltiga);
    layoututama->addWidget(tombolempat);

    setLayout(layoututama);

}

mainwindow.h

Sama dengan yang horizontal.

Qt Creator dalam Kode

Sama saja dengan yang horizontal, bedanya cuma pemakaian QVBoxLayout di sini.

Hasil Layout Vertikal

ngite-kedelapan1

Maximized

ngite-kedelapan5

Perhatikan, tombol-tombol itu jadi renggang, centered on Y axis, dan align left ketika jendela maximized. Align left ini ciri dari QVBoxLayout yang default.

Tiga :: Menggunakan Grid Layout

Grid Layout di Qt Framework adalah jalan kebebasan yang sangat praktis untuk membangun GUI yang semau gue. Ini jenis layout paling fleksibel yang dapat Anda pergunakan untuk aplikasi yang kompleks. Ini dilakukan dengan menggunakan kelas QGridLayout. Kita akan buat seperti gambar ini:

ngite-kedelapan2

mainwindow.cpp

Sama saja dengan di atas, hanya ganti QVBoxLayout dengan QGridLayout.

mainwindow.h

Sama juga dengan header sebelumnya.

Hasil Grid Layout

ngite-kedelapan2

Sekilas mirip QVBoxLayout karena default sudah vertikal. Ini belum kelihatan manfaat aslinya  QGridLayout.

Maximize

ngite-kedelapan6

Perhatikan, sekilas memang mirip QVBoxLayout walau sudah maximized. Bedanya, ia di center in Y dan center in X. Sedangkan QVBoxLayout default-nya cuma center in X.

Modifikasi Terhadap QHBoxLayout, QVBoxLayout, dan QGridLayout

Sampai saatnya bagian terpenting yakni modifikasi. Ini tujuannya untuk mengetahui sifat-sifat dari kelas layout yang bersangkutan. Jika tidak dimodifikasi, kita tahunya hanya begitu doang QHBoxLayout, QVBoxLayout, dan QGridLayout. Padahal ada seabreg kemampuan dari layout tersebut yang bisa jadi sangat kita perlukan tapi kita tidak tahu.

QHBoxLayout

ngite-kedelapan3

Sifatnya memanjang ke samping secara simetris kalau di-maximize, tidak memanjang ke atas

//mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"

Dialog::Dialog()
{
    QHBoxLayout *layoututama       =       new     QHBoxLayout;
    QPushButton *tombolsatu        =       new     QPushButton("SATU");
    QPushButton *tomboldua         =       new     QPushButton("DUA");
    QPushButton *tomboltiga        =       new     QPushButton("TIGA");
    QPushButton *tombolempat       =       new     QPushButton("EMPAT");

    tombolsatu->setMinimumSize(55,55);
    tomboldua->setMinimumSize(55,55);
    tomboltiga->setMinimumSize(55,55);
    tombolempat->setMinimumSize(55,55);

    layoututama->addWidget(tombolsatu);
    layoututama->addWidget(tomboldua);
    layoututama->addWidget(tomboltiga);
    layoututama->addWidget(tombolempat);

    setLayout(layoututama);
}
ngite-kedelapan4

Sifatnya memanjang ke samping dan ke atas simetris kalau di-maximize, mirip bagian modem di Otodidak

//mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"

Dialog::Dialog()
{
    QHBoxLayout *layoututama       =       new     QHBoxLayout;
    QPushButton *tombolsatu        =       new     QPushButton("SATU");
    QPushButton *tomboldua         =       new     QPushButton("DUA");
    QPushButton *tomboltiga        =       new     QPushButton("TIGA");
    QPushButton *tombolempat       =       new     QPushButton("EMPAT");

    tombolsatu->setMinimumSize(55,55);
    tomboldua->setMinimumSize(55,55);
    tomboltiga->setMinimumSize(55,55);
    tombolempat->setMinimumSize(55,55);

    tombolsatu->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tomboldua->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tomboltiga->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tombolempat->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

    layoututama->addWidget(tombolsatu);
    layoututama->addWidget(tomboldua);
    layoututama->addWidget(tomboltiga);
    layoututama->addWidget(tombolempat);

    setLayout(layoututama);
}

Penjelasan Kode QHBoxLayout

  1. Saya ganti fungsi setFixedSize dengan setMinimumSize sehingga ketika jendela di-maximize, si tombol ikut membesar mengikuti ukuran jendela.
  2. Saya tambahkan fungsi setSizePolicy pada masing-masing tombol sehingga bisa expanding ke atas juga mengikuti besarnya ukuran jendela.

QVBoxLayout

ngite-kedelapan5

ngite-kedelapan7

Memanjang ke samping tetapi tidak ke atas sekaligus ketika di-maximize

 

//mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"

Dialog::Dialog()
{
    QVBoxLayout *layoututama       =       new     QVBoxLayout;
    QPushButton *tombolsatu        =       new     QPushButton("SATU");
    QPushButton *tomboldua         =       new     QPushButton("DUA");
    QPushButton *tomboltiga        =       new     QPushButton("TIGA");
    QPushButton *tombolempat       =       new     QPushButton("EMPAT");

    tombolsatu->setMinimumSize(55,55);
    tomboldua->setMinimumSize(55,55);
    tomboltiga->setMinimumSize(55,55);
    tombolempat->setMinimumSize(55,55);

    layoututama->addWidget(tombolsatu);
    layoututama->addWidget(tomboldua);
    layoututama->addWidget(tomboltiga);
    layoututama->addWidget(tombolempat);

    setLayout(layoututama);
}

ngite-kedelapan8

ngite-kedelapan9

//mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"

Dialog::Dialog()
{
    QVBoxLayout *layoututama       =       new     QVBoxLayout;
    QPushButton *tombolsatu        =       new     QPushButton("SATU");
    QPushButton *tomboldua         =       new     QPushButton("DUA");
    QPushButton *tomboltiga        =       new     QPushButton("TIGA");
    QPushButton *tombolempat       =       new     QPushButton("EMPAT");

    tombolsatu->setMinimumSize(55,55);
    tomboldua->setMinimumSize(55,55);
    tomboltiga->setMinimumSize(55,55);
    tombolempat->setMinimumSize(55,55);

    tombolsatu->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tomboldua->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tomboltiga->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tombolempat->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

    layoututama->addWidget(tombolsatu);
    layoututama->addWidget(tomboldua);
    layoututama->addWidget(tomboltiga);
    layoututama->addWidget(tombolempat);

    setLayout(layoututama);
}

Penjelasan QVBoxLayout

  1. Saya ganti fungsi setFixedSize dengan setMinimumSize sehingga ketika jendela di-maximize, si tombol ikut membesar mengikuti ukuran jendela.
  2. Saya tambahkan fungsi setSizePolicy pada masing-masing tombol sehingga bisa expanding ke atas juga mengikuti besarnya ukuran jendela.

QGridLayout

ngite-kedelapan6

Maximize

ngite-kedelapan7Perhatikan, inilah sisi kekuatan QGridLayout. Kita bisa mengatur tombol-tombol sehingga membentuk kolom dan baris. Perhatikan juga sifatnya kalau di-maximize.

Kode QGridLayout

</pre>
#include "mainwindow.h"
#include "ui_mainwindow.h"

Dialog::Dialog()
{
 QGridLayout *layoututama = new QGridLayout;
 QPushButton *tombolsatu = new QPushButton("SATU");
 QPushButton *tomboldua = new QPushButton("DUA");
 QPushButton *tomboltiga = new QPushButton("TIGA");
 QPushButton *tombolempat = new QPushButton("EMPAT");
 QPushButton *tombollima = new QPushButton("LIMA");
 QPushButton *tombolenam = new QPushButton("ENAM");
 QPushButton *tomboltujuh = new QPushButton("TUJUH");
 QPushButton *tomboldelapan = new QPushButton("DELAPAN");

//ukuran tombol

tombolsatu->setFixedSize(55,55);
 tomboldua->setFixedSize(55,55);
 tomboltiga->setFixedSize(55,55);
 tombolempat->setFixedSize(55,55);

tombollima->setFixedSize(55,55);
 tombolenam->setFixedSize(55,55);
 tomboltujuh->setFixedSize(55,55);
 tomboldelapan->setFixedSize(55,55);

//mengatur peletakan di grid

layoututama->addWidget(tombolsatu);
 layoututama->addWidget(tomboldua);
 layoututama->addWidget(tomboltiga);
 layoututama->addWidget(tombolempat);

layoututama->addWidget(tombollima, 0, 1);
 layoututama->addWidget(tombolenam, 1, 1);
 layoututama->addWidget(tomboltujuh, 2, 1);
 layoututama->addWidget(tomboldelapan, 3, 1);

//pengaturan untuk penataan

layoututama->setAlignment(tombolsatu, Qt::AlignLeft);
 layoututama->setAlignment(tomboldua, Qt::AlignLeft);
 layoututama->setAlignment(tomboltiga, Qt::AlignLeft);
 layoututama->setAlignment(tombolempat, Qt::AlignLeft);

layoututama->setAlignment(tombollima, Qt::AlignLeft);
 layoututama->setAlignment(tombolenam, Qt::AlignLeft);
 layoututama->setAlignment(tomboltujuh, Qt::AlignLeft);
 layoututama->setAlignment(tomboldelapan, Qt::AlignLeft);

setLayout(layoututama);

}

Kode paling pentingnya: 


//mengatur peletakan di grid

layoututama->addWidget(tombolsatu);
 layoututama->addWidget(tomboldua);
 layoututama->addWidget(tomboltiga);
 layoututama->addWidget(tombolempat);

layoututama->addWidget(tombollima, 0, 1);
 layoututama->addWidget(tombolenam, 1, 1);
 layoututama->addWidget(tomboltujuh, 2, 1);
 layoututama->addWidget(tomboldelapan, 3, 1);

Qt Creator dalam Kode

ngite-kedelapan8

Penjelasan Kode

Yang perlu diperhatikan, QGridLayout itu punya fungsi addWidget yang berbeda bentuk dari addWidget pada kelas-kelas yang lain. Mengapa bisa berbeda? Ya karena sifat QGridLayout itu sendiri yang membuat penataan tombol kita (nantinya tidak cuma tombol) bisa membentuk kolom-kolom dan baris-baris. Seperti ini bentuk khususnya:

ngite-kedelapan11

Jadi, dengan QGridLayout, kita mengatur objek-objek GUI kita (tombol) berdasarkan kolom dan baris. Bisa dikata, posisi x dan y. Oleh karena itu, kode saya di atas yang berbunyi:

    layoututama->addWidget(tombollima, 0, 1);
    layoututama->addWidget(tombolenam, 1, 1);
    layoututama->addWidget(tomboltujuh, 2, 1);
    layoututama->addWidget(tomboldelapan, 3, 1);

maksudnya:

  1. letakkanlah objek tombollima pada baris ke-0 kolom ke-1
  2. letakkan objek tombolenam, pada baris ke-1 kolom ke-1, dan seterusnya.

Rangkuman

  1. QGridLayout adalah layout paling fleksibel yang bisa kita gunakan untuk membuat antarmuka sebebas mungkin.
  2. Untuk membuat tombol bisa membesar mengikuti ukuran jendela, bisa digunakan setSizePolicy dengan parameter QSizePolicy::Expanding pada kedua tempatnya.

One thought on “Pemrograman Qt 8 – QVBoxLayout, QHBoxLayout, QGridLayout dan Sifat-Sifatnya

  1. Ping balik: Kumpulan Ebook Tutorial & Source Code Pemrograman C++ dengan Qt Framework Edisi 1 – 11 | Ade Malsasa Akbar

Dilarang menggunakan emotikon

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s