Custom Tkinter中CTkButton用CTkImage时修改宽度显示异常问题

问题原因 #

当CTkButton绑定图片但未显式清空文本，且宽度设置过小时，CustomTkinter的内部布局逻辑会暴露默认占位文本"CTKButton"，属于库的布局异常问题。

修复方案 #

1. 给按钮显式设置text=""，彻底清空文本内容
2. 可选：添加compound="center"参数确保图片居中显示，避免布局偏移
3. 调整宽度为适配图片的合理数值（不要设置过小，比如根据图片尺寸设为40左右）

修改后的关键代码片段 #

# 加载图片（保留原逻辑）
info_img = ctk.CTkImage(light_image=Image.open("image_res/info.png"))

# 修复后的按钮定义
credits_button = ctk.CTkButton(
    root, 
    image=info_img, 
    text="",  # 强制清空文本
    compound="center",  # 图片居中布局
    width=40,  # 设置合理宽度
    command=open_credits_script
)
credits_button.place(x=600, y=570)

完整修复后代码 #

# Importing the libraries
import customtkinter as ctk
import tkinter as tk
from tkinter import PhotoImage
import requests
import subprocess
from PIL import Image

# Open Weather API Key
api_key = "382c3e7cbd2cf169915da81a88eca8c2"

def get_weather():
    city = city_entry.get()
    if not city:
        weather_label.config(text="Please enter a city")
        description_label.config(text="")
        temperature_label.config(text="")
        humidity_label.config(text="")
        return

    url = f"http://api.openweathermap.org/data/2.5/weather?q={city}&appid={api_key}"
    response = requests.get(url)
    weather_data = response.json()

    if weather_data["cod"] != "404":
        main_weather = weather_data["weather"][0]["main"]
        description = weather_data["weather"][0]["description"]
        temperature = weather_data["main"]["temp"] - 273.15  # fix this soon
        humidity = weather_data["main"]["humidity"]

        weather_label.configure(text=f"Weather: {main_weather}")
        description_label.configure(text=f"Description: {description}")
        temperature_label.configure(text=f"Temperature: {temperature:.1f}°C")
        humidity_label.configure(text=f"Humidity: {humidity}%")
    else:
        weather_label.configure(text="City not found")
        description_label.configure(text="")
        temperature_label.configure(text="")
        humidity_label.configure(text="")

def open_credits_script():
    subprocess.run(["python", "credits_script.py"])


# Custom Tkinter Setup

ctk.set_appearance_mode('Dark')
ctk.set_default_color_theme('dark-blue')

# Main Window

root = ctk.CTk()
root.title("Suntrack - A Weather App")
root.geometry('800x600')
root.iconbitmap("image_res/icon.ico")

# Load in images

info_img = ctk.CTkImage(light_image=Image.open("image_res/info.png"))

# Buttons and labels

city_entry = ctk.CTkEntry(root, font=('Helvetica', 20))
city_entry.pack(pady=10)

get_weather_button = ctk.CTkButton(root, text='Search', command=get_weather, width=10)
get_weather_button.place(x=500, y=11)

weather_label = ctk.CTkLabel(root, text="", font=('Helvetica', 20))
weather_label.pack()

description_label = ctk.CTkLabel(root, text="", font=('Helvetica', 20))
description_label.pack()

temperature_label = ctk.CTkLabel(root, text="", font=('Helvetica', 20))
temperature_label.pack()

humidity_label = ctk.CTkLabel(root, text="", font=('Helvetica', 20))
humidity_label.pack()

# 修复后的 credits 按钮
credits_button = ctk.CTkButton(
    root, 
    image=info_img, 
    text="",
    compound="center",
    width=40,
    command=open_credits_script
)
credits_button.place(x=600, y=570) # Originally 720

root.mainloop()

内容的提问来源于stack exchange，提问作者The Riddler