0

lo que intento hacer es esto:

introducir la descripción de la imagen aquí

Lo que busco hacer es, en el lado izquierdo, tener varios botones y que al dar click a cualquiera de ellos, en la parte derecha me muestre su sección correspondiente (distinta por cada boton)

El único problema que tengo es posicionar los Label y Entry al costado y asi continuamente. Lo he podido hacer un poco usando grid() y usando columnconfigure() y rowconfigure() , pero los valores de weight son muy altos y me hace pensar que no sé usarlos y pues, si, soy nuevo en tkinter.

Cómo harían lo que está en la parte derecha? ayuda por favor.

El código que pude hacer es este:

from tkinter import *
from tkinter import ttk

root = Tk()

principal = Frame(root)
principal.configure(bg='red')
principal.pack(expand=True, fill='both')


principal.columnconfigure(0, weight=10) # extremo izquierdo

principal.columnconfigure(1, weight=1)
principal.rowconfigure(0, weight=1)

principal.columnconfigure(2, weight=1)
principal.rowconfigure(1, weight=5)

principal.columnconfigure(3, weight=5) # central

principal.columnconfigure(4, weight=1)
principal.rowconfigure(1, weight=1)
principal.columnconfigure(5, weight=1)
principal.rowconfigure(2, weight=5)

principal.columnconfigure(6, weight=10) # extremo derecho

#------------------------------  FILA 0  ------------------------------

nombre = Label(principal, text='Nombre:')
nombre.configure(font=('Verdana', 15, 'bold'))
nombre.grid(row=0, column=1, sticky="w") # COLUMN 1

entryNombre = Entry(principal)
entryNombre.configure(font=('Verdana', 15), justify='center')
entryNombre.grid(row=0, column=2, sticky="e") # COLUMN 2

apellido = Label(principal, text='Nombre:')
apellido.configure(font=('Verdana', 15, 'bold'))
apellido.grid(row=0, column=4, sticky="w") # COLUMN 4

entryApellido = Entry(principal)
entryApellido.configure(font=('Verdana', 15, 'bold'), justify='center')
entryApellido.grid(row=0, column=5, sticky="E") # COLUMN 5


#------------------------------  FILA 1  ------------------------------
telefono = Label(principal, text='Nombre:')
telefono.configure(font=('Verdana', 15, 'bold'))
telefono.grid(row=1, column=1, sticky="nw") # COLUMN 1

entryTelefono = Entry(principal)
entryTelefono.configure(font=('Verdana', 15), justify='center')
entryTelefono.grid(row=1, column=2, sticky="ne") # COLUMN 2

celular = Label(principal, text='Nombre:')
celular.configure(font=('Verdana', 15, 'bold'))
celular.grid(row=1, column=4, sticky="nw") # COLUMN 4

entryCelular = Entry(principal)
entryCelular.configure(font=('Verdana', 15, 'bold'), justify='center')
entryCelular.grid(row=1, column=5, sticky="ne") # COLUMN 5

root.geometry('1000x700')
root.mainloop()

y la salida es esta:

introducir la descripción de la imagen aquí

1
  • 1
    se agradecería que pusieras algo de código, lo que intentaste para poder copiarlo y ver como te podemos ayudar.
    – Boolean
    el 24 ene. 2021 a las 4:39

1 respuesta 1

1

Lo que necesitaras:

Primero debes entender como funciona los valores de weight , No es necesario que pongas valores muy altos. weight provoca que un widget crezca si es que hay espacio extra en la ventana. El valor por defecto es cero. Aquí se explica a fondo y de manera clara como usarlo (esta en ingles, ya que no encontré una pregunta en español):

https://stackoverflow.com/questions/45847313/what-does-weight-do-in-tkinter

Para tu proyecto necesitaras tambien los metodos grid_remove() o grid_forget(), lo que hacen estos metodos es ocultar un widget. Para volverlo a mostrar solo usa otra vez grid(). La diferencia entre grid_remove y grid_forget es que grid_remove conserva el widget como lo dejo el usuario (recuerda las opciones) y grid_forget lo reinicia y lo deja como nuevo.

Te recomiendo hacerlo de la siguiente manera:

Primero haz el Frame de la izquierda donde quieres poner varios botones. En este Frame pon varias opciones, por ejemplo "Abrir Frame 1", "Abrir Frame 2", Abrir Frame 3","Abrir Frame 4". Lo que intentas hacer es que al presionar el botón 1 aparezca un Frame a la derecha correspondiente a esta opción y cuando aprietes el botón 2 se quite el Frame que estaba y aparezca el que corresponde a la opción 2 y así con cada opción.

Muestra el frame de la izquierda con grid() y posisicionalo en row=0 y column=0

