Arsip Tag: qvboxlayout

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.

Pemrograman Qt 3 – Mendayagunakan QFrame dan QVBoxLayout untuk Membentuk Kolom Lebih Banyak dalam QDialog


Bismillahirrahmanirrahim.

Kalau kemarin kita ngite dengan QGroupBox dan QHBoxLayout, sekarang kita akan mencoba QFrame sebagai ganti QGroupBox baik sebagai kontainer maupun pembuat spasi. Ide dasar program ketiga ini adalah spasi kosong untuk setiap grup widget yang kita buat di dalam QDialog. Oh iya, sampai hari ini kita hanya akan berkutat dengan QDialog tanpa menyentuh QMainWindow. Tentulah, semua hard coding ini tujuannya membuat aplikasi GUI di Linux. Semoga bermanfaat untuk kaum muslimin semuanya.

Wujud Program yang Diinginkan

ngite-kedua9

Daftar Kelas Qt yang Dipakai

  1. QDialog = dipakai untuk membuat jendela tertinggi
  2. QVBoxLayout = dipakai untuk membuat kontainer yang menampung setiap blok/grup dari tombol
  3. QGridLayout = dipakai untuk membuat kontainer paling besar yang menampung semua objek QVBoxLayout nantinya
  4. QPushButton = dipakai untuk membuat tombol
  5. QIcon = dipakai untuk memasukkan gambar sebagi ikon tombol, QIcon dipakai sebagai passing parameter
  6. QSize = dipakai untuk membuat objek yang menyimpan ukuran, yang di program ini objek berisi ukuran tersebut diterapkan pada logo dalam tombol
  7. QFrame = dipakai untuk menggantikan QGroupBox dalam hal menampung tombol-tombol jadi satu blok/grup.

Daftar Method Qt yang Dipakai

  1. addWidget -> dipakai oleh QVBoxLayout, QGridLayout
  2. setMinimumSize -> dipakai oleh QPushButton
  3. setIconSize -> dipakai oleh QPushButton
  4. setIcon -> dipakai oleh QPushButton
  5. setLayout -> dipakai oleh QFrame dan QDialog
  6. setFixedWidth -> dipakai oleh QFrame
  7. setFrameShadow -> dipakai oleh QFrame untuk membentuk bayangan; opsi-opsinya adalah QFrame::Raised, QFrame::Sunken, dan QFrame::Plain
  8. setFrameShape -> dipakai oleh QFrame untuk membentuk wujud panel apakah itu timbul atau tenggelam; opsi-opsinya adalah QFrame::StyledPanel [dipakai oleh default-nya Qt Creator GUI Builder], QFrame::Box
  9. setColumnMinimumWidth -> dipakai oleh QGridLayout untuk menentukan ukuran setiap blok/grup dan menentukan jumlah blok/grup yang bisa dipakai
  10. setRowMinimumHeight -> dipakai oleh QGridLayout, idem
  11. setLayout -> dipakai oleh QDialog selaku kelas tertinggi untuk memasang QGridLayout ke dalam dirinya.

Peta GUI

Saya jelaskan dulu peta QFrame dalam program ini yang saya susun.

ngite-kedua9B

A = QFrame (frameKiri) dengan QVBoxLayout (layoutKontainerKiri)
B = QFrame (frameTengah)
C = QFrame (frameKanan)
D = QFrame (frameSangga)
E = QFrame (frameBawah)
F = QFrame (framePojok)

Kode Program

Sama dengan kegiatan ngite kita kemarin, hanya berkas mainwindow.cpp yang penting.

mainwindow.cpp


#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QtGui>

