Introducción al diseño de la interfaz GUI de Tkinter

Introducción al diseño de la interfaz GUI de Tkinter

Para conocer los conceptos básicos de la ventana Tkinter de Python, consulte https://blog.csdn.net/cnds123/article/details/127227651

Tkinter en sí mismo no proporciona una forma de arrastrar y soltar controles para crear una interfaz GUI, pero proporciona tres métodos de administración de geometría: paquete, cuadrícula y lugar, cada uno de los cuales tiene sus propias ventajas y escenarios aplicables. Elija el método de diseño más adecuado.

El administrador de geometría de Tkinter (administrador de geometría), también llamado diseño (layout), se utiliza para controlar la composición tipográfica y el diseño de los widgets (Widgets) en el formulario.

Un widget (Widget) también se conoce como componente (componente) o control (control), estos términos se usan indistintamente y se denomina Widget en la documentación oficial de Tkinter. Ambos se refieren a elementos visuales en la interfaz de usuario. En Tkinter, algunos widgets comunes son los siguientes:

Etiqueta: se utiliza para mostrar texto o imágenes.

Botón (botón): se utiliza para desencadenar un evento de respuesta o realizar una acción.

Entrada (cuadro de entrada): se utiliza para recibir una sola línea de entrada de texto del usuario.

Texto (cuadro de texto): se utiliza para recibir y mostrar entradas de texto de varias líneas.

Botón de verificación (check box): se utiliza para seleccionar una o más opciones.

Radiobutton (botón de radio): Se utiliza para seleccionar una de múltiples opciones.

Listbox (cuadro de lista): se utiliza para mostrar una lista o seleccionar elementos de la lista.

Combobox (cuadro combinado): Combina las funciones de un cuadro de texto y una lista desplegable.

Frame (marco): sirve para crear un contenedor que puede contener otros Widgets.

Lienzo: se utiliza para dibujar gráficos, imágenes y elementos de interfaz personalizados.

Barra de desplazamiento: se utiliza para implementar el desplazamiento en áreas de contenido grandes.

etc.

El formato de sintaxis general de varios widgets (Widget) en Tkinter es el siguiente:

widget = WidgetClass(padre, opciones)

Entre ellos, WidgetClass es el nombre de la clase de control, parent es el objeto de la ventana principal, options son las opciones y propiedades del control, que pueden ser uno o más parámetros. Estos son algunos selectores y atributos de uso común:

text: Muestra el texto del control.

ancho y alto: Ancho y alto del control en píxeles.

bg y fg: el color de fondo y el color de primer plano del control.

fuente: La configuración de fuente del control.

comando: La función que se ejecuta después de hacer clic en el botón de control.

variable: las variables de estado de los controles, como los cuadros de selección múltiple y los cuadros de radio.

value: El valor del control.

imagen: el objeto de imagen del control de imagen.

Las anteriores son algunas opciones y propiedades de control de uso común, y diferentes controles tienen otros selectores y propiedades diferentes.

Por ejemplo:

Etiqueta: etiqueta = Etiqueta (raíz, texto = "¡Hola, mundo!")

Botón: botón = Botón (raíz, texto = "¡Haz clic en mí!", Comando = devolución de llamada)

Entrada: entrada = Entrada (raíz, ancho = 10)

Texto: texto = Texto (raíz, alto = 5, ancho = 30)

Lienzo: lienzo = Lienzo (raíz, ancho = 300, alto = 200)

Cuadro de lista: cuadro de lista = cuadro de lista (raíz)

Botón de verificación: botón de verificación = Botón de verificación (raíz, texto = "¡Revisame!")

Radiobutton: radiobutton = Radiobutton(raíz, texto="Opción 1", valor=1)

Escala: escala = Escala(raíz, desde_=0, hasta=100, orientación=HORIZONTAL)

Donde root es el objeto de la ventana principal, y estos formatos de sintaxis también se denominan constructores (Constructor), que se utilizan para crear instancias de varios widgets (Widget). Todo widget (Widget) debe tener un contenedor padre (parent), que es la ventana principal o ventana hija a la que pertenece el control. Al crear un widget (Widget), debe pasar su objeto de ventana principal como primer parámetro al constructor.

El uso de widgets (Widget) en tkinter generalmente requiere los siguientes pasos:

1. Importe la biblioteca tkinter.

2. Cree un objeto Ventana Raíz: A continuación, puede crear un objeto Ventana Raíz, que es la ventana de nivel superior de su programa tkinter. Cree una ventana raíz con la siguiente línea de código:

raíz = tk.Tk()

La ventana raíz es la ventana principal de todo el programa tkinter.