Una vez tengas ya las opciones a la izquierda haz el Frame de la derecha correspondiente a la opción 1. Dentro de este Frame pon tus entrys y tus labels. Y muéstralo con grid en la posición row=0, column=1. Después ocultalo con grid_remove(). Ahoara solo haz una función que al llamarse ocute todos los Frames de la derecha muestre el Frame1 y asócialo al botón 1 con el parámetro commnand. Repite la funcion para cada boton.

Si ya tienes el interfaz y solo te falta la interacción solamente agrega grid_remove y la función asociada a cada botón. Si agregas el código que llevas a tu pregunta resultaría mas sencillo aclarar tus dudas y decir como y donde usar los métodos.

Ejemplo

Como ya dije arriba lo primero es hacer las partes mas generales, y de ahí ir agregando cada vez mas particularidades a cada parte. Comencemos haciendo la ventana principal y la barra de la izquierda:

# ------------- ROOT ----------
root = Tk() 
root.geometry('800x500') # Aquí pon las medidas que quieras

#------------- Barra izquierda para abrir diferentes frames ----------
# En esta barra hay diferentes opciones  al apretar una opcion 
# se abre a la derecha el frame corresponiente

#Frame de opciones principal
opciones = Frame(root, bg='green', width=200, height=500)
opciones.grid(row=0, column=0, sticky='ns')

Una vez la barra de la izquierda este creada podemos poner dentro los widgets que queramos, en este caso los botones que abrirán cada Frame y una Label hasta arriba que diga 'opciones: '

#Label opciones
opcLabel = Label(opciones, text= 'Opciones: ')
opcLabel.grid(row=0, column=0, pady=20)

#Boton opcion 1
opc1 = Button(opciones, text='Opcion 1', command=muestra1)
opc1.grid(row=2, column=0, sticky= 'nsew', padx=40, pady=20)

#Boton opcion 2
opc2 = Button(opciones, text='Opcion 2', command=muestra2)
opc2.grid(row=3, column=0, sticky= 'nsew', padx=40, pady=20)

#Boton opcion 1
opc3 = Button(opciones, text='Opcion 3', command=muestra3)
opc3.grid(row=4, column=0, sticky= 'nsew', padx=40, pady=20)

#Boton opcion 1
opc4 = Button(opciones, text='Opcion 4', command=muestra4)
opc4.grid(row=5, column=0, sticky= 'nsew', padx=40, pady=20)

Ya tenemos lista la barra de opciones(aunque aun no tiene funcionalidad, eso lo agregaremos al final) ahora trabajaremos haciendo los frames de la derecha para cada opción. como la barra de opciones esta en la columna=0 los Frames deberan ir en la columna=1, justo a un costado. Una vez hechos los Frames agregamos dentro los entrys y las labels o cualquier otro widget, en este caso yo reutilice las entrys y labels de tu codigo.

# ---------- Frame 1 ------------------------
#Por defecto al iniciar el programase muestra el frame 1
#Al seleccionar otra opcion se muestra el 
#Frame correspondiente a la derecha

FrameOpc1 = Frame(root, bg='red', width=600, height=500)
FrameOpc1.grid(row=0, column=1, sticky='nsew')
root.columnconfigure(1, weight=1)
root.rowconfigure(0, weight=1)

FrameOpc1.columnconfigure(0, weight=1)
FrameOpc1.columnconfigure(1, weight=1)
FrameOpc1.columnconfigure(2, weight=1)
FrameOpc1.columnconfigure(3, weight=1)

#Top Label Frame 1
frame1Label = Label(FrameOpc1, text=' 1111111111 - Frame de Opcion 1')
frame1Label.grid(row=0, column=0, columnspan=4, sticky='nsew', pady=30)

#Label y Entry 1
nombre1 = Label(FrameOpc1, text='Nombre1')
nombre1.grid(row=1, column=0, padx=15, pady=25, sticky= 'nsew')
entry1 = Entry(FrameOpc1)
entry1.grid(row=1, column=1, sticky='nsew', padx=20, pady=25)

#Label y Entry 2
nombre2 = Label(FrameOpc1, text='Nombre2')
nombre2.grid(row=1, column=2, padx=15, pady=25, sticky= 'nsew')
entry2 = Entry(FrameOpc1)
entry2.grid(row=1, column=3, pady=25, sticky= 'nsew', padx=20)

#Label y Entry 3
nombre3 = Label(FrameOpc1, text='Nombre1')
nombre3.grid(row=2, column=0, padx=15, pady=25, sticky= 'nsew')
entry3 = Entry(FrameOpc1)
entry3.grid(row=2, column=1, pady=25, sticky= 'nsew', padx=20)

