Tkinter 将小部件放置在相对于窗口调整大小的特定位置答案

【问题标题】：Tkinter place widget in specific location relative to window resizeTkinter 将小部件放置在相对于窗口调整大小的特定位置
【发布时间】：2018-04-30 09:55:48
【问题描述】：

我是 tkinter 和 python 的新手，我只是想在画布（带有背景图像）的特定点放置一个“文本输入”小部件和一个“按钮”小部件，并让整个布局保持其位置相对于窗口的大小。这是因为我会将我的 gui 设置为不同显示器上的全屏，例如从宽屏到 4:3 纵横比的任何内容。但我希望我的按钮和小部件保持它们的相对位置，这个图表解释了我的意思：- https://i.imgur.com/IMBuwkQ.png

不幸的是，我没有任何运气使用包和网格选项来给我那个也相对于窗口/屏幕大小的精确位置。有没有我可以运行的代码来返回我想要的位置，所以我可以输入那个在网格/包中定位我的小部件？

所以我开发了一些简单的 python3 代码来尝试完成这项工作并完成以下操作：- （为方便起见，图像参考是在线的，因此代码应该立即运行，而不会在您选择的 IDE 中出现任何故障）

from tkinter import*
from PIL import ImageTk, Image
import io
from io import BytesIO
import base64
import webbrowser
import urllib.request  # not urllib.request
from PIL import Image, ImageTk



root = Tk()

root.geometry("1600x700+0+0")




url = "https://i.imgur.com/VqBbqpH.png"  #use "direct link" from imgur, not  "image link"

u = urllib.request.urlopen(url)
raw_data = u.read()
u.close()

im = Image.open(BytesIO(raw_data))
image = ImageTk.PhotoImage(im)

entryDefaultText="Enter Text"




class App(Frame):
    def __init__(self, master):
        Frame.__init__(self, master)
        self.button = Button(master, text="Edit Box Details(click here)", fg="blue")
        self.button.pack()
        #self.button.pack().pack(side=TOP, anchor=W, fill=X, expand=NO)
        self.columnconfigure(0,weight=1)
        self.rowconfigure(0,weight=1)
        self.original=im
        self.image = ImageTk.PhotoImage(self.original)
        self.display = Canvas(self, bd=0, highlightthickness=0)
        self.display.create_image(0, 0, image=self.image, anchor=NW, tags="IMG")
        self.display.grid(row=0, sticky=W+E+N+S)
        self.pack(fill=BOTH, expand=1)
        self.bind("<Configure>", self.resize)
        self.entryWidget(self)





    def entryWidget(self,root):
        self.entry_var = entryDefaultText
        v = StringVar(root, value='Enter Text')
        #self.entry = Entry(root, textvariable=self.entry_var)
        self.entry = Entry(root, textvariable=v)
        self.entry.grid(row=0, column=0, sticky=N,padx=1, pady=1)  # margins




    def resize(self, event):
        size = (event.width, event.height)
        resized = self.original.resize(size,Image.ANTIALIAS)
        self.image = ImageTk.PhotoImage(resized)
        self.display.delete("IMG")
        self.display.create_image(0, 0, image=self.image, anchor=NW, tags="IMG")

                                                                                 #in ms

app = App(root)
app.mainloop()
root.mainloop()

我设法让背景图像根据窗口大小调整大小，但我的小部件和按钮只位于顶部。我尝试指定位置，例如在这种情况下，我希望小部件位于顶部顶点三角形。但是我怎样才能指定那个确切的位置，我怎样才能让我的小部件坐在那个位置的背景图片上，而不是在 gui 的顶部/底部/侧面。谢谢！

【问题讨论】：

使用.place 代替.pack?
感谢 Goyo 的快速响应！！！，这行得通，我最终将所有 .pack 语句替换为 .place 语句。我将给出更新后的详细答案

标签： python user-interface tkinter

【解决方案1】：

我能够通过将 .pack 和 .grid 几何管理器替换为 .place 几何管理器来解决这个问题（感谢 Goyo），即我添加了：-

self.button.place(relwidth = 0.07, relheight = 0.03, relx = 0.489, rely = 0.243)

和

self.entry.place(relwidth=0.07, relheight=0.03, relx=0.489, rely=0.276)

这让我可以指定放置小部件和按钮的位置，并将它们的大小与我的窗口的相对大小联系起来。我作为生活质量问题添加的另一件事是发布光标的位置在 gui 上使用此代码（特别感谢 unutbu 在堆栈溢出问题上的回答）：-

def motion(event):
    x, y = event.x, event.y
    print('{}, {}'.format(x, y))
    #in ms

root.bind('<Motion>', motion)
root.mainloop()

这打印了我想要的位置的坐标，这样我就可以正确定位我的按钮和编辑文本小部件

【讨论】：