3. Cree un objeto de widget (Widget): antes de crear un objeto de widget, debe conocer el tipo y las propiedades de cada widget. Elija el widget apropiado para sus necesidades.

Por ejemplo, para crear un widget de etiqueta, se puede usar la siguiente línea de código:

label = tk.Label(root, text="¡Hola, mundo!")

El código anterior crea un widget de etiqueta llamado label y lo coloca en la ventana raíz. texto es el texto de la etiqueta.

4. Widget de diseño (Widget): una vez que se crea el widget, puede usar el administrador de diseño para colocar y dimensionar el widget dentro de la ventana raíz. Los administradores de diseño comúnmente utilizados son pack(), grid() y place().

5. Registre controladores de eventos, como eventos de clic de botón, etc.

6. Ingrese al bucle de mensajes principal (bucle de eventos principal): finalmente, debe ingresar al bucle de mensajes principal para responder a las operaciones y eventos del usuario. Ingrese al bucle de mensajes principal con:

raíz.mainloop()

Cabe señalar que puede haber diferentes propiedades y métodos en diferentes controles, por lo que la sintaxis de uso específico debe ajustarse de acuerdo con los diferentes controles. Además, también puedes modificar dinámicamente el valor de la propiedad del control a través del método config() o acceder directamente a la propiedad.

diseño del paquete

pack() es un método de diseño relativamente simple. Sin ningún parámetro, organizará los controles en el orden en que se agregaron, de arriba a abajo, línea por línea, y los mostrará en el centro de forma predeterminada. La sintaxis básica del método pack es la siguiente:

widget.pack(opciones)

Entre ellos, el widget representa el widget que se colocará; las opciones son una lista de parámetros opcionales, de la siguiente manera:

parámetro	ilustrar
ancla	La alineación del componente en la ventana, hay 9 valores de parámetros de orientación, como "n"/"w"/"s"/"e"/"ne", y "centro", etc.)
expandir	Si la ventana se puede expandir, el valor del parámetro es Verdadero (extendido) o Falso (no expandido), el valor predeterminado es Falso, si se establece en Verdadero, la posición del control siempre está en el centro de la ventana
llenar	El valor del parámetro es X/Y/BOTH/NONE, lo que significa que el control puede estirarse en ambas direcciones horizontal/vertical/simultáneamente. Por ejemplo, cuando fill = X, el control ocupará todo el espacio restante en la horizontal. dirección.
ipadx, ipads	Debe usarse junto con el valor del parámetro de relleno, indicando la distancia (margen interior) entre el componente y el contenido y el borde del componente, como la distancia entre el contenido del texto y el borde del componente, en píxeles (p), o centímetros (c), pulgadas (i)
padx pady	Se utiliza para controlar las distancias superior, inferior, izquierda y derecha (márgenes) entre los componentes, en píxeles (p) o centímetros (c), pulgadas (i)
lado	Donde se coloca el componente en la ventana, los valores de los parámetros son 'arriba', 'abajo', 'izquierda', 'derecha'. Tenga en cuenta que debe usar el formato de cadena cuando la palabra está en minúsculas, y no necesita usar el formato de cadena si es una palabra en mayúsculas

El código de ejemplo para el uso del método de diseño del paquete es el siguiente:

import tkinter as tk

root = tk.Tk()

button1 = tk.Button(root, text="Button 1")
button1.pack(side="left")

button2 = tk.Button(root, text="Button 2")
button2.pack(side="left")

button3 = tk.Button(root, text="Button 3")
button3.pack(side="right")

root.mainloop()

diseño de cuadrícula

Grid es un diseño de cuadrícula, lo que equivale a tratar la ventana como una tabla compuesta de filas y columnas, y cada celda de la tabla puede colocar un control. La sintaxis básica del método grid es la siguiente:

widget.grid(opciones)

Entre ellos, el widget representa el widget que se colocará; las opciones son una lista de parámetros opcionales, de la siguiente manera:

parámetro	ilustrar
columna	La columna donde se encuentra el control en la tabla, la columna más a la izquierda del formulario es la columna de inicio y la predeterminada es la columna 0
columnasapn	El número de columnas que abarca la instancia de control, el valor predeterminado es 1 columna y varias celdas adyacentes en una fila se pueden combinar a través de este parámetro.
ipadx, ipads	Se utiliza para controlar el relleno, llenando el espacio del tamaño especificado en las direcciones izquierda, derecha, arriba y abajo dentro de la celda.
padx pady	Se utiliza para controlar el margen exterior y llenar el espacio del tamaño especificado en las direcciones izquierda, derecha, arriba y abajo fuera de la celda.
fila	La fila donde se encuentra el control en la tabla, la parte superior del formulario es la fila de inicio y el valor predeterminado es la fila 0
filas	El número de filas que abarca la instancia de control, el valor predeterminado es 1 fila y varias celdas adyacentes en una columna se pueden combinar a través de este parámetro.
pegajoso	Esta propiedad se utiliza para establecer la posición del control en la celda, el valor del parámetro es el mismo que el ancla, si no se establece este parámetro, el control se centra en la celda

