Cuando utilizamos Tkinter para el desarrollo de una interfaz visual, el diseño de la interfaz es lo más importante a considerar. Qué componentes deben colocarse y dónde deben priorizarse. Podemos usar place o pack to diseño durante el desarrollo, lo que requiere alineación manual y requiere mucho tiempo. . Hay un componente PanedWindow en Tkinter que puede ayudarnos a diseñar el diseño de la ventana en el nivel superior. Los componentes específicos se colocan en la ventana diseñada y no necesitamos alinearlos manualmente.
1: Introducción al componente PanedWindow
PanedWindow (interfaz de panel) es un nuevo componente de gestión de espacio agregado después de la versión 8.4 de Tkinter. Su objetivo principal es proporcionar un contenedor o marco para otros componentes, a fin de diseñar la interfaz gráfica en bloques.
PanedWindow permite a los usuarios ajustar las divisiones de la interfaz y el tamaño de cada área de forma independiente. Por lo tanto, cuando necesite permitir que los usuarios ajusten el tamaño de cada área, puede usar PanedWindow como portador de componentes para diseñar la interfaz.
No solo eso, el componente PanedWindow también proporciona la función "manejar" (habilitada configurando el parámetro showhandle=True). El tamaño de cada área también se puede cambiar arrastrando el icono de "mango".
El formato de sintaxis del componente PanedWindow es el siguiente:
PanedWindow(maestro=Ninguno, **opciones)
donde master representa el componente principal, es decir, el componente de nivel superior que envuelve el componente
2: Propiedades y métodos del componente PanedWindow
Las propiedades comunes de PanedWindow se muestran en la siguiente tabla:
| Atributos | ilustrar |
|---|---|
| almohadilla de mango | 1. Ajuste la posición del "mango" 2. Por ejemplo, cuando orient ='vertical' se establece en vertical, el mango representa la distancia entre el mango en la "línea dividida" y el extremo izquierdo, el valor predeterminado es 8 píxeles |
| tamaño del mango | Establezca el tamaño del "mango" (dado que el "mango" debe ser un cuadrado, se establece la longitud del lado del cuadrado). El valor predeterminado es 8 píxeles. |
| opaco | 1. Esta opción define la operación del usuario para ajustar el tamaño del panel. Si el valor de esta opción es Verdadero (predeterminado), el tamaño del panel cambia a medida que el usuario arrastra el mouse. 2. Si el valor de esta opción es Falso, entonces el tamaño del panel cambia. El tamaño se actualizará a la nueva posición cuando el usuario suelte el mouse. |
| orientar | Especifique el modo de distribución de los paneles. El valor predeterminado es distribución horizontal ("horizontal"), o también se puede configurar en distribución vertical ("vertical") |
| alivio | Especifique el estilo del borde, el valor predeterminado es "plano", también se puede configurar como "hundido", "elevado", "ranura" o "cresta". |
| almohadilla de guillotina | Establezca el espacio entre cada línea divisoria y el panel. |
| fajarelieve | Establece el estilo de la línea divisoria. El valor predeterminado es: "plano". También puedes configurar "hundido", "elevado", "ranura" o "cresta". |
| ancho de guillotina | Establecer el ancho de la línea divisoria |
| asa | Establezca si se mostrará el controlador del panel de ajuste; el valor predeterminado es Falso |
| anchura altura | Establezca la altura y el ancho de PanedWindow. Si no se establece, su tamaño está determinado por el tamaño de sus subcomponentes. |
Los métodos más utilizados de PanedWindow se muestran en la siguiente tabla:
| método | ilustrar |
|---|---|
| agregar (niño) | Agregue un nuevo componente secundario al panel. El formato de sintaxis es agregar (niño, ** opción) y los valores de los parámetros son después, antes y fijos. |
| olvidar (niño) | Eliminar un componente secundario |
| panecget(niño, opción) | Obtener el valor de la opción especificada del subcomponente |
| paneconfig(niño, **opciones) | Establecer varias opciones para subcomponentes |
| paneles() | Devuelve los componentes secundarios contenidos en el componente principal en forma de lista |
| sash_coord(índice) | Devuelve una tupla que representa las coordenadas del punto inicial de la línea divisoria especificada |
| marco_place(índice, x, y) | Mover la línea divisoria especificada a una nueva ubicación |
Tres: instancia del componente PanedWindow
1. Crea dos ventanas cortadas horizontalmente.
from tkinter import *
root=Tk()
root.geometry('300x300')
pw1=PanedWindow(root,orient=VERTICAL,bg='red') # 创建纵向分割面板，背景红色
pw1.pack(fill=BOTH,expand=True) # 尺寸跟随窗体一起变化
la1=Label(pw1,text='窗口1',bg='lightblue') # 标签父组件为pw1
la2=Label(pw1,text='窗口2',bg='lightgreen') # 标签父组件为pw1
pw1.add(la1) # 加入标签1
pw1.add(la2) # 加入标签2
root.mainloop()
2. Crea dos ventanas cortadas verticalmente.
from tkinter import *
root=Tk()
root.geometry('300x300')
pw1=PanedWindow(root,orient=VERTICAL,bg='red') # 创建纵向分割面板,背景红色
pw1.pack(fill=BOTH,expand=True) # 尺寸跟随窗体一起变化
la1=Label(pw1,text='横向窗口1',bg='lightblue')
pw1.add(la1) # 加入标签1
pw2=PanedWindow(pw1,orient=HORIZONTAL,bg='blue',bd=4) # 创建横向分割面板
la3=Label(pw2,text='纵向窗口1',bg='yellow') # 标签父组件为pw2
la4=Label(pw2,text='纵向窗口2',bg='orange') # 标签父组件为pw2
pw1.add(pw2) # pw2加入到pw1
pw2.add(la3) # pw2加入标签3
pw2.add(la4) # pw2加入标签4
root.mainloop()
3. Agregue el componente Marco a la ventana de corte.
from tkinter import *
root=Tk()
root.geometry('800x500')
pw1=PanedWindow(root,orient=VERTICAL,sashrelief='sunken') # 创建纵向分割面板,背景红色
pw1.pack(fill=BOTH,expand=True) # 尺寸跟随窗体一起变化
funcSelectFrame = Frame(pw1)
var = IntVar()
Label(funcSelectFrame, text='功 能 选 择:').place(relx = 0.25,rely = 0.2)
Radiobutton(funcSelectFrame, text="上海", fg='red',variable=var, value=0).place(relx = 0.4,rely = 0.2)
Radiobutton(funcSelectFrame, text="南京", fg='blue',variable=var, value=1).place(relx = 0.5,rely = 0.2)
Radiobutton(funcSelectFrame, text="黄梅", fg='green',variable=var, value=2).place(relx = 0.6,rely = 0.2)
pw2=PanedWindow(pw1,orient=HORIZONTAL,sashrelief='sunken') # 创建横向分割面板
la3=Label(pw2,text='纵向窗口1') # 标签父组件为pw2
la4=Label(pw2,text='纵向窗口2') # 标签父组件为pw2
pw1.add(funcSelectFrame,minsize=100)
pw1.add(pw2) # pw2加入到pw1
pw2.add(la3) # pw2加入标签3
pw2.add(la4) # pw2加入标签4
root.mainloop()
Agregar el parámetro sashrelief mostrará la línea divisoria. Si aún desea ser elegante, puede agregar un pequeño controlador a la línea divisoria. Al crear la línea divisoria, agregue el parámetro showhandle=True.
Si esperamos que el tamaño mínimo de la etiqueta no pueda ser menor que un cierto valor, podemos agregar el parámetro minsize=60 al agregar la etiqueta a funcSelectFrame. La unidad es píxeles.
4. Agregue el componente Texto con la barra de desplazamiento XY en la ventana de corte
from tkinter import *
root=Tk()
root.geometry('800x500')
pw1=PanedWindow(root,orient=VERTICAL,sashrelief='sunken') # 创建纵向分割面板,背景红色
pw1.pack(fill=BOTH,expand=True) # 尺寸跟随窗体一起变化
funcSelectFrame = Frame(pw1)
var = IntVar()
Label(funcSelectFrame, text='功 能 选 择:').place(relx = 0.25,rely = 0.2)
Radiobutton(funcSelectFrame, text="南京", fg='red',variable=var, value=0).place(relx = 0.4,rely = 0.2)
Radiobutton(funcSelectFrame, text="上海", fg='blue',variable=var, value=1).place(relx = 0.5,rely = 0.2)
Radiobutton(funcSelectFrame, text="黄梅", fg='green',variable=var, value=2).place(relx = 0.6,rely = 0.2)
showInfo=PanedWindow(pw1,orient=HORIZONTAL,sashrelief='sunken') # 创建横向分割面板
showInfoLabel = Label(showInfo,text=' 信息提示 ',width=20)
showInfoFrame = Frame(showInfo)
showInfoText = Text(showInfoFrame,wrap="none")#wrap="char"
showInfoScH = Scrollbar(showInfoFrame,orient=HORIZONTAL,command=showInfoText.xview)
showInfoScV = Scrollbar(showInfoFrame,command=showInfoText.yview)
showInfoScH.pack(side=BOTTOM,fill=X)
showInfoScV.pack(side=RIGHT,fill=Y)
showInfoText.pack(side=LEFT,fill=BOTH,expand=True)
showInfoText.config(xscrollcommand=showInfoScH.set,yscrollcommand=showInfoScV.set)
showInfo.add(showInfoLabel)
showInfo.add(showInfoFrame)
pw1.add(funcSelectFrame,minsize=100)
pw1.add(showInfo) # pw2加入到pw1
root.mainloop()