#Label y Entry 4
nombre4 = Label(FrameOpc1, text='Nombre2')
nombre4.grid(row=2, column=2, padx=15, pady=25, sticky= 'nsew')
entry4 = Entry(FrameOpc1)
entry4.grid(row=2, column=3, pady=25, sticky='nsew', padx=20)

Ya esta hecho el Frame de la opción 1. Ahora solo tenemos que hacer los Frames para las demas opciones. Solamente copiamos y pegamos cambiando el nombre del Frame. IMPORTANTE: Los Frames 2, 3, y 4 los ocultamos para que al iniciar el programa solo se muestre el 1, mas adelnate al agregar la interaccion manejamos cual se debe mostrar. Ejemplo del Frame 2 (es exactamente igual al Frame1 solo que diferente nombre y esta oculto):

# ---------- Frame 2 ------------------------
FrameOpc2 = Frame(root, bg='blue', width=600, height=500)
FrameOpc2.grid(row=0, column=1, sticky='nsew')
root.columnconfigure(1, weight=1)
root.rowconfigure(0, weight=1)

#ESTA OPCION OCULTA EL FRAME!!!!
FrameOpc2.grid_remove()

FrameOpc2.columnconfigure(0, weight=1)
FrameOpc2.columnconfigure(1, weight=1)
FrameOpc2.columnconfigure(2, weight=1)
FrameOpc2.columnconfigure(3, weight=1)

#Top Label Frame 2
frame1Label = Label(FrameOpc2, text=' 22222222222222 - Frame de Opcion 2')
frame1Label.grid(row=0, column=0, columnspan=4, sticky='nsew', pady=30)

#Label y Entry 1
nombre1 = Label(FrameOpc2, text='Nombre1')
nombre1.grid(row=1, column=0, padx=15, pady=25, sticky= 'nsew')
entry1 = Entry(FrameOpc2)
entry1.grid(row=1, column=1, sticky='nsew', padx=20, pady=25)

#Label y Entry 2
nombre2 = Label(FrameOpc2, text='Nombre2')
nombre2.grid(row=1, column=2, padx=15, pady=25, sticky= 'nsew')
entry2 = Entry(FrameOpc2)
entry2.grid(row=1, column=3, pady=25, sticky= 'nsew', padx=20)

#Label y Entry 3
nombre3 = Label(FrameOpc2, text='Nombre1')
nombre3.grid(row=2, column=0, padx=15, pady=25, sticky= 'nsew')
entry3 = Entry(FrameOpc2)
entry3.grid(row=2, column=1, pady=25, sticky= 'nsew', padx=20)

#Label y Entry 4
nombre4 = Label(FrameOpc2, text='Nombre2')
nombre4.grid(row=2, column=2, padx=15, pady=25, sticky= 'nsew')
entry4 = Entry(FrameOpc2)
entry4.grid(row=2, column=3, pady=25, sticky='nsew', padx=20)

Una vez hechos los 4 Frames solo nos falta la interaccion, para esto utilizamos el parametro command en los botones que creamos en la barra de opciones y para cada botón hacemos una función en donde se oculten todos los Frames y solo se muestre el que queremos.

#Funciones que muestran los frames correspondintes
def muestra1():
    #Oculta Frames
    FrameOpc2.grid_remove()
    FrameOpc3.grid_remove()
    FrameOpc4.grid_remove()
    #Muestra el correspondiente
    FrameOpc1.grid()

def muestra2():
    #Oculta Frames
    FrameOpc1.grid_remove()
    FrameOpc3.grid_remove()
    FrameOpc4.grid_remove()
    #Muestra el correspondiente
    FrameOpc2.grid()

def muestra3():
    #Oculta Frames
    FrameOpc1.grid_remove()
    FrameOpc2.grid_remove()
    FrameOpc4.grid_remove()
    #Muestra el correspondiente
    FrameOpc3.grid()

def muestra4():
    #Oculta Frames
    FrameOpc1.grid_remove()
    FrameOpc2.grid_remove()
    FrameOpc3.grid_remove()
    #Muestra el correspondiente
    FrameOpc4.grid()

Eso es todo lo que necesitas, las modificaciones o implementaciones te las dejo a ti.

4
  • acabo de subir un codigo y la salida, gracias
    – DarkVaderM
    el 25 ene. 2021 a las 14:33
  • Ya he agregado un ejemplo rapido, checalo y podras implementarlo en tu proyecto el 28 ene. 2021 a las 10:44
  • Muchas gracias estimado, me ha servido mucho.
    – DarkVaderM
    el 30 ene. 2021 a las 4:47
  • De nada colega. Si crees que la respuesta responde todas tus dudas puedes marcarla como respuesta aceptada el 30 ene. 2021 a las 4:55

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.