10天速通Tkinter库——Day 5：使用config进行OptionMenu美化

在Day3中，我们使用tk.OptionMenu组件做了一个简单的菜单

看起来丑丑的，所以今天尝试对菜单进行美化

1.  OptionMenu 组件参数

老规矩，先看看这个组件可以用的参数，比起其他组件，这个参数真的少得可怜。

class OptionMenu(
    master: Misc | None,
    variable: StringVar,
    value: str,
    *values: str,
    command: ((StringVar) -> object) | None = ...
)

• master 参数指定了该组件所属的父窗口或框架。
• variable 是一个 StringVar 类型的变量，用于存储当前选中的值。
• value 是初始选中的值。
• *values 表示可选的多个值选项。
• command 是一个可选的回调函数，当选择的值发生改变时会被调用。

可以看到，无法直接对组件进行美化。

2. config 和 configure

在 Tkinter 中，config 和 configure 方法可以设置或获取大量控件的参数，这些参数用于控制控件的外观和行为。

通用参数：

• activebackground：活动状态下的背景颜色。
• activeforeground：活动状态下的前景颜色。
• background：背景颜色。
• bd：边框宽度。
• cursor：光标形状。
• disabledbackground：禁用状态下的背景颜色。
• disabledforeground：禁用状态下的前景颜色。
• font：字体设置。
• foreground：前景颜色。
• height：控件的高度（以像素为单位）。
• highlightbackground：高亮背景颜色。
• highlightcolor：高亮颜色。
• highlightthickness：高亮边框的厚度。
• image：要显示的图像。
• justify：文本对齐方式（left, right, center, justify）。
• relief：边框样式（sunken, raised, solid, groove, ridged, flat）。
• selectbackground：选择区域的背景颜色。
• selectborderwidth：选择边框的宽度。
• selectforeground：选择区域的前景颜色。
• state：控件状态（normal, disabled, hidden, active）。
• takefocus：控件是否可以接收焦点。
• text：控件的文本内容。
• textvariable：与控件关联的变量。
• troughcolor：滑动条槽的颜色。
• width：控件的宽度（以像素为单位）。

3. OptionMenu主体美化

在这个案例中，我们定义了一个包含三个选项的下拉列表和一个回调函数弹窗

def optionmenu_example(root):
    def on_option_change(value):
        method_id = options.index(value) + 1
        messagebox.showinfo("选择", "选项"+ str(method_id) + ": "+value)

    # 创建 OptionMenu 的变量,字符串类型
    options = [" 默认杂交方式 ",
               " 强化杂交方式 ", 
               " 随机杂交方式 "]
    selected_value = tk.StringVar()
    selected_value.set(" 杂交方式选择 ")
    # 创建 OptionMenu
    option_menu = tk.OptionMenu(root, selected_value, *options, command=on_option_change,)

    option_menu.pack(side=tk.TOP,pady=20)

美化第一步：用字符串作为选项值时，尽量让options和默认选项等长，不然这个框会随字符串长短变化。

美化第二步：使用config对下拉列表背景颜色和字体进行设置

    option_menu.config(font=("华文新魏", 29, "bold"),
                       bg="darkslategray",activebackground="gray",
                       fg="limegreen", activeforeground="lime")

 

美化第三步：去边框，有的时候白色边框真的很突兀，所以我一般都会去掉，其实只需要下面这两个设置

borderwidth=0,
highlightthickness=0

美化第四步：美化选项框

我们看到，当时我们对选择图标设置大小（字体尺寸）后，选项框还是默认的，这时候我们只需获取选项，并用config进行同样的设置（保留了白色边框）。

# 获取 OptionMenu 的菜单对象    
menu = option_menu['menu']
# 设置菜单背景颜色
menu.config(bg="darkslategray", fg="lime", font=("华文新魏", 25, "bold"))

 4. 总结

在我们设计组件的时候，我们可以养成好习惯，统一使用config或者configure进行美化，大多数组件都是支持这些参数的，非常的好用。

完整代码

import tkinter as tk
from Day2 import *

def optionmenu_example(root):
    def on_option_change(value):
        method_id = options.index(value) + 1
        messagebox.showinfo("选择", "选项"+ str(method_id) + ": "+value)

    # 创建 OptionMenu 的变量,字符串类型
    options = [" 默认杂交方式 ",
               " 强化杂交方式 ", 
               " 随机杂交方式 "]
    selected_value = tk.StringVar()
    selected_value.set(" 杂交方式选择 ")
    # 创建 OptionMenu
    option_menu = tk.OptionMenu(root, selected_value, *options, command=on_option_change,)
    # 美化界面
    option_menu.config(font=("华文新魏", 29, "bold"),
                       bg="darkslategray",activebackground="gray",
                       fg="limegreen", activeforeground="lime",
                       borderwidth=0, highlightthickness=0
                       )
    # 获取 OptionMenu 的菜单对象
    menu = option_menu['menu']
    # 设置菜单背景颜色
    menu.config(bg="darkslategray", fg="lime", font=("华文新魏", 25, "bold"))

    option_menu.pack(side=tk.TOP,pady=20)

if __name__=="__main__":
    root = tk.Tk()
    window_width = 400
    window_height = 300
    title_and_icon(root)
    window_size(root,window_width,window_height)
    window_location(root,window_width,window_height)
    root.configure(bg='lightBlue')  # 设置窗口背景颜色为红色

    optionmenu_example(root)
    root.mainloop()