El código de ejemplo de uso del método de diseño de cuadrícula es el siguiente:

import tkinter as tk

root = tk.Tk()

label1 = tk.Label(root, text="Label 1")
label1.grid(row=0, column=0)

label2 = tk.Label(root, text="Label 2")
label2.grid(row=0, column=1)

label3 = tk.Label(root, text="Label 3")
label3.grid(row=1, column=0, columnspan=2)

root.mainloop()

disposición del lugar

En comparación con los primeros dos métodos de diseño, el uso del método place() para la gestión del diseño es más refinado. A través del administrador de diseño place(), puede especificar directamente la posición absoluta del control en el formulario, o la posición relativa con respecto a otros controles. .

La sintaxis básica del método place es la siguiente:

widget.place(opciones)

Entre ellos, el widget representa el widget que se colocará; las opciones son una lista de parámetros opcionales, de la siguiente manera:

parámetro	ilustrar
ancla	Defina la orientación del control en el formulario, el valor del parámetro es N/NE/E/SE/S/SW/W/NW o CENTER, el valor predeterminado es NW
modo borde	Defina si las coordenadas del control deben considerar el ancho del límite, el valor del parámetro es EXTERIOR (excluyendo el límite) o INTERIOR (incluido el límite), y el valor predeterminado es INTERIOR.
x, y	Define la posición absoluta inicial del control en forma de raíz en las direcciones horizontal y vertical
relajarse, confiar	1. Defina la posición relativa del control con respecto a la ventana raíz (u otros controles) en las direcciones horizontal y vertical (es decir, la relación de desplazamiento), y el rango de valores está entre 0,0 y 1,0. 2. Puede configurar el elemento de parámetro in_, relativo a alguna otra posición de los controles
anchura altura	La altura y el ancho del propio control (en píxeles)
relheight、relwidth	La relación entre la altura y el ancho del control y la altura y el ancho de la forma raíz, y el valor también está entre 0,0 y 1,0

El código de ejemplo para el uso del método de diseño de lugar es el siguiente:

import tkinter as tk

root = tk.Tk()

button1 = tk.Button(root, text="Button 1")
button1.place(x=10, y=10, width=100, height=50)

button2 = tk.Button(root, text="Button 2")
button2.place(x=120, y=10, width=100, height=50)

button3 = tk.Button(root, text="Button 3")
button3.place(x=10, y=70, width=210, height=50)

root.mainloop()

Tkinter proporciona estos tres administradores de diseño, cada uno de los cuales tiene sus escenarios y características aplicables. Por lo general, no se recomienda mezclar administradores de diseño de paquetes, cuadrículas y lugares. Pero en algunos casos especiales, también es posible usar diferentes administradores de diseño en diferentes widgets. Por ejemplo, use el administrador de diseño del paquete para crear dos marcos (Frame), y luego use el administrador de diseño de cuadrícula o lugar en el marco para diseñar más componentes. Este enfoque puede combinar diferentes requisitos de diseño hasta cierto punto, pero aún debe manejarse con cuidado para evitar resultados de diseño confusos.

