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

时间:2018-04-30 09:55:48

标签: python user-interface tkinter

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

不幸的是,我没有运气使用打包和网格选项给我那个与窗口/屏幕尺寸相关的精确位置。是否有一个代码我可以运行以返回我想要的位置,所以我可以输入在grid / pack中定位我的小部件?

所以我开发了一些简单的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的顶部/底部/侧面。 谢谢!

1 个答案:

答案 0 :(得分:3)

我能够通过用.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()

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