สร้าง GUI สุดโมเดิร์นด้วย customtkinter

หลายคนที่ใช้ Python ในการเขียนโปรแกรมอยู่แล้วไม่ว่าจะเป็นสาย Data, AI หรือการเขียนโปรแกรมแบบปกติ แล้วต้องการมีหน้าต่างหน้าตาการใช้งานในรูปแบบของ Desktop Application

แต่ตอนที่เราเรียนเนี่ย ส่วนใหญ่ก็จะสอนสร้างด้วยไลบรารีชื่อว่า tkinter กัน ซึ่งมันก็ใช้ได้ แต่ปัญหาคือหน้าตามันดูโบราณไปหน่อย วันนี้แอดขอแนะนำไลบรารีที่ทำให้ GUI เราไปได้สุดไปได้สวยขึ้นนั่นก็คือ customtkinter

โดย GUI หน้าตาแบบในภาพนี้เป็นการสร้างขึ้นมาจาก Python และ customtkinter เลย ด้านในเขียนคล้าย ๆ tkinter แต่เปลี่ยนวิธีการเรียกมาใช้ customtkinter แทน โดยตัวนี้จะมีของที่ต้องใช้ให้ครบไม่ว่าจะเป็น ปุ่ม, กล่องข้อความ, Tab, Switch ฯลฯ ให้ดู โมเดิร์น เรียบหรู และมี Dark Mode ด้วยนะ

ขั้นตอนการใช้งาน ให้เราเริ่มจากติดตั้งไลบรารีก่อน

pip install customtkinter

pip install customtkinter

หลังจากนั้นเราทำการสร้างไฟล์ และเขียนโค้ดตามตัวอย่างได้เลย เริ่มจากการ import customtkinter เข้ามาใช้งานก่อน กำหนดหน้าต่างหลักที่จะให้มันแสดงขึ้นมา กำหนดชื่อ กำหนดขนาด แล้วใส่ของหรือที่เรียกว่า widget ลงไป

เพียงเท่านี้เราก็จะได้หน้า GUI ที่สวยทันสมัยขึ้นแล้ว โดย Widget ที่ใช้บ่อย ๆ จะมีดังนี้

CTkLabel: ป้ายข้อความ

CTkEntry: กล่องกรอกข้อมูล

CTkButton: ปุ่มกดแบบ Flat UI

CTkFrame: กล่องรวม Widget อื่น ๆ

สามารภเลือกดูวิธีการใช้ Widget ต่าง ๆ ที่เราต้องการได้ที่ https://customtkinter.tomschimansky.com/documentation/widgets

ต่อมาเรามาลองเอา customtkinter มาทำแอปแบบง่าย ๆ อย่าง To Do List กัน

โดยจากโค้ดนี้เราจะสามารถเลือกได้ว่าจะใช้ Light Mode หรือ Dark Mode เลือกธีมของ UI ที่จะใช้ กำหนดของหน้าต่างหลักตามด้านบน สร้างฟังก์ชันที่เกี่ยวข้อง และกำหนดการแสดงผลในหน้า UI ได้ โดยตัวอย่างแอดใช้เป็นแบบ pack แต่เราสามารถใช้พวก grid และ place ได้ด้วย

import customtkinter as ctk

# ตั้งค่า UI
ctk.set_appearance_mode("dark")  # ใช้โหมดมืด
ctk.set_default_color_theme("blue") # ใช้ธีมสีฟ้า

# สร้างหน้าต่างหลัก
app = ctk.CTk()
app.title("Daily Task App")
app.geometry("400x500")

# กล่องเก็บ Task
tasks = []

# ฟังก์ชันเพิ่ม Task
def add_task():
    task = entry.get()
    if task:
        tasks.append(task)
        update_listbox()
        entry.delete(0, 'end')

# ฟังก์ชันอัปเดต List
def update_listbox():
    task_listbox.configure(state='normal')
    task_listbox.delete("1.0", "end")
    for i, task in enumerate(tasks, start=1):
        task_listbox.insert("end", f"{i}. {task}\n")
    task_listbox.configure(state='disabled')

# สร้าง Input
entry = ctk.CTkEntry(app, placeholder_text="พิมพ์ Task ที่นี่...")
entry.pack(pady=10, padx=20, fill='x')

# สร้างปุ่มเพิ่ม
add_button = ctk.CTkButton(app, text="เพิ่ม Task", command=add_task)
add_button.pack(pady=5)

# สร้างกล่องแสดง Task
task_listbox = ctk.CTkTextbox(app, height=350, state='disabled')
task_listbox.pack(pady=10, padx=20, fill='both', expand=True)

# เริ่มโปรแกรม
app.mainloop()

import customtkinter as ctk

# ตั้งค่า UI
ctk.set_appearance_mode("dark")  # ใช้โหมดมืด
ctk.set_default_color_theme("blue") # ใช้ธีมสีฟ้า

# สร้างหน้าต่างหลัก
app = ctk.CTk()
app.title("Daily Task App")
app.geometry("400x500")

# กล่องเก็บ Task
tasks = []

# ฟังก์ชันเพิ่ม Task
def add_task():
    task = entry.get()
    if task:
        tasks.append(task)
        update_listbox()
        entry.delete(0, 'end')

# ฟังก์ชันอัปเดต List
def update_listbox():
    task_listbox.configure(state='normal')
    task_listbox.delete("1.0", "end")
    for i, task in enumerate(tasks, start=1):
        task_listbox.insert("end", f"{i}. {task}\n")
    task_listbox.configure(state='disabled')

# สร้าง Input
entry = ctk.CTkEntry(app, placeholder_text="พิมพ์ Task ที่นี่...")
entry.pack(pady=10, padx=20, fill='x')

# สร้างปุ่มเพิ่ม
add_button = ctk.CTkButton(app, text="เพิ่ม Task", command=add_task)
add_button.pack(pady=5)

# สร้างกล่องแสดง Task
task_listbox = ctk.CTkTextbox(app, height=350, state='disabled')
task_listbox.pack(pady=10, padx=20, fill='both', expand=True)

# เริ่มโปรแกรม
app.mainloop()