tkinter做一个可以鼠标移动的无标题栏窗体

移动无标题栏原理

今天讲解用学到的tkinter事件及绑定知识，做一个无标题栏窗体并且可以移动。

窗体取消标题栏代码很简单，只一行代码：

root.overrideredirect(True)

移动窗体的设计原理是：

1. 当鼠标左键点击时，获取鼠标相对于窗体左上角的坐标 (牵涉的事件为：<Button-1>)

2. 当按住鼠标左键拖曳时，计算窗体应该移动的位置，再用 geometry()方法来移动窗体。(牵涉的事件为：<B1-Motion>)

3. 当双击窗体时，关闭窗体，退出程序。(牵涉的事件为：<Double-Button-1>)

按着窗体任何一个地方就可以移动无标题栏的全部代码

from tkinter import *
 
def MouseDown(event): # 不要忘记写参数event
    global mousX  # 全局变量，鼠标在窗体内的x坐标
    global mousY  # 全局变量，鼠标在窗体内的y坐标
 
    mousX=event.x  # 获取鼠标相对于窗体左上角的X坐标
    mousY=event.y  # 获取鼠标相对于窗左上角体的Y坐标
    
def MouseMove(event):
    root.geometry(f'+{event.x_root - mousX}+{event.y_root - mousY}') # 窗体移动代码
    # event.x_root 为窗体相对于屏幕左上角的X坐标
    # event.y_root 为窗体相对于屏幕左上角的Y坐标
def exit(event):
    root.destroy()
 
root=Tk()
root.geometry('300x150+888+444')
root.overrideredirect(True)  # 无标题栏窗体
 
root.bind("<Button-1>",MouseDown)  # 按下鼠标左键绑定MouseDown函数
root.bind("<B1-Motion>",MouseMove)  # 鼠标左键按住拖曳事件,3个函数都不要忘记函数写参数
root.bind("<Double-Button-1>",exit)  # 双击鼠标左键，关闭窗体
 
root.mainloop()

　　以上代码运行后，用鼠标左键按住窗体就可以移动窗体。

按着窗体任何一个组件就可以移动无标题栏的全部代码

如果你是希望通过按着某一控件，如一个标签来移动窗体，也是可以的，只要稍改一下，如增加一个标签，然后把绑定的事件改成标签的，考虑到标签的左边距和上边距或者不为0，所以要加入获取标签左边距和上边距的代码，在移动新位置时，也要减去标签的左边距w和上边距h。

代码如下：

from tkinter import *
 
def MouseDown(event): # 不要忘记写参数event
    global mousX  # 全局变量，鼠标在窗体内的x坐标
    global mousY  # 全局变量，鼠标在窗体内的y坐标
 
    mousX=event.x  # 获取鼠标相对于窗体左上角的X坐标
    mousY=event.y  # 获取鼠标相对于窗左上角体的Y坐标
    
def MouseMove(event):
    w=la1.winfo_x() # w为标签的左边距
    h=la1.winfo_y() # h为标签的上边距
    root.geometry(f'+{event.x_root - mousX-w}+{event.y_root - mousY-h}') # 窗体移动代码
    # event.x_root 为窗体相对于屏幕左上角的X坐标
    # event.y_root 为窗体相对于屏幕左上角的Y坐标
def exit(event):
    root.destroy()
 
root=Tk() # 源码来自wb98.com
root.geometry('300x150+888+444')
root.overrideredirect(True)  # 无标题栏窗体
 
la1=Label(root,text='按着我，可以移动窗体\n双击退出',height=3,bg='red',cursor='fleur')
la1.pack(padx=10,pady=40)
 
la1.bind("<Button-1>",MouseDown)  # 按下鼠标左键绑定MouseDown函数
la1.bind("<B1-Motion>",MouseMove)  # 鼠标左键按住拖曳事件,3个函数都不要忘记函数写参数
la1.bind("<Double-Button-1>",exit)  # 双击鼠标左键，关闭窗体
 
root.mainloop()

运行结果：

　　鼠标按住窗体上的红色标签就可以移动窗体。

有标题栏，也可以按住组件移动窗体

如果你的程序有标题栏，你希望程序可以通过鼠标按着某一个组件也可以移动窗体，用上面的代码当然也可以，只要改动2个地方。

1. 去除下面的代码

root.overrideredirect(True)  # 无标题栏窗体

2. 移动窗体代码中，再减标题栏的高度，我的win10标题栏高度是31像素，移动窗体位置的代码改为：

root.geometry(f'+{event.x_root - mousX-w}+{event.y_root - mousY-h-31}') # 窗体移动代码

移动无标题栏窗体的代码，我认为还是很有实用价值，大家可以收藏此文章，以后应该有用。

 下一篇文章，我来讲一下鼠标光标样式，刚才用到鼠标光标的样式“fleur，以前用过“hand2”的样式，其它的鼠标光标样式长什么样？看我的下一篇文章吧。

此文章来自：wb98.com  网站还有相关的系列课程文章，感兴趣的可以前往。

打赏 支付宝打赏 微信打赏

来源：济亨网

本文链接：https://www.wb98.com/post/316.html