如何在 tkinter 按钮之间添加特定的像素间距？

Question

我已经为一些按钮编写了一些代码。但是，我不确定如何为每个按钮添加特定数量的间距像素。到目前为止是我写的代码。但是，我还没有找到一种可靠的方法来在像素大小的按钮之间添加间距。

import tkinter as tk
#from tkinter import PhotoImage

def banana():
    print ("Sundae")

def tomato():
    print ("Ketchup")

def potato():
    print ("Potato chips")

root = tk.Tk()
root.geometry("960x600")

f1 = tk.Frame(root, width=70, height=30)
f1.grid(row=3, column=0, sticky="we")

button_qwer = tk.Button(f1, text="Banana", command=banana)
button_asdf = tk.Button(f1, text="Tomato", command=tomato)
button_zxcv = tk.Button(f1, text="Potato", command=potato)

button_qwer.grid(row=0, column=0)
button_asdf.grid(row=0, column=1)
button_zxcv.grid(row=0, column=2)

root.mainloop()

Answer 1

在每个Button 之间使用特定数量的像素间距在我看来并不是一个好主意，因为它不是很灵活，也不容易移植到具有不同分辨率的设备上。

尽管如此，我已经想出了一种方法——即在每个真实按钮之间放置一个无所事事的隐形按钮。这有点涉及，主要是因为它需要在每个使用这种方式的Button 上放置一个图像，因此它的width 选项参数将被解释为像素数而不是字符数（这里的some documentation 描述了各种Button小部件配置选项）。

import tkinter as tk

# Inline XBM format data for a 1x1 pixel image.
BITMAP = """
    #define im_width 1
    #define im_height 1
    static char im_bits[] = {
        0x00
    };
"""

root = tk.Tk()
root.geometry("960x600")
bitmap = tk.BitmapImage(data=BITMAP, maskdata=BITMAP)

f1 = tk.Frame(root, width=70, height=30)
f1.grid(row=3, column=0, sticky=tk.EW)

def banana():
    print ("Sundae")

def tomato():
    print ("Ketchup")

def potato():
    print ("Potato chips")

def layout_buttons(parent, buttons, spacing):
    if buttons:
        first, *rest = buttons
        first.grid(row=0, column=0)  # Position first Button.

        for index, button in enumerate(rest, start=1):
            col = 2*index
            # Dummy widget to separate each button from the one before it.
            separator = tk.Button(parent, relief=tk.FLAT, state=tk.ACTIVE,
                                  image=bitmap, borderwidth=0, highlightthickness=0,
                                  width=spacing)
            separator.grid(row=0, column=col-1)
            button.grid(row=0, column=col)

buttons = (
    tk.Button(f1, text="Banana", command=banana),
    tk.Button(f1, text="Tomato", command=tomato),
    tk.Button(f1, text="Potato", command=potato),
)

layout_buttons(f1, buttons, 30)
root.mainloop()

结果：

这是一个放大图，显示间距正好是 30 像素（在我的图像编辑器中计算，并由两个 Buttons 的相邻边缘之间的细水平黑线指示）。

Answer 2

在小部件之间添加空间取决于您在窗口中放置小部件的方式。由于您使用的是grid，因此一种简单的解决方案是在按钮之间留出空列，然后为这些列分配一个等于您想要的空间的minsize。

例子：

f1.grid_columnconfigure((1, 3), minsize=10, weight=0)

button_qwer.grid(row=0, column=0)
button_asdf.grid(row=0, column=2)
button_zxcv.grid(row=0, column=4)