Dialog::Dialog()
{
    QVBoxLayout *layoutKontainerKanan  = new QVBoxLayout;
    QVBoxLayout *layoutKontainerKiri   = new QVBoxLayout;
    QVBoxLayout *layoutKontainerTengah = new QVBoxLayout;
    QVBoxLayout *layoutKontainerBawah  = new QVBoxLayout;
    QVBoxLayout *layoutKontainerPojok  = new QVBoxLayout;
    QGridLayout *layoutUtama           = new QGridLayout;

    QPushButton *tombolSatu          = new QPushButton("SATU");
    QPushButton *tombolDua           = new QPushButton("DUA");
    QPushButton *tombolTiga          = new QPushButton("TIGA");
    QPushButton *tombolEmpat         = new QPushButton("");

        layoutKontainerKanan->addWidget(tombolSatu);
        layoutKontainerKanan->addWidget(tombolDua);
        layoutKontainerKanan->addWidget(tombolTiga);
        layoutKontainerKanan->addWidget(tombolEmpat);

        QSize size(88,88);                                  //menentukan ukuran, bisa dipakai di mana-mana nanti

        tombolEmpat->setMinimumSize(100,100);               //objek size lalu dimasukkan ke dalam method setIconSize dalam tombolEmpat
        tombolEmpat->setIconSize(size);                     //nggak sangka, dasar OOP; sampai ukuran ikon pun disimpan sebagai objek
        tombolEmpat->setIcon(QIcon(":/gambar/ubuntu.png")); //logo ubuntu.png ini jadi seukuran 88x88 betulan dalam tombol [sebelumnya gagal]

    QPushButton *tombolLima          = new QPushButton("LIMA");
    QPushButton *tombolEnam          = new QPushButton("ENAM");
    QPushButton *tombolTujuh         = new QPushButton("TUJUH");
    QPushButton *tombolDelapan       = new QPushButton("DELAPAN");

        layoutKontainerKiri->addWidget(tombolLima);
        layoutKontainerKiri->addWidget(tombolEnam);
        layoutKontainerKiri->addWidget(tombolTujuh);
        layoutKontainerKiri->addWidget(tombolDelapan);

    //TOMBOL-TOMBOL DI BARISAN BAWAH
    QPushButton *tombolSembilan      = new QPushButton("SEMBILAN");

        layoutKontainerBawah->addWidget(tombolSembilan);

    QPushButton *tombolSepuluh       = new QPushButton("SEPULUH");

        layoutKontainerPojok->addWidget(tombolSepuluh);

    //FRAME-FRAME PEMUAT TOMBOL
    QFrame *frameKanan = new QFrame;
    frameKanan->setLayout(layoutKontainerKanan);

    QFrame *frameKiri  = new QFrame;
    frameKiri->setLayout(layoutKontainerKiri);

    QFrame *frameTengah = new QFrame;
    frameTengah->setFixedWidth(66);                     //berhasil mengatur ukuran lebar frame secara galak
//    frameTengah->setFrameShadow(QFrame::Raised);      //setFrameShadow dan setFrameStyle
//    frameTengah->setFrameShape(QFrame::StyledPanel);  //kalau dimatikan, maka semua shadow hilang dan hanya tampak spasi kosong
    frameTengah->setLayout(layoutKontainerTengah);      //jangan lupa masukkan layout ke dalam frame

    QFrame *frameBawah = new QFrame;
    frameBawah->setLayout(layoutKontainerBawah);

    QFrame *frameSangga = new QFrame;
    frameSangga->setFixedHeight(88);

    QFrame *framePojok  = new QFrame;
    framePojok->setFixedHeight(50);
    framePojok->setLayout(layoutKontainerPojok);

    layoutUtama->addWidget(frameKanan, 1, 3);
    layoutUtama->addWidget(frameTengah, 1, 2);
    layoutUtama->addWidget(frameKiri, 1, 1);
    layoutUtama->addWidget(frameBawah, 3, 1);
    layoutUtama->addWidget(frameSangga, 2, 1);
    layoutUtama->addWidget(framePojok, 3, 3);
    layoutUtama->setColumnMinimumWidth(3, 100);     //menentukan jumlah kolom dan lebar masing-masingnya
    layoutUtama->setRowMinimumHeight(3, 10);       //menentukan jumlah baris dan tinggi masing-masingnya
    setLayout(layoutUtama);
}

Analisis Kode Program

Sebenarnya sama saja dengan program sebelumnya. Maka akan saya jelaskan beberapa saja yang terpenting.

SATU

QFrame *frameKanan = new QFrame;
 frameKanan->setLayout(layoutKontainerKanan);

Masih seperti kemarin, itulah bentuk umum pembuatan objek dari kelas. Di sini yang disebut kelas ialah QFrame sedangkan objeknya frameKanan. Sesudah dibuat, objek dipasangi layout dengan memakai method setLayout.

DUA

frameTengah->setFixedWidth(66);

Inilah ide dasar program ketiga ini. Method setFixedWidth, sesuai namanya, berguna untuk menentukan ukuran lebar dari frameTengah. Frame yang ini posisinya ada pada baris pertama kolom kedua. Kalau bingung, lihat lagi Peta GUI di atas.

TIGA

layoutUtama->addWidget(frameKanan, 1, 3);
layoutUtama->addWidget(frameTengah, 1, 2);
layoutUtama->addWidget(frameKiri, 1, 1);
layoutUtama->addWidget(frameBawah, 3, 1);
layoutUtama->addWidget(frameSangga, 2, 1);
layoutUtama->addWidget(framePojok, 3, 3);

Perhatikan, layoutUtama sudah dibentuk dari QGridLayout, bukan layout model lainnya. Kalau dibentuk dari kelas ini, maka dia memiliki bentuk umum passing parameter ala QGridLayout juga. Dan ini spesial karena Grid Layout milik Qt itu fleksibel bisa ke samping dan ke bawah sekaligus. Misalnya saja, kode layoutUtama->addWidget(frameKanan, 1, 3); berarti maksudnya masukkan ke dalam Grid Layout bernama layoutUtama sebuah objek bernama frameKanan, pada baris 1 kolom 3. Mudah sekali, bukan? Begini bentuk umumnya:

void QGridLayout::addWidget ( QWidget * widget, int fromRow, int fromColumn, int rowSpan, int columnSpan, Qt::Alignment alignment = 0 )

Bentuk umum ini saya dapat dari dokumentasi internal Qt Creator (tekan F1). Bentuk umum yang njelimet ini, ternyata bisa diterjemahkan jadi kode saya tadi. Bagaimana memahaminya? Begini caranya:

  1. void ini berarti bentuk kode QGridLayout::addWidget dst. adalah fungsi, bukan kelas bukan yang lain. Jadi, tidak perlu dilihat nama QGridLayout-nya kalau mau menggunakan ini. Cukup lihat addWidget dst. saja. Ini artinya fungsi addWidget() di dalam kelas QGridLayout itu cara pakainya demikian. Dan memang berbeda addWidget untuk QGridLayout dengan yang untuk layout lainnya.
  2. QWidget * widget diganti dengan frameKanan
  3. int fromRow diganti dengan 1
  4. int fromColumn diganti dengan 3
  5. sisanya tidak diisi tidak apa-apa.

EMPAT

layoutUtama->setColumnMinimumWidth(3, 100);
layoutUtama->setRowMinimumHeight(3, 10);

Penjelasannya persis seperti nama method-nya. Bentuk umumnya adalah

void QGridLayout::setColumnMinimumWidth ( int column, int minSize )

yang artinya fungsi setColumnMinimumWidth ini gunanya untuk mengatur ukuran lebar minimum untuk kolom yang ditentukan. Maka, kode saya tadi maksudnya aturlah pada kolom ketiga, ukuran lebar 100 piksel.

LIMA

QSize size(88,88);
tombolEmpat->setMinimumSize(100,100);
tombolEmpat->setIconSize(size);
tombolEmpat->setIcon(QIcon(":/gambar/ubuntu.png"));

Nah, untuk kode ini, sengaja saya akhirkan penjelasannya. Pertama, dibuat sebuah objek yang menampung suatu dimensi piksel x piksel. Objek itu bernama size yang diturunkan dari kelas QSize. Ini unik, khas OOP. Segalanyaaa… objek. Bahkan sampai yang namanya dimensi pun dibuat sebagai objek. Sesudah itu, tombolEmpat diatur ukuran minimumnya lalu nah. Inilah gunanya. Dengan method milik PushButton yang bernama setIconSize, objek size tadi dimasukkan ke sini. Jadi kita tidak menuliskan setIconSize(88,88) melainkan setIconSize(size). Gunanya untuk baris berikutnya. Method setIcon gunanya untuk mengatur ikon dari tombol. Bisa ditebak, saya memang ingin membuat aplikasi yang berbasis gambar lagi. Begitu gambar dimasukkan, karena tadi sudah diatur dengan setIconSize, maka otomatis nanti kalau dijalankan programnya, ikon yang ditentukan di sini pasti berukuran 88 x 88. Mudah dipahami, bukan? Yang unik dari method terakhir ini adalah setIcon(QIcon(“”));. Perhatikan, ada method di dalam method. Dan di sini dipakailah kelas QIcon. Saya sendiri tidak seberapa paham mengapa harus begini (tetapi saya mengerti juga buat apa?) yang penting bisa masuk gambarnya. Perhatikan lagi, :/gambar/ubuntu.png itu adalah aturan Qt Creator dalam mengimpor gambar. Lihat tulisan pertama saya soal Qt bila belum mengerti soal impor gambar.

ENAM

frameTengah->setFrameShadow(QFrame::Raised);
frameTengah->setFrameShape(QFrame::StyledPanel);

ngite-kedua12

Khusus untuk baris ke-58 kode, saya jadikan komentar. Seandainya diaktifkan, maka nanti frameTengah akan kelihatan border-nya. Bentuk border yang seperti ini keren, tetapi saya tidak inginkan dalam program kali ini. Mungkin nanti pas perlu baru dipakai. Yang penting, perhatikan passing parameter-nya. QFrame::Raised untuk setFrameShadow dan QFrame::StyledPanel untuk setFrameShape. Begitu cara menulis passing parameter-nya. Anda bisa mencarinya dalam dokumentasi internal Qt Creator untuk jenis shadow dan jenis framestyle lainnya.

Hasil Akhir

Ini hasil yang saya inginkan, yakni ada spasi kosong antargrup. Sebagai bonus, kita berhasil membuat tombol dengan gambar sekaligus mengatur sekehendak kita ukurannya.

ngite-kedua9

Bandingkan dengan program kemarin yang masih kelihatan spasi antargrupnya:

ngite-kedua11

Rangkuman

  1. Grid Layout adalah yang paling bebas yang bisa dipakai untuk meletakkan objek-objek GUI ke samping dan ke bawah.
  2. Untuk mengatur ukuran gambar dalam tombol, kita bisa gunakan QSize untuk menampung ukuran dan memasukkannya ke dalam passing parameter dalam method setIconSize.