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

Question

I have written some code for some buttons. However, I am not sure how to add a specific number of pixels of spacing for each button. So far is the code I have written. However, I have not yet figured out a reliable way to add spacing between the buttons in pixel sizes.

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

Using a specific number of pixels of spacing between each Button doesn't sound to me like such as good idea because it isn't very flexible nor easily portable to devices with different resolutions.

Nevertheless I've figured-out a way of doing it—namely by putting a do-nothing invisible button between of the each real ones. This got somewhat involved, mostly because it requires putting an image on each Button used this way so its width option argument will be interpreted as number of pixels instead of number of characters (here's some documentation describing the various Button widget configuration options).

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()

Result:

Here's a blow-up showing that the spacing is exactly 30 pixels (as counted in my image editor and indicated by the thin horizontal black line between the adjacent edges of the two Button s).

Answer 2

Adding space between widgets depends on how you are putting the widgets in the window. Since you are using grid , one simple solution is to leave empty columns between the buttons, and then give these columns a minsize equal to the space you want.

Example:

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)