[En Tkinter, hay varios tipos de contenedores que se pueden usar para organizar y acomodar otros Widgets.Además de Frame, Toplevel, LabelFrame, etc., también se pueden usar como contenedores. Un contenedor es un tipo especial de Widget, que es especial porque tiene la capacidad de acomodar otros componentes y desempeña un papel organizativo y de gestión en el diseño de la interfaz. 】

El siguiente es el código de implementación para la interfaz de inicio de sesión con tres diseños

1. En el caso de usar el diseño del paquete , primero mire el efecto

El código fuente es el siguiente: en el código anterior, creamos tres contenedores Frame, que se utilizan para colocar los controles de cada fila:

#pack布局
from tkinter import *

# 创建一个窗体，名称为root
root = Tk()
# 为窗体添加标题
root.title("用户登录")
root.geometry("400x180")

root.resizable(width=False, height=False) # 不可调整大小

frame1 = Frame(root)
frame1.pack(side=TOP, pady=5)
Label_username = Label(frame1,text = "登录名：",font = ("华为黑体",16)).pack(side = LEFT, padx=5)
Entry_username = Entry(frame1,font = ("华文黑体",16),width = 20).pack(side = LEFT, padx=5)

frame2 = Frame(root)
frame2.pack(side=TOP, pady=5)
Label_password = Label(frame2,text = "密  码：",font = ("华为黑体",16)).pack(side = LEFT, padx=5)
Entry_password = Entry(frame2,font = ("华文黑体",16),width = 20, show="*").pack(side = LEFT, padx=5) #使用show属性将密码显示为星号

frame3 = Frame(root)
frame3.pack(side=TOP, pady=5)
Button_login = Button(frame3,text = "登录",font = ("华文黑体",16),width = 8).pack(side = LEFT, padx=5)
Button_cancer = Button(frame3,text = "取消",font = ("华文黑体",16),width = 8).pack(side = LEFT, padx=5)

root.mainloop()

2. En el caso del diseño de cuadrícula , primero observe el efecto

[Sugerencia, la línea naranja en la imagen de arriba la agregué para mejorar la comprensión, y el efecto de la operación real no lo es]

El código fuente es el siguiente:

# grid布局
from tkinter import *

root = Tk()
root.title("用户登录")
root.geometry("400x180")

root.resizable(width=False, height=False) # 不可调整大小

# 占位
label = Label(root,text = "     ").grid(row = 0,column = 0,rowspan = 2)

Label_username = Label(root,text = "用户名：",font = ("华文黑体",16)).grid(row = 0,column = 1)
Entry_username = Entry(root,font = ("华文黑体",16)).grid(row =0,column = 2)
Label_password = Label(root,text = "密  码：",font = ("华文黑体",16)).grid(row = 1,column = 1)
Entry_password = Entry(root,font = ("华文黑体",16), show="*").grid(row =1,column = 2)  #使用show属性将密码显示为星号
Button_login = Button(root,text = "登录",width = 8,font = ("华文黑体",16)).grid(row = 3,column = 2,sticky = "e")
Button_cancer = Button(root,text = "取消",width = 8,font = ("华文黑体",16)).grid(row =3,column = 2,sticky = "w")

root.mainloop()

3. En el caso de usar el diseño del lugar , primero mire el efecto

El código fuente es el siguiente:

# place布局
from tkinter import *

root = Tk()
root.title("用户登录")
root.geometry("400x180")

root.resizable(width=False, height=False) # 不可调整大小

Label_username = Label(root,text = "登录名：",font = ("华为黑体",16)).place(x = 40,y = 20)
Entry_username = Entry(root,font = ("华文黑体",16),width = 20).place(x = 120,y = 20)
Label_password = Label(root,text = "密  码：",font = ("华为黑体",16)).place(x = 40,y = 60)
Entry_password = Entry(root,font = ("华文黑体",16),width = 20, show="*").place(x = 120,y = 60) #使用show属性将密码显示为星号
Button_login = Button(root,text = "登录",font = ("华文黑体",16),width = 8).place(x = 70,y = 120)
Button_cancer = Button(root,text = "取消",font = ("华文黑体",16),width = 8).place(x = 210,y = 120)

root.mainloop()

Algunas notas adicionales sobre el código anterior

1. Agregue un parámetro show="*" al constructor del control Entry y reemplace el texto ingresado con asteriscos. De esta forma, la contraseña ingresada por el usuario no se mostrará en texto plano.

2. Puede utilizar el método minsize() y el método maxsize() para establecer el tamaño mínimo y el tamaño máximo de la ventana, respectivamente. como:

root.minsize(400, 180) # establecer el tamaño mínimo

root.maxsize(600, 380) # establecer el tamaño máximo

3. Puede usar el método resizable() para controlar si se puede cambiar el tamaño de la ventana de tkinter. Este método acepta dos parámetros (el primero es la dirección horizontal, el segundo es la dirección vertical) para controlar las condiciones de contorno ajustables de la ventana, donde cada parámetro puede establecer un valor:

Verdadero: Ajustable;

Falso: no ajustable;

El método redimensionable() es True de forma predeterminada para los ajustes en todas las direcciones, es decir, la ventana se puede redimensionar horizontal y verticalmente de forma predeterminada, lo que equivale a establecer redimensionable(Verdadero, Verdadero). Si desea deshabilitar el cambio de tamaño de la ventana en cualquier dirección, puede establecer ambos parámetros en Falso. Si solo desea deshabilitar el cambio de tamaño en dirección horizontal o vertical, puede establecer el parámetro correspondiente en Falso.

Si desea deshabilitar el cambio de tamaño en todas las direcciones, puede establecer ambos parámetros en Falso. como:

root.resizable(False, False) # no redimensionable o root.resizable(width=False, height=False)