**Pendahuluan**
Dalam pengembangan antarmuka pengguna (GUI), pengaturan tata letak yang baik sangat penting untuk meningkatkan pengalaman pengguna. PyQt5 menyediakan **QHBoxLayout**, sebuah layout manager yang mengatur widget secara horizontal (kiri ke kanan). Artikel ini akan membimbing Anda membuat aplikasi sederhana dengan 4 tombol yang disusun secara horizontal menggunakan QHBoxLayout. Cocok untuk pemula yang ingin memahami dasar tata letak di PyQt5!
---
### **Struktur Proyek**
Proyek terdiri dari 2 file:
1. **`main.py`** - File utama untuk menjalankan aplikasi
2. **`MainForm.py`** - File yang berisi logika GUI
---
### **File main.py**
```python
#!/usr/bin/python3
#########################################################
# Nama file: main.py
#########################################################
import sys
from PyQt5.QtWidgets import QApplication
from MainForm import *
if __name__ == '__main__':
app = QApplication(sys.argv) # Membuat instance aplikasi
window = MainForm() # Membuat objek form
window.show() # Menampilkan window
app.exec_() # Memulai event loop
```
**Penjelasan Kode:**
1. **`QApplication`**: Inti dari aplikasi PyQt5 yang mengelola event loop
2. **`MainForm()`**: Kelas kustom yang mewarisi QWidget (didefinisikan di MainForm.py)
3. **`app.exec_()`**: Menjaga aplikasi tetap berjalan sampai ditutup
---
### **File MainForm.py**
```python
#########################################################
# Nama file: MainForm.py
#########################################################
from PyQt5.QtWidgets import QWidget, QPushButton, QHBoxLayout
class MainForm(QWidget):
def __init__(self):
super().__init__() # Memanggil konstruktor parent class
self.setupUI() # Memanggil metode setup UI
def setupUI(self):
# Konfigurasi window utama
self.setGeometry(300, 300, 300, 100) # x, y, width, height
self.setWindowTitle('Layout Horizontal')
# Membuat tombol
self.button1 = QPushButton('Tombol 1')
self.button2 = QPushButton('Tombol 2')
self.button3 = QPushButton('Tombol 3')
self.button4 = QPushButton('Tombol 4')
# Membuat layout horizontal
layout = QHBoxLayout()
layout.addWidget(self.button1) # Tambahkan tombol ke layout
layout.addWidget(self.button2)
layout.addWidget(self.button3)
layout.addWidget(self.button4)
self.setLayout(layout) # Terapkan layout ke window
```
**Penjelasan Kode:**
1. **`QHBoxLayout`**: Mengatur widget dalam satu baris horizontal
2. **`addWidget()`**: Menambahkan widget ke layout secara berurutan
3. **`setGeometry()`**: Mengatur posisi dan ukuran window (x, y, width, height)
**Hasil Tampilan:**
```
[Tombol 1] [Tombol 2] [Tombol 3] [Tombol 4]
```
---
### **Fitur Utama QHBoxLayout**
1. **Penataan Otomatis**: Widget diatur rata kiri-kanan secara otomatis
2. **Responsif**: Layout menyesuaikan ukuran saat window di-resize
3. **Spacing Control**: Bisa ditambahkan jarak antar widget
```python
layout.setSpacing(10) # Jarak 10px antar tombol
```
4. **Stretching**: Memungkinkan widget mengisi ruang kosong
```python
layout.addStretch() # Tambahkan stretchable space
```
---
### **Cara Menjalankan Aplikasi**
1. Instal PyQt5:
```bash
pip install pyqt5
```
2. Simpan kedua file dalam folder yang sama
3. Jalankan via terminal:
```bash
python main.py
```
---
### **Customisasi Layout**
Contoh modifikasi untuk hasil lebih profesional:
**1. Tambahkan Margin**
```python
layout.setContentsMargins(20, 10, 20, 10) # kiri, atas, kanan, bawah
```
**2. Kombinasi dengan Layout Lain**
```python
vertical_layout = QVBoxLayout()
vertical_layout.addLayout(horizontal_layout) # Gabung dengan layout vertikal
```
**3. Atur Ukuran Tombol**
```python
self.button1.setFixedSize(80, 30) # width, height
```
---
### **Tips untuk Pemula**
1. **Urutan Penting**: Widget ditambahkan sesuai urutan kode
2. **Overflow Handling**: Jika terlalu banyak widget, layout akan "meluber" keluar window
3. **Debugging**: Gunakan `print(layout.count())` untuk cek jumlah widget dalam layout
---
### **Kesimpulan**
QHBoxLayout adalah alat fundamental untuk membuat tata letak horizontal yang rapi dalam PyQt5. Dengan memahami konsep ini, Anda bisa:
✅ Membuat toolbar sederhana
✅ Menyusun deretan kontrol input
✅ Mengatur menu horizontal
Coba eksperimen dengan menambahkan jenis widget lain (seperti QLabel atau QCheckBox) ke dalam layout!
**💡 Tantangan:** Modifikasi kode untuk membuat layout yang berisi 3 tombol di kiri dan 1 tombol di kanan!
---
**Bacaan Lanjutan:**
- [Dokumentasi Resmi QHBoxLayout](https://doc.qt.io/qt-5/qhboxlayout.html)
- [Tutorial Layout Management PyQt5](https://www.pythonguis.com/tutorials/pyqt-layouts/)
Komentar
Posting Komentar