UNESA
s1-pmat@unesa.ac.id

Styling Widget Tkinter: Mengubah Font, Warna, dan Tampilan

Styling Widget Tkinter: Mengubah Font, Warna, dan Tampilan

- kategori Serba-serbi 414 Views

Sebuah aplikasi yang fungsional adalah sebuah pencapaian, tetapi aplikasi yang fungsional sekaligus menarik secara visual akan memberikan pengalaman pengguna yang jauh lebih baik. Setelah kita belajar cara membuat dan menempatkan widget, kini saatnya kita bertindak sebagai "desainer interior" untuk aplikasi kita.

Tkinter menyediakan berbagai opsi untuk mengubah tampilan (styling) dari hampir semua widget. Dengan beberapa penyesuaian sederhana pada warna, font, dan border, Anda bisa mengubah aplikasi standar menjadi sesuatu yang terlihat lebih profesional dan unik.

Opsi Styling Paling Umum 🎨

Berikut adalah beberapa properti (opsi) styling yang paling sering digunakan dan berlaku untuk banyak widget:

  • fg atau foreground: Mengatur warna teks.
  • bg atau background: Mengatur warna latar belakang widget.
  • font: Mengatur jenis, ukuran, dan gaya font. Biasanya diisi dengan sebuah tuple, contoh: ("Arial", 14, "bold").
  • width dan height: Mengatur ukuran widget. (Catatan: untuk widget berbasis teks, satuannya adalah karakter, bukan piksel).
  • borderwidth atau bd: Mengatur ketebalan garis tepi (border).
  • relief: Mengatur gaya border, seperti tk.RAISED (terangkat), tk.SUNKEN (tenggelam), tk.GROOVE (beralur), atau tk.FLAT (datar).

Dua Cara Menerapkan Style

Anda bisa menerapkan opsi-opsi di atas dengan dua cara utama:

  1. Saat Inisialisasi Widget: Anda bisa langsung memasukkan opsi styling saat pertama kali membuat widget. Ini adalah cara yang paling umum.
  2. Menggunakan Metode .config(): Anda juga bisa mengubah tampilan widget kapan saja setelah ia dibuat. Ini sangat berguna untuk membuat aplikasi yang dinamis, misalnya mengubah warna tombol saat diklik. 
import tkinter as tk

def ubah_warna():
    # Menggunakan .config() untuk mengubah style saat fungsi dipanggil
    label_salam.config(fg="red", text="Warnanya berubah!")

jendela = tk.Tk()
jendela.title("Contoh Styling")

# Cara 1: Style saat inisialisasi
label_salam = tk.Label(
    jendela,
    text="Halo Dunia!",
    fg="blue", # Warna teks
    bg="#e0e0e0", # Warna latar (abu-abu muda)
    font=("Helvetica", 18, "bold italic"),
    padx=20, pady=20
)
label_salam.pack(pady=10)

# Tombol yang akan memanggil fungsi untuk mengubah style label
tombol = tk.Button(jendela, text="Ubah Warna Teks", command=ubah_warna)
tombol.pack(pady=10)

jendela.mainloop()

Studi Kasus: Mendesain Form Login Sederhana

Mari kita gabungkan beberapa opsi styling untuk membuat form login mini yang terlihat lebih menarik daripada tampilan standar.

jendela = tk.Tk()
jendela.title("Form Login")
jendela.config(bg="#f0f0f0") # Warna latar jendela

# Membuat frame untuk mengelompokkan widget
main_frame = tk.Frame(jendela, bg="#f0f0f0", padx=20, pady=20)
main_frame.pack()

# Judul
label_judul = tk.Label(main_frame, text="Silakan Login", font=("Arial", 16, "bold"), bg="#f0f0f0")
label_judul.grid(row=0, column=0, columnspan=2, pady=10)

# Username
label_user = tk.Label(main_frame, text="Username:", font=("Arial", 12), bg="#f0f0f0")
label_user.grid(row=1, column=0, sticky=tk.W)
entry_user = tk.Entry(main_frame, font=("Arial", 12), width=20, bd=2, relief=tk.SUNKEN)
entry_user.grid(row=1, column=1, pady=5)

# Password
label_pass = tk.Label(main_frame, text="Password:", font=("Arial", 12), bg="#f0f0f0")
label_pass.grid(row=2, column=0, sticky=tk.W)
entry_pass = tk.Entry(main_frame, font=("Arial", 12), width=20, show="*", bd=2, relief=tk.SUNKEN)
entry_pass.grid(row=2, column=1, pady=5)

# Tombol Login dengan style
tombol_login = tk.Button(
    main_frame, 
    text="Login", 
    font=("Arial", 12, "bold"),
    fg="white",
    bg="#007BFF", # Biru
    relief=tk.RAISED,
    bd=3
)
tombol_login.grid(row=3, column=0, columnspan=2, pady=20)

jendela.mainloop()

Kesimpulan

Styling adalah bagian yang penting dalam pengembangan GUI untuk menciptakan aplikasi yang tidak hanya bekerja dengan baik, tetapi juga terasa menyenangkan untuk digunakan. Dengan memanfaatkan opsi-opsi seperti fg, bg, font, dan relief, Anda dapat memberikan sentuhan personal dan profesional pada aplikasi Tkinter Anda. Jangan ragu untuk bereksperimen dengan berbagai kombinasi untuk menemukan tampilan yang paling sesuai dengan proyek Anda.

Scroll to Top