当前位置:首页 » tkinter » 正文

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

运行结果:

1.PNG

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


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

如果你的程序有标题栏,你希望程序可以通过鼠标按着某一个组件也可以移动窗体,用上面的代码当然也可以,只要改动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://wb98.com/post/316.html

    << 上一篇 下一篇 >>

    湘公网安备 43011102000514号 - 湘ICP备08100508号