如何在CustomTkinter中让搜索按钮紧贴输入框并优化界面布局？

问题描述 #

我在学习CustomTkinter（ctk）模块时遇到瓶颈，多方搜索未找到答案。需求是让搜索按钮紧贴输入框，同时优化界面整体美观度。尝试过grid、pack的side参数、pady，但未得到满意结果。原代码如下：

from customtkinter import *
from PIL import Image
from PyDictionary import PyDictionary
import pyttsx3
from tkinter import messagebox

audio_dictionary = CTk()
engine = pyttsx3.init()


info_lbl = CTkLabel(audio_dictionary, text="   TajDictionary", font=("Agency FB", 60))
info_lbl.grid(column=0, row=0)


entry = CTkEntry(audio_dictionary, placeholder_text="Write the word: ", border_color="#1F6AA5", width=300, height=35)
entry.grid(column=0, row=1)


def search():
    if ' ' in entry.get():
        if entry.get()[-1] == ' ':
            text_box.delete(1.0, END)
            result = PyDictionary().meaning(entry.get())
            text_box.insert(1.0, f"{entry.get()}: {result}")
        else:
            messagebox.showerror("ERROR", "Only one letter")
    elif any(char.isdigit() for char in entry.get()):
        messagebox.showerror("ERROR", "Only letters")
    elif entry.get() == "" or entry.get() == " ":
        messagebox.showerror("ERROR", "The box is empty")
    else:
        text_box.delete(1.0, END)
        result = PyDictionary().meaning(entry.get())
        text_box.insert(1.0, f"{entry.get()}: {result}")


img1 = Image.open("search_magnifier.png")
search_btn = CTkButton(audio_dictionary, text="", width=30, height=35, image=CTkImage(dark_image=img1), command=search)
search_btn.grid(column=1, row=1)


def speech():
    engine.say(entry.get())
    engine.runAndWait()


img2 = Image.open("speaker.png")
audio_btn = CTkButton(audio_dictionary, text="", image=CTkImage(dark_image=img2), width=10, height=35, command=speech)
audio_btn.grid(column=0, row=2)


def clear():
    entry.delete(0, END)


clear = CTkButton(audio_dictionary, text="Clear", command=clear, text_color="black")
clear.grid(column=1, row=2)

text_box = CTkTextbox(audio_dictionary, width=400, height=300, font=("arial", 20))
text_box.grid(column=0, row=3)


audio_dictionary.mainloop()

解决方案 #

1. 让搜索按钮紧贴输入框 #

grid布局默认会给组件添加间距，直接调整padx为负值即可消除间隙，同时将输入框和按钮放入同一个框架内，便于整体控制：

• 创建CTkFrame容器包裹输入框和搜索按钮
• 设置按钮的padx=-2（数值可根据实际情况微调），让按钮完全贴合输入框右侧
• 确保输入框和按钮高度一致（原代码已设置为35，保持即可）

2. 界面美观度优化 #

• 标题标签设置居中对齐，移除多余空格并添加上下间距
• 统一组件的padx/pady参数，让布局更规整
• 给文本框添加左右间距，避免贴边
• 统一按钮的配色和hover效果，提升视觉一致性
• 设置窗口标题和初始大小，优化初始体验

修改后的完整代码 #

from customtkinter import *
from PIL import Image
from PyDictionary import PyDictionary
import pyttsx3
from tkinter import messagebox

# 初始化窗口
audio_dictionary = CTk()
audio_dictionary.title("TajDictionary")
audio_dictionary.geometry("450x550")  # 设置初始窗口大小
engine = pyttsx3.init()

# 标题标签
info_lbl = CTkLabel(audio_dictionary, text="TajDictionary", font=("Agency FB", 60))
info_lbl.grid(column=0, row=0, columnspan=2, pady=(20, 10))  # 跨列居中，添加上下间距

# 搜索栏容器（解决按钮紧贴问题）
search_frame = CTkFrame(audio_dictionary, fg_color="transparent")
search_frame.grid(column=0, row=1, columnspan=2, pady=(0, 15))

# 输入框
entry = CTkEntry(search_frame, placeholder_text="Write the word: ", border_color="#1F6AA5", width=300, height=35)
entry.grid(column=0, row=0)

# 搜索按钮（紧贴输入框）
img1 = Image.open("search_magnifier.png")
search_btn = CTkButton(search_frame, text="", width=35, height=35, 
                       image=CTkImage(dark_image=img1), command=search,
                       border_width=0, fg_color="#1F6AA5", hover_color="#14507B")
search_btn.grid(column=1, row=0, padx=-2)  # 负padx消除间隙

# 功能按钮区域
func_frame = CTkFrame(audio_dictionary, fg_color="transparent")
func_frame.grid(column=0, row=2, columnspan=2, pady=(0, 15))

# 发音按钮
img2 = Image.open("speaker.png")
audio_btn = CTkButton(func_frame, text="", image=CTkImage(dark_image=img2), 
                      width=35, height=35, command=speech,
                      border_width=0, fg_color="#1F6AA5", hover_color="#14507B")
audio_btn.grid(column=0, row=0, padx=(0, 10))

# 清除按钮
def clear():
    entry.delete(0, END)
    text_box.delete(1.0, END)  # 同时清空文本框

clear_btn = CTkButton(func_frame, text="Clear", command=clear, 
                      text_color="white", fg_color="#1F6AA5", hover_color="#14507B")
clear_btn.grid(column=1, row=0)

# 结果文本框
text_box = CTkTextbox(audio_dictionary, width=420, height=320, font=("arial", 16))
text_box.grid(column=0, row=3, columnspan=2, padx=15)

def search():
    input_text = entry.get().strip()
    if not input_text:
        messagebox.showerror("ERROR", "The box is empty")
    elif any(char.isdigit() for char in input_text):
        messagebox.showerror("ERROR", "Only letters allowed")
    elif ' ' in input_text:
        messagebox.showerror("ERROR", "Please enter a single word")
    else:
        text_box.delete(1.0, END)
        result = PyDictionary().meaning(input_text)
        if result:
            for pos, definitions in result.items():
                text_box.insert(END, f"{input_text} ({pos}):\n")
                for idx, defn in enumerate(definitions, 1):
                    text_box.insert(END, f"{idx}. {defn}\n")
        else:
            text_box.insert(END, f"No definition found for '{input_text}'")

def speech():
    input_text = entry.get().strip()
    if input_text:
        engine.say(input_text)
        engine.runAndWait()
    else:
        messagebox.showerror("ERROR", "Please enter a word first")

audio_dictionary.mainloop()

关键修改说明 #

• 使用CTkFrame将相关组件分组，让布局更模块化
• 搜索按钮的padx=-2直接消除了和输入框之间的默认间隙
• 优化了搜索逻辑，错误提示更准确，结果展示更清晰
• 统一了按钮的配色和样式，提升视觉一致性
• 添加了窗口大小和标题，优化初始体验

内容的提问来源于stack exchange，提问作者taha farzaneh